How to use Chrome 59’s Built-In Full Page Screen Capture Tool

How to use Chrome 59’s Built-In Full Page Screen Capture Tool

Chrome’s screen capture tool is finally here. With the release of Chrome 59, Google’s flagship browser is allowing users to capture full-size screenshots of web pages.

Until this summer, capturing web page screenshots was something that required more than just a browser, at least for Chrome users. Downloading full-page screenshot extensions from the Chrome Web Store was regarded as the ultimate solution for many of us. After all, capturing an entire page with just a few clicks without leaving our browser window wasn’t that bad, was it?

One extension I became particularly familiar with was Open Screenshot, a robust tool that boasts over 4,000 5-star ratings and more than 150,000 users. While it comes with a set of impressive features, it still added to my ever-growing list of extensions, hence contributing (albeit minimally) to the decreasing speed of my browser.

What is Chrome’s full-page screenshot tool?

Chrome’s full-page screen capture tool makes it possible for users to screenshot the entirety of virtually any webpage in both desktop and mobile view. It was introduced via the Chrome 59 release and is currently available via the browser’s Developer Tools (often referred to as DevTools).

An iPad Pro mockup containing a web page screenshot captured in Chrome 59.

In this image, a 1024×1366 screenshot was captured in Chrome and placed accurately in an iPad Pro mockup. See how well it fits?

How to capture a full-size screenshot?

To grab any web page before you in the form of a PNG file, simply follow the steps below:

1. Head over to Developer Tools by clicking on the More icon located in the top right corner of your browser. Then go to More tools > Developer tools. A faster way is to use the shortcut CTRL+SHIFT+I.

2. Toggle DevTools’ Device Mode by clicking on the device icon usually associated with responsive web design. The icon should turn blue once Device Mode is on. Since you are already in DevTools, you may also use the shortcut CTRL+SHIFT+M to activate and deactivate Device Mode.

3. In Device Mode, click on the More options icon located in the top right corner of your screen and select any of the two options presented:

  • Capture screenshot
  • Capture full size screenshot

The first option will capture the screen exactly in the same way it appears on your selected device preview, whereas the second option will capture the entire web page, including everything below the fold. Note that a full-page screenshot can be much heavier in file size than a simple screen capture.

4. Once you have selected one of the options, Chrome will prompt you to save the image in PNG format. Usually, the suggested filename will contain the slug or URL of the page you just screengrabbed as well as the name of the device you were previewing in Device Mode. Save your file, and that’s it.

Many ways to use your screenshots

So, there you have it! Turning your favorite web pages into PNG images is now easier than ever. What makes this feature interesting is that it comes in handy when you need to share a page’s layout in mobile view as part of a Responsive Web Design (RWD) test.

Its usefulness may even extend to designers, specifically when a web page’s responsiveness needs to be showcased as seen with the iPad Pro image above. Simply select any device you need in Device Mode and capture a screenshot to share it with your friends or colleague.

Fortunately, this screen capture functionality is set to be maintained long after Chrome 59. Who knows, it may even make its way outside of DevTools in subsequent Chrome releases.