Do you use Developer Console to edit and take better screenshots?

Last updated by Tiago Araújo [SSW] 12 months ago.See history

When filming a video, it's crucial that images are of the highest possible quality. Capturing a screenshot with a 1080p monitor can be problematic because the screenshot might need to be cropped or zoomed in on causing it to be low resolution in the video. Moreover, there may be elements in the screenshot that should be edited such as sensitive information or the placement of a button.

Luckily, the developer console equips you with an impressive array of tricks for capturing screenshots with extremely high resolution while easily editing elements on the screen.

The Developer Console

The developer console lets a user manipulate a web page to fit their requirements. It can be used to:

✅ Take high-resolution screenshots in 8k or higher
Tip: David Augustat explains how to accomplish this

✅ Hide or edit HTML elements e.g. moving a button, editing the text in a heading or hiding a div
Tip: The right click + "inspect" menu option helps locate the required HTML element

✅ Pinpoint the page area you want to screenshot by either capturing the entire page or zooming in on an area of interest

bad screenshot piers
Figure: Bad example – Original elements at low res

good screenshot piers
Figure: Good example – Edited heading, hidden client, then captured at high res

We open source. Powered by GitHub