Screenshot a single element, cut exactly to its edges
Point at a card, form, chart or table and InnoShot outlines it and shows its size. Step out to the parent or in to a child with the arrow keys, then click or press Enter. Elements taller than the window are scrolled and stitched, and a panel with its own scrollbar can be captured in full with the scrollable region command.
The page already knows where each element ends
Dragging a rectangle by eye around a card or a table nearly always catches a sliver of the next element or clips a border. Every web page is built from boxes, though, and each box has exact edges. Element capture uses them: hover over what you want and the outline snaps to that box.
The box under the pointer is not always the one you mean. Hovering over a card may land on its heading or an icon inside it. Press the Up arrow to move the outline out to the containing element and the Down arrow to move back in, watching the size readout until the outline frames what you want.
Some content scrolls inside its own box instead of with the page: chat threads, code panels, tables with a fixed height, the body of a dialog. An ordinary capture shows only the part in view. The scrollable region command finds those boxes, lets you pick one, and scrolls it from top to bottom while capturing, so its whole contents end up in one image.
How to screenshot a specific element
-
1
Start element capture
Press Alt+Shift+E (Option+Shift+E on a Mac), click the InnoShot icon and choose the element action, or right-click the page and use the InnoShot menu.
-
2
Hover over the element
An outline follows the pointer and shows the size of the element underneath it.
-
3
Adjust with the arrow keys
Press Up to move out to the parent element and Down to move in to a child, until the outline matches what you want.
-
4
Click or press Enter
The element is captured, stitched together if it is taller than the window, and opened in the editor in a new tab. Press Esc at any point to cancel.
From a single button to a whole chat history
-
Outline and size as you hover
You see exactly which box will be captured, and how big it is, before you commit. Nothing is taken until you click or press Enter.
-
Parent and child navigation
Up moves the outline out one level and Down moves it in one level. It is the quickest way to get from a small label to the whole card or section around it.
Learn more about parent and child navigation -
Long elements stitched
An article body, a comment thread or a long table that runs past the window is captured by scrolling the page and joining the screens, at roughly half a second per screen.
-
Scrollable divs captured in full
The capture scrollable region command detects elements with their own scrollbar. Pick one and InnoShot scrolls that element, not the page, stitching its whole contents. It ships without a shortcut, and you can assign one at chrome://extensions/shortcuts.
Learn more about scrollable divs captured in full -
Clean edges, ready to present
Because the capture is cut to the element, it sits neatly on a background or inside a frame in the editor, with no stray pixels from the rest of the page.
Learn more about clean edges, ready to present
Good to know
The picker works with the structure of the page, so a few kinds of content need another approach.
- Content embedded from other sites
- Maps, video players, payment forms and widgets usually live in a cross-origin iframe. Their pixels appear in captures, but neither the element picker nor scrollable region capture can reach inside them. Drag a selected area around them instead.
- Virtualized lists
- Long feeds, chat histories and data grids often draw only the rows near the visible part and remove the rest. As InnoShot scrolls the container the app redraws rows, so the result can differ from what you expect. Check it in the editor, and capture in smaller parts if needed.
- Element capture shows what is on the page
- An element with its own scrollbar is captured as it appears, so the hidden part of its contents is not included. Use the scrollable region command when you need everything inside it.
- Pages Chrome reserves
- Chrome keeps extensions off its own pages, so the picker is unavailable on chrome:// addresses, the Chrome Web Store, the New Tab page and pages of other extensions.
Element screenshot questions
Something else? The full FAQ and the documentation go further.
Can I screenshot an element without an extension?
Yes, with Chrome DevTools. Open DevTools (F12, or Cmd+Option+I on a Mac), select the node in the Elements panel, right-click it and choose "Capture node screenshot". The same command is in the Command Menu (Ctrl+Shift+P, or Cmd+Shift+P on a Mac). It saves a PNG to your Downloads folder. You find the element in the page code rather than by pointing at it, there is no editing step, and a scrollable box comes out showing only its visible slice.
How do I screenshot a scrollable div?
Run the capture scrollable region command from the InnoShot popup, or from a shortcut you assign at chrome://extensions/shortcuts. InnoShot detects the elements that scroll on their own; point at the one you want and click. It then scrolls that element section by section, captures each section, stitches them into one image and restores the scroll position afterwards.
Why does a full-page capture of a web app come out one screen tall?
Many web apps keep the page itself still and scroll everything inside one container. A full-page capture scrolls the page, so there is nothing further to capture. Use the scrollable region command on the main container instead.
What happens if the element is taller than my screen?
InnoShot scrolls the page and stitches the element together from several captures. Because Chrome limits extensions to two screen captures a second, expect about half a second for every screen of height.
Keep reading
- Element capture, step by step The picker keys, and when to move to the parent or a child.
- Scrollable containers Chats, code panels and fixed-height tables captured in full.
- How to capture a specific element on a webpage The DevTools node screenshot and the InnoShot picker, step by step.
- How to capture a scrollable div in Chrome Why normal screenshots miss the content, and two ways to get it.
- Capture problems Embedded frames, blank areas and pages that cannot be captured.
Capture the element, not the whole page
The picker is added to the page only when you start it and removed afterwards. Nothing is uploaded.
For Google Chrome on desktop. Coming to the Chrome Web Store.