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

Use high-quality images in presentations and videos. Screenshots from a 1080p monitor can look blurry when zoomed or cropped. Edit them first to remove sensitive information and focus attention on what matters.

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

❌ Figure: Bad example - Original elements at low resolution

✅ Figure: Good example - Edited heading, hidden client, then captured at higher resolution