📸

2 tips for capturing better screenshots

Status
Posted
Published Date
May 30, 2022
AI custom autofill

2 tips for capturing better screenshots using the Inspect Element tool in Chrome 👇

The Inspect Element tool is something I use every day. I rarely grab a screenshot of a website or app without first considering two things.

But first, to get started:

  • Open Chrome
  • Right click anywhere on a page
  • Select “Inspect”
  • Click the icon in the top-left corner of the developer pane — looks like an arrow in a square

Now you can select any element on the page you want to change.

Here are two things I often use this for:

1️⃣ Removing any unnecessary UI elements ✂️

When you’re trying to highlight a specific feature, you can easily delete or hide other things on the screen. It helps keep the image simple and avoids people getting distracted by other UI elements that don’t matter in that moment.

2️⃣ Touching up text and data to tell a better story 📈

We often grab screenshots of a demo instance that may have messy dummy data, or a real production instance of an app that may have sensitive things in it. In either case you can easily edit text and numbers.

Worth noting, all of these changes are only being made in your browser. Just enough time for you to grab a screenshot. Once you refresh the page it all goes away.

Hope this helps, would love to hear any other Developer Tools tricks other people are using.

PS. I dropped a great article from Zapier that covers a number of great tips on how to use Developer Tools.

image

Comments:

Here's the article I mentioned from Zapier that shows more ways to use to use Chrome Developer Tools 👉 https://zapier.com/blog/inspect-element-tutorial/