Take screen grabs and record the tab

The Capture group in DevTools+ by URLflows has five kinds of screenshot and a tab recorder, for bug reports, reviews and demos. Grabs go to your clipboard, your Downloads folder, or both.

Grab what you see

  1. Click the DevTools+ icon.
  2. Under Capture, click Screen grab. The panel closes and the visible part of the tab is captured.
  3. A note on the page confirms it, for example "Copied to the clipboard and saved."

Shortcut: Alt+Shift+S takes a Screen grab without opening the panel.

The other grabs

  • Selection area grab: drag a box over the part of the page you want. Its size shows as you drag. Press Esc to cancel.
  • Element grab: point at an element and click it to capture exactly that element. Press ↑ to widen the highlight to the element around it, ↓ to narrow it back, Enter to pick, and Esc to stop. An element taller than the window is drawn whole by Chrome through its debugger, so Chrome may show its "debugging this browser" bar for a moment.
  • Full page grab: scrolls the page from top to bottom and stitches it into one tall image. A note counts the slices; press Esc to cancel. Sticky headers appear once, at the top. A page that scrolls inside its own container can't be stitched; use Element grab on that container instead. A page taller than the largest image Chrome can make is clipped, and the note says so.
  • Full screen grab: Chrome's picker asks for a whole screen, a window or another tab, then captures it.

You can also screenshot one element from the right-click menu. Selection area grab, Element grab and Full page grab can each be given a keyboard shortcut on Chrome's shortcuts page. See Right-click menu, shortcuts and the Elements tab.

Copy, save or both

Choose what happens after a grab in Settings → Tools → Screen grabs → After a grab:

  • Copy and save a file (the default): the image is on your clipboard, ready to paste, and a PNG is in your Downloads folder.
  • Copy to the clipboard: clipboard only.
  • Save a file: Downloads only.

If the page can't reach the clipboard, the grab is saved as a file instead, so nothing is lost. Scrollbars are trimmed off unless you tick Include scrollbars, which applies to Screen grab, Selection area grab and Full page grab.

Record the tab

  1. Open the page you want to record and click the DevTools+ icon.
  2. Under Capture, click Record the tab.
  3. Leave Include the tab's sound ticked to record its audio, or untick it for silent video. You still hear the tab while it records.
  4. Press Start recording. The panel closes and the toolbar icon shows a red REC badge on that tab. Recording carries on while you use the page.
  5. When you're done, click the icon, open Record the tab (it shows how long it has been recording) and press Stop and save.

The video saves to your Downloads folder as a WebM file named after the site and the time. One tab can be recorded at a time. The sound choice is also in Settings → Tools → Record the tab.

From the pop-out window, Chrome's share window asks which tab to record first. Keep the pop-out open until you stop: closing it ends the recording. See Use the toolbar panel.

Before you share a grab

Use Mask PII (under This page) to cover email addresses, phone numbers, card numbers and names on the page first. See Pick colors, measure and switch page modes.

Related guides

Next, read Inspect an element and copy a container, Console errors, HAR files and DevTools or Troubleshoot common issues.