How to take a full page screenshot in Chrome

1. Open the page and wait until it has fully loaded. Scroll to the bottom and back up once so lazy-loaded images appear.
2. Open DevTools. Press F12 or Ctrl+Shift+I on Windows and Linux, Cmd+Option+I on Mac, or right-click and choose Inspect.
3. Open the Command Menu. Press Ctrl+Shift+P on Windows and Linux or Cmd+Shift+P on Mac. Make sure the DevTools window is focused.
4. Type "screenshot". A list of screenshot commands appears.
5. Choose Capture full size screenshot and press Enter.
6. Find the PNG in your Downloads folder. It is named after the site and can be very tall on long pages.

The window width stays the same, so the screenshot shows the page at your current desktop layout. Dock DevTools to the bottom, or undock it into a separate window, if you want the full browser width.

For Capture node screenshot, select the element in the Elements panel first. You can also right-click the element node there and choose the screenshot option from the context menu.

Sometimes you only need one component, such as a pricing table, a modal or a long sidebar, without cropping by hand. Capture node screenshot captures the element at its full size, even when part of it is scrolled out of view.

1. Right-click the element on the page and choose Inspect. DevTools opens with the element highlighted in the Elements panel.
2. If the wrong node is selected, move up or down the tree until the blue page highlight covers exactly the area you want.
3. Press Ctrl+Shift+P (Cmd+Shift+P on Mac), type "node" and choose Capture node screenshot. You can also right-click the node in the Elements panel and pick the screenshot option.
4. Open the PNG from your Downloads folder. It is cropped to the element's box, including any padding but not its margin.

Tip: to get a little breathing room around the element, temporarily add padding to it in the Styles pane before capturing.

1. Open DevTools and click Toggle device toolbar (the phone and tablet icon), or press Ctrl+Shift+M (Cmd+Shift+M on Mac).
2. Choose a device from the Dimensions dropdown, or select Responsive and type a width and height.
3. Click the More options menu (three dots) at the right of the device toolbar.
4. Choose Capture full size screenshot. Select Show device frame first if you want the phone frame in the image (frames are available for some devices only).

To show one layout at several breakpoints, repeat the capture for each size and place the images side by side.

DevTools is the most accurate built-in option, but it is not the only one. Here is how the alternatives compare for capturing an entire web page:

If the screenshot is going into a bug report, a full page image alone is rarely enough. Circle the problem area, add the page URL and your window size, and include console errors when something is broken rather than just misaligned. Our guide on how to write a bug report lists what else developers need.

For design reviews, capture the same page at consistent widths every time, for example 390px, 768px and 1440px, so reviewers can compare versions and spot regressions between releases. Collecting client feedback on a whole site? See our website feedback tool page.

• Blank or gray sections: images were lazy-loaded. Scroll through the whole page before capturing.
• Only part of the page is captured: the site scrolls inside a container (common in dashboards and single-page apps), not the page itself. DevTools captures the document height, so use Capture node screenshot on the scrolling container, or temporarily remove its height limit in the Styles pane.
• Sticky headers or cookie banners in odd places: fixed elements are drawn once at their position. Dismiss banners first, or hide the element in the Elements panel (select it and press H).
• Animations or carousels mid-transition: wait for them to settle, or pause animations in the Animations drawer.
• Huge or failed files: very long pages can exceed image size limits. Capture sections with Capture area screenshot instead.
• Sensitive data visible: blur or crop names, emails and account numbers before sharing, especially in bug reports sent outside your team.

DevTools is great for a one-off image, but it cannot annotate, redact, or handle pages that scroll inside panels. Bugmark is a free Chrome extension that captures and marks up screenshots in one step.

• Full page capture with scroll-and-stitch, including inner scrolling panels and SPA containers.
• Other modes: visible area, a single element, and a 3-second delayed capture for hover states, menus and tooltips.
• Mobile, tablet and desktop in one image: renders the page at 390x844, 768x1024 and 1440x900 side by side.
• Annotate with arrows, boxes, text, numbered pins and a redact tool that pixelates sensitive details.
• Start with Alt+Shift+S and every capture also carries console errors, network requests and steps to reproduce.

Captures are stored locally in your browser. Add Bugmark to Chrome — free