How to Capture a Specific Element on a Webpage

Often you do not want the whole page. You want the pricing card, the chart, the sign-up form or the one table a colleague asked about. You can take a bigger screenshot and crop it, but getting the edges exactly right by hand is fiddly, and the result rarely lines up to the pixel.

Element capture solves this by using the structure of the page itself. Instead of dragging a rectangle, you pick a part of the page and get an image of exactly that part, edge to edge. This guide shows how to do it with Chrome DevTools, which is built into Chrome, and with InnoShot's element picker, and how to handle the cases where neither does what you expect.

What counts as an element

Web pages are built from nested boxes called elements. A product card might contain a heading, an image and a button; the card sits inside a grid, the grid inside a section, the section inside the page. Each of those boxes can be captured on its own.

That nesting is the key to getting a clean element screenshot. The thing you see as "the card" might be one box, or it might be an inner box with the padding and border drawn by its parent. Most of the work is choosing the right level.

Method 1: Chrome DevTools "Capture node screenshot"

DevTools calls elements "nodes". It can capture any node you select in its Elements panel, and there are two ways to reach the command.

From the Elements panel

1. Right-click the part of the page you want and choose Inspect. DevTools opens with the matching node selected in the Elements panel.
2. Hover over nodes in the Elements panel. Chrome highlights each one on the page, so you can see exactly what it covers.
3. If the highlight is too small, move up the tree to the parent node until it covers everything you want.
4. Right-click that node and choose Capture node screenshot.

Chrome saves the image as a PNG in your Downloads folder.

From the Command Menu

1. Open DevTools with F12, or Ctrl+Shift+I on Windows and Linux (Cmd+Option+I on macOS).
2. Select the node you want in the Elements panel by clicking it.
3. Open the Command Menu with Ctrl+Shift+P (Cmd+Shift+P on macOS).
4. Type screenshot and choose Capture node screenshot.

The command always captures the node that is currently selected in the Elements panel, so check the selection before you run it.

Limits of the DevTools method

• You work from the page's code. Pages often wrap content in several layers of nearly identical boxes, so finding the right one can take some trial and error.
• There is no editor. Cropping, annotating or adding a background happens in another program.
• Fixed and sticky elements and lazy-loaded images can render oddly.
• Each capture means opening DevTools and repeating the steps.

Method 2: InnoShot's element picker

InnoShot is a free Chrome extension for capturing and editing screenshots. Its element capture works on the page itself, so you never need to read any code. InnoShot is coming to the Chrome Web Store; the download page links to the listing once it is live.

Capture an element step by step

1. Open the page and scroll so the element, or at least its top, is on screen.
2. Start element capture in one of three ways:
   • Click the InnoShot icon in the toolbar and choose element capture.
   • Press Alt+Shift+E. On macOS, Chrome shows this as Option+Shift+E.
   • Right-click the page and choose InnoShot's element capture from the context menu.
3. Move your pointer over the page. InnoShot outlines the element under the pointer and shows its size.
4. Adjust the selection with the keyboard. Press the Up arrow to select the parent, a larger box that contains the current one. Press the Down arrow to go back to a child, a smaller box inside it.
5. Click, or press Enter, to capture. Press Esc if you change your mind.
6. The capture opens in InnoShot's editor in a new tab.

If the element is taller than your screen, such as a long table or the body of an article, InnoShot scrolls through it and stitches the parts into one image. That takes roughly half a second per screen, because Chrome lets an extension capture a tab at most twice per second.

The element capture docs cover the picker in more detail.

Choosing the right box

A few habits make the picker quicker:

• Point at the content first, then press the Up arrow until the outline includes the padding, border or background you want.
• Watch the size readout. If the outline jumps from a small card to the full width of the page, you went one level too far; press the Down arrow once.
• If the box you want includes stray empty space, a child element is usually a tighter fit.

After the capture

Element screenshots are already cleanly cut, which makes them easy to present. In the editor you can add arrows, text or numbered markers, or place the element on a background with padding and a shadow; the guide to screenshot backgrounds shows what is possible. You can then export as PNG, JPEG, WebP, PDF or SVG, or copy the image to the clipboard.

When the thing you want is not a single element

Sometimes no single box matches what you want to show.

It spans several elements. For a heading plus the first two cards of a grid, use selected area capture instead (Alt+Shift+S). You drag a rectangle, resize or move it, and read its size as you go. The arrow keys nudge it by 1 pixel, or 10 pixels with Shift, and you can lock an aspect ratio. Press Enter to confirm or Esc to cancel. The selection can extend beyond the visible screen, in which case the page scrolls to capture it.

It has its own scrollbar. A chat window, code block or data table that scrolls inside the page is a scrollable container. Element capture records it as it appears on screen. To capture all of its content, use InnoShot's "Capture scrollable region", which scrolls that container and stitches the result. The guide to capturing a scrollable div explains it step by step.

Common problems

The picker cannot select something inside an embedded frame. Maps, video players and third-party widgets are often loaded from another site in a cross-origin iframe. Their pixels appear in captures, but InnoShot's picker cannot reach individual elements inside them. Select the frame as a whole, or use selected area capture around the part you want.

A shadow or glow is cut off. Element capture records the element's box. A drop shadow or glow that spills outside that box can be clipped. Press the Up arrow to capture the parent instead, or use selected area capture with a little margin.

A menu or tooltip disappears. Dropdowns and hover effects often close when you click to capture. Use delayed capture instead: it waits 3, 5 or 10 seconds, or a custom time from 1 to 60 seconds, with a countdown on the toolbar badge. Open the menu while it counts down, then crop to it in the editor. The countdown overlay is removed before the frame is taken. See delayed capture.

Something covers the element. Cookie banners, chat bubbles and sign-up prompts are part of what is on screen. Close them before you start the capture.

The shortcut does nothing. Chrome does not assign a suggested shortcut if another extension already uses it. Check or change it at chrome://extensions/shortcuts.

InnoShot will not start on this page. Chrome blocks extensions on chrome:// pages, the Chrome Web Store, other extensions' pages, view-source: pages and the New Tab page. Local file:// pages work after you turn on "Allow access to file URLs" for InnoShot.

Wrapping up

For a one-off image, right-clicking a node in DevTools and choosing Capture node screenshot does the job, as long as you can find the right node. If you capture parts of pages regularly, InnoShot's picker lets you point at the element, step up or down with the arrow keys and press Enter, then edit the result straight away. Once you have the element, you may want to draw attention to one detail inside it; the guide to highlighting one part of a screenshot covers that next step.