How to Capture Screenshots with a Custom User Agent

A custom user agent screenshot is useful when a site serves different HTML, redirects, banners, or layout rules based on the browser identity in the request. The User-Agent header lets servers identify the application, operating system, vendor, and version. MDN also notes the privacy risk: user agent strings can be used for fingerprinting, which is why modern Chrome reduces some details and encourages client hints for richer detection.

1. Decide what you are actually testing

Before changing a user agent, write down the claim you need the screenshot to prove. Common examples include a mobile landing page, a crawler-rendered marketing page, a browser-specific warning, a legacy redirect, an in-app browser flow, or a bot-blocking interstitial. A user agent override is not a magic browser swap. Chrome DevTools is explicit about this: overriding the user agent changes how the browser identifies itself to web servers, but it does not change how Chrome functions internally.

2. Choose a realistic user agent string

Use a complete, current string from the browser or device class you want to emulate. Avoid joke strings unless you are testing how your own server handles unusual clients. For mobile screenshots, pair the user agent with matching viewport dimensions and scale. A mobile Safari string with a 1440 pixel desktop viewport often produces misleading results because the server and CSS receive mixed signals.

3. Capture with browser automation

In Chrome DevTools, open Network conditions, clear "Use browser default," enter the custom string, then refresh before capturing. In Playwright, set userAgent in the test or browser context, then set viewport size and call page.screenshot(). In Puppeteer or the Chrome DevTools Protocol, set the user agent before navigation so the first request, redirects, scripts, and server-side rendering all see the intended identity.

4. Make screenshots repeatable

The hard part is not taking one screenshot. It is taking the same screenshot every time. Keep the target URL, user agent, viewport, full-page setting, delay, locale, color scheme, and logged-in state together as one capture recipe. Add a short delay when the site uses client-side rendering, geolocation prompts, cookie banners, or lazy-loaded content. If the page changes by user agent, test both the default and custom string so you can spot accidental differences.

5. Use FrameSnap for the production capture path

FrameSnap is built for repeatable website screenshot workflows, not one-off manual captures. Use the free screenshot tool to validate the URL and framing, then create an API key for monitoring, QA, reports, or content pipelines. FrameSnap gives you practical controls such as width, height, full_page, format, delay, dark_mode, scale, block_ads, response_type, and callback_url. User-agent-sensitive pages usually need more than one knob adjusted to get a trustworthy image.

6. Verify the result

After capture, compare the screenshot with server logs or a request inspector. Confirm that the first navigation used the intended user agent, not just later asset requests. Check for mismatches such as desktop navigation on a mobile width, missing client hints, or a cookie banner that appears only for the custom identity. A good custom user agent screenshot is boring: same recipe, same target, same visual result.

FAQ

What is a custom user agent screenshot?

It is a screenshot captured after the browser sends a specific User-Agent header, so the target site can serve the version it would normally send to that browser, device class, crawler, or app.

Does changing the user agent make Chrome behave like another browser?

No. Chrome DevTools notes that a user agent override changes how the browser identifies itself to servers, but it does not change Chrome internals. Pair it with viewport, device scale, and feature testing.

When should I use a custom user agent for screenshots?

Use one when a page intentionally varies markup, redirects, banners, or layout by browser, crawler, mobile device, or in-app browser. Do not use it as a shortcut for complete cross-browser testing.

Can FrameSnap help with user agent based screenshot workflows?

FrameSnap is useful for repeatable screenshot runs because you can control viewport size, full page capture, delay, format, dark mode, scale, ad blocking, JSON responses, and callbacks from an API workflow.