How to screenshot a website at phone, tablet and desktop widthsChrome DevTools vs. Responsively App vs. Polypane vs. Page Scanner

To see how a page looks on a phone, a tablet and a desktop, you lay it out at each of those widths and capture each one. Chrome does this with no install: DevTools' device toolbar sets the width and its menu captures the full page, one width at a time. If you check layouts every day, a responsive browser such as Responsively App or Polypane shows every width at once and mirrors your scrolling and clicks across them. If what you need is the phone layout as a file to send or keep, Page Scanner lays the page out at a phone's width and cuts its PDF into phone-sized pages, one width a scan.

Four tools at a glance

✓ yes, ✗ no. An empty cell is one the product's own pages do not answer.

Chrome DevTools: the device toolbar

Chrome's own documentation lays out the steps, and they need nothing installed:

1. Open DevTools and click Toggle device toolbar, or press Cmd+Shift+M on a Mac and Ctrl+Shift+M on Windows and Linux.
2. Pick a width. Responsive mode takes any width and height you type or drag, and the presets are Mobile S (320 px), Mobile M (375), Mobile L (425), Tablet (768), Laptop (1024), Laptop L (1440) and 4K (2560). There is also a list of real devices.
3. Open More options and choose Capture a full size screenshot, which in Chrome's words captures "the whole page including the content that isn't visible in the viewport".
4. Change the width and do it again.

Two things it does that are easy to miss. Show media queries in the same menu draws the page's breakpoints as bars above the viewport, blue for max-width and orange for min-width, so you can see where to set the width. And a device's type decides what the page is told: the Mobile type fires touch events rather than clicks, and a device can carry its own user agent string, so a page that sniffs for phones gets one.

Chrome is candid about the limits. It calls device mode "a first-order approximation" and says that "you don't actually run your code on a mobile device". You also get one width per screenshot and one image per width; lining them up is your job. The full-page case on its own is covered in How to take a full-page screenshot in Chrome.

Verdict: free and already installed; the right tool for one width, or a quick check of two.

Responsively App

Responsively describes itself as "a modified web browser that helps in responsive web development". You load a page once and it shows "all devices at once, side-by-side", and "any click, scroll or navigation that you perform in one device will be replicated to all devices in real-time". It ships with more than 30 device profiles, lets you add your own, and saves device combinations for switching between them. One inspector covers every device, and it reloads as you edit.

For capture, its site says "take full page screenshots of all devices at once", and the repository describes "one-click screenshots on all your devices". It is free and open source under AGPL-3.0, for macOS, Windows and Linux.

What it costs: it is a separate app, so the page you check is loaded there rather than in the browser you use every day.

Verdict: the best free way to build a responsive layout while watching every width react.

Polypane

Polypane is "the browser for web developers who care", built on Chromium. It reads your CSS: it "automatically detects width-based CSS media query breakpoints defined in your CSS" and opens a pane for each, smallest first. By default the panes sync "navigation, scroll, hover, click, keypress, input, change", so filling in a form in one pane fills it in all of them.

Its screenshots are the most complete of the four. In one pane you can take the viewport, the full page or a single element. Across panes, right-clicking the camera button offers every pane's viewport or every pane's full page, each saved as its own file, and an overview screenshot puts all panes in one image with their names and dimensions. Screenshots open in an editor with annotation, redaction and cropping, and save as "PNG (default), JPEG or PDF". Device presets carry "the appropriate user agent", touch emulation is a pane setting, and accessibility checks such as contrast are built in.

What it costs: it is paid. A 14-day free trial needs no credit card; after that there are Individual and Business plans, monthly or yearly, and Enterprise on request.

Verdict: the most capable responsive workspace here, if you do this work every day and it is worth a subscription.

Page Scanner

Page Scanner is a Chrome extension that captures a whole page and extracts it as a PDF or an image. The popup has one choice before the scan, Page width, and one of its options is Narrowed to a phone:

1. Open the page and click the Page Scanner icon, or press Alt+Shift+P.
2. Set Page width to Narrowed to a phone.
3. Press Scan this page.

The page is laid out 390 CSS px wide and captured, and the editor opens on it. A page that cannot get that narrow is captured at the width it insists on, and the editor says so. From there it is an ordinary capture: crop, mark up, blur or redact, and export. In the PDF's page layout, Phone screen pages cuts it into pages of 390 × 844 px, a phone's screen, with no margin, so the file reads on a phone a screen at a time, and its text stays text you can select and search.

The same popup setting has two widths meant for paper: Narrowed to A4 lays the page out at 698 px and Narrowed to US Letter at 720 px, so the PDF prints at 100 % instead of being scaled down (why that matters). All three are available from the command line too:

npx @page-scanner/cli scan --url https://example.com --page-width phone --page-size phone --out ./phone.pdf

What it costs. It is one width a scan: a tablet or a desktop layout is a second scan with the window set to that width, and a third file, with nothing lining them up for you. The phone width is the viewport's, so media queries respond, but a page that decides its layout from the user agent or from touch support does not: it is a desktop browser at a phone's width, not a phone. There is no live view and nothing mirrored; it is a capture, not a browser. It needs Chrome's debugger for the scan, so Chrome's debugging bar shows while it runs, and with DevTools already open on the tab there is no fallback: the scan says it failed. The captures and files stay on your computer; the extension sends anonymous counts of which features are used, which the settings can turn off.

Verdict: the one to use when the result is the phone layout as a document: a PDF paged like a phone's screen, text still text, to attach to a review or keep as a record.

Which should you use?

Use Chrome DevTools if you need one or two widths now and do not want to install anything.

Use Responsively App if you are building a responsive layout and want every width to react to your scrolling and clicks, for free.

Use Polypane if responsive and accessibility checks are daily work, you want panes from your own breakpoints with the right user agents, and a subscription is fine.

Use Page Scanner if you want the page's phone layout as a file, a PDF with selectable text paged like a phone's screen or one image, in the Chrome you already use.

Frequently asked questions

Is a narrow window the same as a phone? No, and none of these tools says it is. A narrow viewport triggers the page's media queries. DevTools and Polypane can also send a mobile user agent and touch events. None of them runs on a phone's hardware, which Chrome points out about its own device mode.

Can I choose the width in Page Scanner? The phone width is 390 px. For any other width, set the window to that width and scan with The window, as it is.

Does the PDF keep the text? Yes. Each width is captured as a vector page, so its text can be selected and searched, on phone-screen pages or on paper.

Where this comes from

• Chrome for Developers: Simulate mobile devices with device mode, Emulate mobile viewports and Keyboard shortcuts.
• Responsively App: the home page and the repository.
• Polypane: the home page, pricing, Making screenshots, Synced interactions, Breakpoints and Emulation.
• Page Scanner: Page width, Page layout and the scan command.