Taking Screenshots in Chrome or Firefox

If you work on any web application or website… you will eventually need to take some screenshots.

In the old days, I'd expand the window to the maximum size for that montior (trying to keep all my screenshots a consistent size,) use whatever screenshot tool was built into the operating system, then use photoshop to trim out the browser chrome and stitch together successive images to have a tall image that represented the scrollable portion. I'm pretty sure that I had an Imagemagick script at one point to do this automatically.

There are much better ways.

Recently I've just used an extension like Full Page Screen Capture. This is way easier than the old manual way.

Extension? We don't need no stinkin' extension!

You don't have to use an extension though. Chrome and Firefox have screen shot features built in. In Chrome, if you summon the inspector and enable the Device Toolbar, you can access screenshot options from the triple dot menu icon in the top right of the Device Toolbar. It allows you to take both a full-length screenshot, or just the visible portion.

While using the Device Toolbar can help you ensure that all your screenshots are the same resolution (handy for putting together documentation or a presentation!) you may wish to take a screenshot at the full size available to your monitor. In Chrome, the only I have found to do this is to invoke the Command Menu feature using ⌘+⇧+P and searching for "screenshot."

Firefox has a nearly identical feature in the same place, but it lacks the ability to take a screenshot of the full scrollable area. It does have a clearer little camera icon.

Both Firefox and Chrome also have a feature that let you take a screenshot of just the currently selected element in the DOM inspector, also very handy for selecting just an iframe or a component you are documenting.