How To Use `Firefox` to take Mobile-first Screenshots *Fast* on Any OS

Open
#55 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Domain
documentation

Research direction

The issue names no target file or existing documentation entry; start by locating the repository's setup-guide content and checking where browser instructions belong. Done means adding or updating a Firefox mobile-first screenshot guide with the described steps and images, then verifying the rendered documentation.

Written by the indexing model from the issue text.

Description

discuss enhancement technical

If you don't already have Firefox installed, download and install it: #9 "Install a Dev Browser"! Do it now! ⏳

Once you have Firefox installed, open the Application.

In the top-right corner of the Firefox window, click on the "3 Horizontal Lines" (pancakes) Menu, Then Click on "More tools":
firefox-menu-more-tools

In the "More Tools" sub-menu, click on "Customise Toolbar":
firefox-customise-toolbar

Drag the "Screenshot" icon to your toolbar:

firefox-customise-toolbar-drag-screenshot-icon-to-toolbar

You should end up with the following:

firefox-toolbar-with-screenshot-icon

Once you have everything setup, it's easy to take full-screen screenshots by clicking on the "Screenshot" (scisors) icon
followed by "Save full page":

firefox-take-full-screenshot

Once you've taken the screenshot, you can click "Copy":
firefox-copy-screenshot

And paste the screenshot into any GitHub Issue Comment:

firefox-mobile-first-screenshot

This excludes all the browser chrome including the URL.

Dominant language
No language data
Stars
84
Forks
22
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from dwyl/dev-setup

All issues in dwyl/dev-setup

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.