📸 How to take screenshots with Chrome's Developer Toolbar (Run Command)

Posted by

  


A step-by-step guide to using the hidden screenshot feature in Chrome DevTools, accessible from the Command Menu (Run command).

🔗 Do you like Techelopment? Take a look at the site for all the details!

1. Open Developer Tools

To open Chrome DevTools, use one of these shortcuts:

  • Windows/Linux: F12 or Ctrl + Shift + I
  • macOS: ⌘ + ⌥ + I
  • Or right-click the page → Inspect

2. Open the Command Menu "Run command"

With DevTools open, open the Command Menu:

  • Windows/Linux: Ctrl + Shift + P
  • macOS: ⌘ + Shift + P
  • or click on the menu  at the top right and click on "Run command"

A search bar appears at the top: it is the command "palette". DevTools.


3. Finding commands for screenshots

In the Command Menu, type screenshot. You will see these main options:

  • Capture full size screenshot
  • Capture screenshot
  • Capture node screenshot
  • Capture area screenshot

4. Run the command

  1. Use the ↑/↓ arrows or your mouse to highlight the desired command.
  2. Press Enter to run it.
  3. Chrome will capture the screenshot and save it to your downloads folder.

5. Practical tips

  • Use node screenshot for specific UI components.
  • full size is great for mockups and testing of long layouts.
  • With area screenshot you can quickly "crop" without external editors.
You can also take a screenshot of an HTML node from the "Elements" section by right-clicking the node you want and choosing "Capture node screenshot" from the context menu:


Quick FAQ

Do I need an extension? No, everything is already built in.

Where are the files saved? In the Downloads folder set in Chrome.


Troubleshooting

  • Blank screenshots with canvas/video: Chrome sometimes doesn't render dynamic content. Use the operating system's capture tools.
  • Out-of-viewport elements not visible: Make sure you're using a full-size screenshot.
  • File too large large: Resize it with an image editor.
  • Shortcuts don't work: Check for conflicts with other app shortcuts or browser extensions.
Note: Sites with DRM (streaming video) may block screenshots.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
/>telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment