The Onist

The Onist


Tags


Easily Screenshot any DOM Element in Chrome

Sharing Chrome's little known command line feature that allows for quick and precise screenshots of any DOM element.

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.

The Steps

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:

The desired node is selected in Chrome Devtools.

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!

Select "Capture node screenshot" to take the screenshot.
The resulting screenshot.


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.  

Safari

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!

Firefox

  1. Open up the developer tools
  2. Locate your desired element that you want to screenshot
  3. Right click on the element to open the context menu.
  4. Click "Screenshot Node"
Share Post
View Comments