How to take screenshots of the entire webpage without any extensions?

question chromium devtips
Ram Patra Published on August 27, 2020
Chromium Based Browsers (Chrome, Brave, etc.)

I always used an extension like Awesome Screenshot in Chrome to take screenshots of any website. However, you do not need an extension to capture a screenshot of a webpage.

Simply press Cmd + Option + I (or go to View > Developer > Developer Tools) to open the dev tools. Once opened, press Cmd + Shift + P to open the Command Palette.

Now in the Command Palette, type ‘screenshot’ and click on:

  • Capture full size screenshot to take a screenshot of the entire webpage
  • Capture node screenshot to take a screenshot of a particular element on the webpage (Note: You have to select the element first and then click on this option)
  • Capture screenshot to take a screenshot of the visible portion of the webpage
  • Capture area screenshot to take a screenshot of the selected area

See this video for a live demo:

Ram Patra Published on August 27, 2020