sodcalculator

10 Tech How-To

Capture Scrolling Webpage in Chrome: Web Clipper Guide

Guide 10-20805 · Updated · Step by step

This guide shows you how to capture a full-page screenshot of a scrolling webpage directly in Chrome using the built-in web clipper tool. You’ll learn the exact steps to save an entire article, dashboard, or long page as a single image or PDF, with no extra software needed. The process works on Windows, Mac, and Linux versions of Chrome.

What You’ll Need

  • Google Chrome browser (updated to a recent version)
  • The webpage you want to capture open in a tab
  • Basic knowledge of Chrome’s developer tools (F12 or right-click > Inspect)

Step-by-Step

  1. Open the webpage you want to capture. Make sure it’s fully loaded and any lazy-loaded content (images, comments, infinite scroll) is expanded. If the page has a “load more” button, click it until you see everything you need.
  2. Open Chrome’s developer tools by pressing F12 (Windows/Linux) or Cmd+Option+I (Mac). Alternatively, right-click anywhere on the page and select “Inspect” from the context menu.
  3. Open the command menu inside the developer tools. Click the three-dot menu (⋯) in the top-right corner of the dev tools panel, then select “Run command”. Or simply press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
  4. Type “screenshot” in the command menu’s search box. You’ll see a list of commands appear, including “Capture full size screenshot”.
  5. Click “Capture full size screenshot” (or press Enter after highlighting it). Chrome will automatically scroll through the page, capture the entire content as a single image, and save it as a PNG file in your default Downloads folder.
  6. Wait for the download notification in the bottom-left corner of Chrome (or in the downloads bar). The file will be named something like “screenshot_2025-01-15_143025.png” – you can rename it later.
  7. Open the PNG file to verify it captured the full page. If the page was very long, the image might be huge (several thousand pixels tall) – that’s normal.

Common Mistakes

  • Not letting the page load completely. If images or comments load lazily as you scroll, the capture might miss them. Scroll through the page manually once before starting the capture.
  • Using the wrong command. “Capture screenshot” (without “full size”) only captures the visible viewport, not the whole page. Make sure you choose “Capture full size screenshot”.
  • Having the developer tools docked in a way that covers part of the page. The capture includes the entire page, but if the dev tools are in a separate window, it still works. If docked to the side, the capture might include a slightly narrower width – undock or close the dev tools after running the command.
  • Forgetting to expand collapsible sections. If the page has accordions or tabs, only the visible content is captured. Open all sections you need before capturing.
  • Capturing while the page is zoomed in or out. The full-size capture uses the current zoom level. Set zoom to 100% (Ctrl+0 or Cmd+0) for a predictable result.

Tips

  • Save as PDF instead of PNG: In the same command menu, type “print” and select “Print” to open the print dialog. Choose “Save as PDF” as the destination and set “Paper size” to “Custom” with a very tall height to get a PDF of the full page.
  • Capture only a specific element: If you only need a section (like a table or a chart), right-click that element, select “Inspect”, then in the dev tools, right-click the highlighted HTML and choose “Capture node screenshot”. This saves just that element as an image.
  • Use a Chrome extension for one-click capture: If you do this often, extensions like “Full Page Screen Capture” or “GoFullPage” add a toolbar button. They work similarly but don’t require opening dev tools.
  • Check the image dimensions: For very long pages (e.g., 50,000 pixels tall), some image viewers may struggle to open the file. Use Chrome itself or a dedicated image editor to view it.
  • Clean up the page first: Use Reader Mode (if available) or hide distracting elements with an extension to make the capture cleaner and the file smaller.

Troubleshooting

  • The screenshot is only the visible part: You likely selected “Capture screenshot” instead of “Capture full size screenshot”. Re-open the command menu and choose the full-size option.
  • The command menu doesn’t show any screenshot commands: Make sure you’re in the developer tools (not just on the page). Click anywhere inside the dev tools panel first, then press Ctrl+Shift+P or Cmd+Shift+P.
  • The captured image is blank or black: This can happen on pages with heavy animations or canvas elements. Try pausing animations (press Esc in dev tools, then reload), or use the print-to-PDF method instead.
  • The page is too long and Chrome crashes or freezes: For extremely long pages (e.g., infinite scroll), Chrome may run out of memory. Try capturing in sections, or use an extension that splits the capture. Alternatively, disable hardware acceleration in Chrome settings (Settings > System > Use hardware acceleration when available) and retry.
  • The screenshot is missing the top or bottom of the page: This can happen if the page has a sticky header or footer that covers content. Temporarily hide those elements using dev tools (right-click the element, select “Inspect”, then delete or hide it) and recapture.
  • No download appears: Check your Chrome downloads folder – it might have saved automatically. If not, look at the downloads bar (Ctrl+J or Cmd+Shift+J) and see if the file was blocked or failed. Try running the command again.

Frequently Asked Questions

Does this work on any webpage?

Yes, for most standard web pages. However, pages with dynamic content that loads as you scroll (like infinite scroll feeds) may not capture everything – you need to scroll to the bottom first to trigger loading.

Can I capture a scrolling page as a PDF instead of an image?

Yes. Use the print dialog (Ctrl+P or Cmd+P), choose “Save as PDF”, and set the paper size to a custom height (e.g., 10000px) or use the “Full page” option in some Chrome versions. The result is a multi-page PDF that preserves text and links.

Where does the captured image get saved?

By default, it goes to your Downloads folder. You can change the default download location in Chrome settings (Settings > Downloads > Location).

Is there a way to capture only a specific part of the page?

Yes. Right-click the element you want, select “Inspect”, then in the dev tools, right-click the highlighted HTML and choose “Capture node screenshot”. This captures only that element.

Why does my captured image look blurry or low-resolution?

The capture uses your current zoom level and device pixel ratio. For a sharper image, set zoom to 100% and ensure your display scaling is at 100% (or use a high-DPI display). You can also increase the page zoom to 200% before capturing, but that will make the image wider.

Can I use this on mobile Chrome?

No, the developer tools method is only available on desktop Chrome. On mobile, you can use the “Print” option and save as PDF, or use a third-party app.

Related

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →