DEV Community

Saad Shakil
Saad Shakil

Posted on

1

Full Page Screenshots in Chrome

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay