While most operating systems ship with built-in screenshotting tools, it’s often desired to grab pixel-perfect screenshots. In this post, I’ll show you how to do so using Chrome Devtools.

A Test Case — The Dev.to Sidebar Nav

To use Chrome Devtools to take screenshots, we’ll want to be screenshotting something in the browser. Today’s test case will be the Dev.to sidebar nav (yes, that thing on the left of your dev.to home page). The following is a pixel-perfect example of what we’ll be grabbing:

The Steps

The steps we need to take are as follows:

1. Find the right node in Chrome Devtools “Elements” panel
2. Open the Run Command prompt
3. Select “capture node screenshot”

1. Finding the right node

To find the right node, I usually right-click on the element I’m looking for and click “inspect.” This will take you to the “Elements” panel in devtools, at which point you can browse around to make sure you’re selecting the right node. In this case, the div we’re targeting has an id of sidebar-nav. When you have it correctly selected, your screen should look something like this:

2. Open the Run Command prompt

Once we have the right node selected, we need to open the Run Command prompt. There area couple ways to do this:

1. Click on the vertical ellipsis (…) in the upper-right corner of devtools and click “Run command”
2. (My preferred method) Just hitting ctrl + shift + p

You should now see something like this:

3. Select “Capture node screenshot”

Type “capture node screenshot” and hit enter once the right option is selected. You should see your screen take the screenshot and download the image!

That’s It

You now know how to take pixel-perfect screenshots! Hopefully this helps you with all sorts of tasks, from working on design mocks to capturing bug reports.

🎓 Learn how the web works

One of the best ways to level up your tech career is to have a great foundational understanding of how the web works. In my free newsletter, How the Web Works, I provide simple, bite-sized explanations for various web topics that can help you boost your knowledge. Join 2,500+ other learners on the newsletter today!

Signing up is free, I never spam, and you can unsubscribe any time. You won't regret it!