How many times as a web developer are you asked to share screenshots of the feature you are currently building? I'm often asked to get screenshots for not only our design team but also for product teams whom will then use these images in presentations and demos for clients. Having a pixel perfect screenshot is oftentimes important and thankfully it is easier than ever to do in Chrome.
I have a spirograph in the hero section of my personal website and I want to take a perfect screenshot of it for my grandma. Let me show you how:
Find the Desired Node in Devtools
Open up Chrome Devtools "Elements" panel by either right clicking on your page and selecting "Inspect" in the dropdown or by pressing
Command+Shift+C on Mac or
Control+Shift+C on Windows.
With Devtools now open, browse around to select the right node. Chrome will highlight blue the section of the webpage that you currently have selected. Once the correct element is found, your screen should look something like this:
Capturing the Screenshot
From Devtools window, press
Command+Shift+P on Mac or
Control+Shift+P on Windows to open the Command Menu. Type "node screenshot" into the search and then select "Capture node screenshot" from the list. Your OS will them take the screenshot and automatically download the image!
Using Other Browsers
Safari and Firefox both have similar features to this. Safari's is not quite user intuitive as you have to the knowledge to right a DOM selector. Firefox's on the other-hand is quite easy to use. Below is a quick how-to for each.
Open up the developer tools and from the console run
console.screenshot([#element_selector]) to grab a screenshot. Be sure your element selector is correct!
- Open up the developer tools
- Locate your desired element that you want to screenshot
- Right click on the element to open the context menu.
- Click "Screenshot Node"