Halloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan NowHalloween DealsAmazon USOctober picks are moving - compare before checkoutAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk5 min

How to Capture a List of URLs as PNG Screenshots with Chrome DevTools Protocol

A practical guide to capturing one PNG per URL with CDP, including navigation handling, readiness checks, capture options, and troubleshooting.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use Chrome DevTools Protocol (CDP) to navigate a Chrome page to each URL, wait for the page to reach the state you want, call Page.captureScreenshot with PNG format, then base64-decode the response and save it as a .png file. Repeat the sequence for every URL and record failures per URL so you can retry them independently.

What the workflow does

CDP provides browser-level commands for navigation and screenshots. A basic list capture follows this loop:

As an Amazon Associate I earn from qualifying purchases.

  1. Connect to a Chrome or Chromium page target.
  2. Enable the Page domain.
  3. Navigate to the next URL with Page.navigate.
  4. Wait for navigation and any application-specific visual readiness condition.
  5. Call Page.captureScreenshot using format: "png".
  6. Decode the response’s base64 data and write its bytes to a PNG file.
  7. Save success or failure details alongside the URL, then continue to the next URL.

The protocol methods operate on a page at a time; iterating a URL list and naming files are responsibilities of your script. See the Chrome DevTools Protocol Page domain reference for method parameters and response fields.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Choose direct CDP or a higher-level library

Use direct CDP when you need explicit access to protocol methods and options. Use Puppeteer when your team already uses its browser automation API and prefers its page navigation and screenshot-file workflow. Puppeteer’s documentation shows page navigation and screenshot capture, and its API supports multiple page instances in a browser: screenshot guide and browser pages API.

This guide uses direct CDP for the capture sequence. The protocol reference documents captureBeyondViewport as experimental; verify support in the Chrome version you actually run before relying on it.

Capture a URL list with CDP

Prepare Chrome and a CDP session

Start or connect to Chrome/Chromium, then attach a DevTools Protocol session to the page target you intend to control. The exact connection setup depends on how you launch Chrome and what CDP client your application uses. Once connected, enable the Page domain before issuing navigation and screenshot commands.

Rank #2
Free Fling File Transfer Software for Windows [PC Download]
  • Intuitive interface of a conventional FTP client
  • Easy and Reliable FTP Site Maintenance.
  • FTP Automation and Synchronization

Navigate and wait for the right state

Call Page.navigate with the URL. Its result includes a frame identifier; loaderId can be absent for same-document navigation, and an unsuccessful navigation can include errorText. Check the result rather than assuming that the command succeeded.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Do not treat one generic navigation event as proof that every page is visually complete. A site may load or render data after navigation. Wait for the condition that matters to your capture—for example, a known selector appearing—using your CDP client’s event and runtime facilities. There is no single page-ready condition prescribed for every application.

Capture PNG bytes and save per-URL results

Invoke Page.captureScreenshot with format: "png". PNG is the documented default, but setting it explicitly makes the intended output clear. The response’s data field is a base64-encoded image; decode it before writing the file in binary mode. Keep the source URL, output path, capture response, and navigation or filesystem error together so one failure does not erase the status of other URLs.

Choose what part of the page to capture

  • Viewport: captures the visible browser content. Set the viewport deliberately before capture so results are comparable.
  • Clip region: use the protocol’s clip option when you need a specific rectangular region rather than the full visible content.
  • Beyond the viewport: the protocol has a captureBeyondViewport option, documented as experimental. Check compatibility with the protocol version shipped by your Chrome build.

These options do not guarantee that content outside the viewport has loaded, nor do they make an application finish rendering. Select the capture area and readiness rule for the pages you are processing.

Reliability, performance, and cost considerations

  • Isolate outcomes: handle each URL separately. A navigation failure, screenshot error, or file-write error should be recorded against that URL while the rest of the list continues.
  • Use meaningful filenames: derive safe filenames from a stable index or identifier, not raw URL text, which can contain characters unsuitable for file paths.
  • Set a project-specific timeout: the protocol documentation does not establish one universal timeout. Choose one based on your pages and record timeout failures for retry.
  • Control session state: CDP captures the rendered state available in the attached browser. It does not configure a logged-in session for you or guarantee that application data is present.
  • Test concurrency carefully: the documentation cited here does not establish a universal concurrency limit or performance figure. If you parallelize, use separate page targets as appropriate and validate output and browser stability with your workload.
  • Budget browser resources: each capture uses a running browser and page. Avoid assuming that increasing parallel pages will improve throughput; measure against your own target sites and environment.

Troubleshooting

Symptom Likely cause What to do
Navigation result contains errorText The browser could not complete the requested navigation. Record the error with the URL, check that the URL is reachable from the browser environment, and retry only that item if appropriate.
No loaderId in the navigation result The URL change may be a same-document navigation. Do not treat a missing loader identifier alone as failure. Continue waiting for the relevant page state or application condition.
Screenshot is blank or incomplete The page may not have rendered its dynamic content by capture time. Wait for a selector or other application-specific readiness condition, then capture again.
PNG file is corrupt or unreadable The base64 response may have been written as text instead of decoded bytes. Decode the response’s data field and write the resulting bytes in binary mode.
Capture option is rejected or has no effect The option may not be supported by the Chrome protocol version in use; experimental options can vary. Check the protocol reference and the version shipped with your target Chrome, and fall back to a supported viewport or clip capture.
Some URLs are missing from output An exception may have stopped the whole loop, or a filename may have been invalid. Wrap navigation, capture, decode, and file writing with per-URL error handling; use safe, unique output names and retain a result record for every input.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

ScreenshotNeo can return a screenshot from one GET request. Its API can produce PNG, JPEG, WebP, or PDF output; see the API documentation for request options.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

To save a PNG, specify the PNG output option supported by the API; the example above follows the documented standard request form and saves its returned image to a file. ScreenshotNeo removes cookie/consent banners, newsletter popups, and chat widgets before capture, with each cleanup step configurable. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Its MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots.

Sign up free for ScreenshotNeo.

Frequently Asked Questions

Does CDP save a screenshot directly to a file?

No. The screenshot method returns base64 image data; your application decodes it and writes the PNG bytes to a file.

Does a successful navigation mean the page is ready for a screenshot?

Not necessarily. Wait for the visual or application-specific condition your capture requires, especially on pages that render content dynamically.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.