Google Chrome's Developer Tools has a convenient feature that allows you to capture screenshots of entire web pages. However, depending on your settings, this feature may not work properly. This article explains the causes and solutions for this issue.

How to Use the Screenshot Feature

Here are the steps to capture an entire page using Chrome's Developer Tools.

  1. Open Developer Tools
    For Windows: [ Ctrl ] + [ Shift ] + [ i ]
    For macOS: [ Command ⌘ ] + [ Option ⌥ ] + [ i ]
    Or, select "More tools" → "Developer tools" from the menu.
  2. Open the Command Palette
    For Windows: [ Ctrl ] + [ Shift ] + [ p ]
    For macOS: [ Command ⌘ ] + [ Shift ] + [ p ]
    Or, click the "..." menu in the upper right and select "Run command".
  3. Take a Screenshot
    When "Run>" appears, type "full" and press [ Enter ] to download the captured image.

If You Can't Capture Screenshots

When Developer Tools Language is Set to Japanese

If your Developer Tools is set to Japanese, the commands will also be in Japanese due to Chrome's specifications. (Author: Why though?) Therefore, instead of typing "full", you need to type "フル" (the Japanese equivalent) to capture screenshots.

However, since this is more cumbersome than using English, you might want to change the Developer Tools language back to English.
In that case, you can change the language from the settings . You'll need to restart Developer Tools for the changes to take effect.

Try Updating to the Latest Version

If the issue persists, please update Chrome to the latest version. If you see "Update" displayed in the upper right corner, close all open pages and reopen them to apply the update. Then, try the screenshot procedure again.

Disable Chrome Cache and Extensions

  1. Try in Incognito Mode
    Incognito mode is less affected by cache and extensions, so try opening Developer Tools in incognito mode and attempting the screenshot again.