Full Page Screenshots in Chrome

Saad Shakil - Oct 18 - - Dev Community

How to Take a Full-Page Screenshot in Google Chrome

Capturing a full-page screenshot is a useful feature when you need to capture an entire webpage, including the parts that are off-screen. In Google Chrome, this can be done without the need for any third-party extensions. Chrome’s built-in Developer Tools offer a straightforward way to capture full-page screenshots.

As of 2024, follow these steps to take a full-page screenshot in Google Chrome:

Table of Contents

  1. 1. Open Developer Tools
  2. 2. Capture the Full-Page Screenshot
  3. 3. Locate and Save Your Screenshot
  4. 4. Conclusion
  5. 5. Key Shortcuts Recap

1. Open Developer Tools

  1. Open Google Chrome and navigate to the webpage you want to capture.
  2. Right-click anywhere on the page and select Inspect, or use the keyboard shortcut:
    • Windows/Linux: Ctrl + Shift + I
    • Mac: Cmd + Option + I

This will open the Developer Tools panel.

Back to Top

2. Capture the Full-Page Screenshot

  1. With the Developer Tools panel open, click the three-dot menu (kebab menu) in the top-right corner of the Developer Tools panel.
  2. From the dropdown menu, select Run command or press:
    • Windows/Linux: Ctrl + Shift + P
    • Mac: Cmd + Shift + P
  3. In the command menu that appears, type screenshot to filter the available commands.
  4. Select Capture full size screenshot from the list.

Chrome will now capture a full-page screenshot and save it to your default downloads location.

3. Locate and Save Your Screenshot

Once the screenshot is captured, you can save it as a PNG file.

Back to Top

4. Conclusion

Taking a full-page screenshot in Chrome is straightforward using Developer Tools. This built-in feature allows you to capture everything on a webpage, including off-screen content, without needing any additional extensions or tools.

Next time you need to capture a full webpage for your needs, be it for a report, presentation, or documentation, follow these quick steps to get the job done!

5. Key Shortcuts Recap:

  • Open Developer Tools:
    • Windows/Linux: Ctrl + Shift + I
    • Mac: Cmd + Option + I
  • Run Command:
    • Windows/Linux: Ctrl + Shift + P
    • Mac: Cmd + Shift + P

Back to Top

. . . . .