How to Capture a Specific Element Screenshot in Chrome DevTools

To save an image of one element in Chrome, select its DOM node in DevTools’ Elements panel, right-click the node, and choose Capture node screenshot. Chrome saves the image to Downloads on Windows and macOS. This captures the selected node; it is different from capturing the visible viewport or the entire page.

Capture one element in Chrome DevTools

Open the webpage in Chrome.
Open DevTools. You can use the Chrome menu or the keyboard shortcut for your operating system.
Open the Elements panel.
Find the element in the DOM tree. If you do not know where it is, activate the element picker with Ctrl+Shift+C on Windows or Linux, or Command+Shift+C on macOS. Then click the element on the page. Chrome selects the corresponding node in Elements.
Right-click the selected node in the DOM tree and choose Capture node screenshot.
Find the saved screenshot in your Downloads folder.

The context menu command belongs to the selected DOM node in the Elements panel. It is not the regular page context menu. Chrome’s official documentation describes this procedure in its DOM guide and explains the DevTools screenshot options.

Choose the right screenshot mode

What you need	DevTools command	What it captures
One card, image, panel, or other DOM element	Capture node screenshot	The selected node
What is currently on screen	Capture screenshot	The visible viewport
The complete page, including content below the fold	Capture a full size screenshot	The full page

Use node capture when you want just one element, such as a chart or a product card. Use viewport capture for a record of what was visible in the browser, and full-size capture when you need the whole page. Chrome lists these as separate screenshot methods in its screenshot overview.

Find the correct DOM node

When the target is hard to locate in the DOM tree, use the element picker shortcut and click the target directly on the page. This helps connect a visible part of the page to its DOM node. For nested elements, check the selected node and its ancestors in Elements before capturing: clicking text or an icon may select a child, while the card or panel you want may be a parent.

If the capture is not the scope you intended, repeat the selection and choose the appropriate node. The result depends on which node is selected; selecting a child does not mean Chrome will capture its surrounding card.

Practical limits and edge cases

Nested content: Select the node whose bounds correspond to the part you want saved. Inspect its parent and child nodes if the selection is too narrow or too broad.
Dynamic pages: Allow the page to reach the state you want before capturing. DevTools’ basic node-capture instructions do not specify how every animation or changing page state is handled.
Embedded content and scrolling containers: The documented workflow does not guarantee a particular result for every complex embedded element or scrollable region. Check the saved image and adjust the selected node or page state if needed.
Wrong scope: If you need everything currently visible or the entire page, use the viewport or full-size screenshot command instead of node capture.

Troubleshooting

Problem	Likely cause	What to do
“Capture node screenshot” is not in the menu	The right-click was not on a node in the Elements DOM tree, or no target node is selected.	Open Elements, select the node in the DOM tree, then right-click that node.
The saved image shows the wrong part	A child or parent node was selected instead of the intended element.	Use the element picker again, inspect the selected DOM node and its ancestors, and capture the intended node.
The image is of the visible screen or full page	A different screenshot command was used.	Choose Capture node screenshot from the target node’s context menu.
You cannot find the file	You are checking a different folder or platform behavior.	Check Downloads; Chrome documents this save location for Windows and macOS.
The capture does not reflect the desired page state	The page may still be loading or changing.	Wait for the content to settle, then capture again. For unusual embedded or scrolling content, inspect the result because behavior can vary.

Or skip the browser setup

For repeatable captures from code, ScreenshotNeo provides a website screenshot API and MCP server. A single GET request takes a URL and returns an image or PDF. For an API capture of an element, pass the CSS selector using the documented element option; see the ScreenshotNeo API documentation for parameter names and configuration.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

These examples capture the page URL. Add the documented element selector option when you need a specific element. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account and get 1,000 screenshots a month with no card.

FAQ

How do I screenshot only a div in Chrome?

Select the div’s node in the Elements panel, right-click it, and choose Capture node screenshot.

Does Chrome save the node screenshot automatically?

Yes. Chrome documents that the screenshot is saved to Downloads on Windows and macOS.

Can I capture an element without knowing its HTML?

Yes. Activate the element picker with Ctrl+Shift+C on Windows or Linux, or Command+Shift+C on macOS, then click the element on the page.

Can I automate this exact DevTools action?

This guide covers the manual DevTools workflow. For programmatic capture, use a screenshot API and configure its element selector as documented by that service.

Sources

ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo.