Browser DevTools
What browser DevTools are, how to use them for screenshots and responsive testing, and common features.
Browser DevTools are the developer tools built into web browsers: Chrome DevTools, Firefox Developer Tools and Safari Web Inspector. They show the page structure and styles, log JavaScript output, record network requests and profile performance.
Most DevTools include device emulation. It sets the viewport width and height, the device pixel ratio and the user agent string, so a desktop browser renders a page as a phone would. Emulation does not reproduce a real device's browser engine, fonts or touch behavior.
In Chrome on a Mac, Option+Command+I opens DevTools. In Safari, the Develop menu must be turned on in Settings before Web Inspector is available.
What DevTools can do for screenshots
- Capture the visible viewport, the full scrollable page, a selected area or a single element.
- Set an exact viewport size and device pixel ratio before capture.
- Hide or edit elements, such as a cookie banner or a chat widget, before capture.
- Throttle the network to check what a page looks like while it loads.
Responsive mode and device emulation
Responsive mode, called the device toolbar in Chrome, resizes the page area to a chosen width and height. Presets cover common phones and tablets, and custom sizes are allowed. The device pixel ratio setting controls how many image pixels each CSS pixel produces, so a 390 pixel wide viewport at ratio 3 yields a 1170 pixel wide screenshot.
How to capture screenshots with DevTools
- Open DevTools and turn on the device toolbar if you need a specific size.
- Open the Command Menu with Shift+Command+P.
- Type "screenshot" and choose the viewport, full size, area or node command.
- The browser downloads a PNG.
Common mistakes
- Leaving DevTools docked inside the window, which shrinks the viewport in a normal capture.
- Forgetting to reset emulation, so later captures use a phone size.
- Capturing before lazy-loaded images appear.
- Treating emulation as proof that a page works on a real device.
Taking the same screenshots again and again?
Temposhot Website Capture repeats the same capture for a list of URLs at Desktop 1920×1080, Tablet 768×1024 or Mobile 390×844. See website screenshot automation.
Common questions
Can DevTools capture a full page in one image?
Chrome's "Capture full size screenshot" command renders the full page height. Very long or lazy-loading pages can still come out incomplete.
Is there a simpler option for one page?
The Temposhot Full Page Screenshot extension for Chrome 116+ scrolls the active page and downloads one PNG.
Sources
Related resources
- Website Capture options: device, area and wait settings.
- Automate website screenshots without code: a walkthrough.
- Screenshot Resolution Checker: confirm the pixel size of a capture.
Taking the same screenshots again and again?
Temposhot captures a screen, window or area on a timer and exports the set as a PDF, images, ZIP or MP4. The free browser tools fix single images.
Related resources
Related terms
- Headless BrowserWhat a headless browser is, how it's used for automated screenshots, and common pitfalls.
- Full-Page ScreenshotWhat a full-page screenshot is, how it differs from viewport and scrolling captures, and when to use one.
- Viewport ScreenshotWhat a viewport screenshot is, how it differs from full-page capture, and when it's the right choice.
- Responsive ScreenshotWhat responsive screenshots are, the common viewport sizes used, and mistakes to avoid when capturing across devices.