This article explains how to take screenshots on Microsoft Edge using a hidden utility tucked inside the developer tools.

What to Know

  • Select the three-dot More menu > More tools > Developer tools. Click the ellipsis icon > Run command > type “screenshot.” Choose a type: Area screenshot, Full size screenshot, node screenshot, or screenshot.

How to Take a Screenshot of a Webpage on Edge

The ability to take full-page screenshots of webpages from the browser itself is invaluable as not all screen capture software does a clean job with scrollable content. You can use the Developer tools in Edge to do full-page screen captures and three other types of screenshots.

The browser saves the image files in the default download folder on your computer or will prompt you for a specific location. 

  • Press the F12 key or Ctrl + Shift + I on your keyboard on Windows to open Developer tools in Microsoft Edge. macOS users should use the Command + Option + I keyboard shortcut. You can also access the Developer tools from the Edge toolbar. Select the three-dot More > More tools > Developer tools.
  • In the Developer tools panel, select the three-dotted ellipsis icon on the top right to open the Customize and control DevTools.
  • Select Run command (or press Ctrl + Shift + P) from the vertical menu.
  • Type “screenshot” in the Run command panel to display the four possible commands. These four commands help you select the part of the webpage you want to capture.
  • Select Capture area screenshot from the list of commands to take a screenshot of a specific area. Use the cross-hair to left-click and draw the outline for the screenshot. (We highlighted a section to show you it turns dark gray, but obviously, you’ll highlight the part you want.)
  • Select Capture full size screenshot from the list of commands to take a full-size screenshot. This captures the entire webpage, including scrollable content that’s not on the screen.
  • Select Capture node screenshot from the list of commands to capture a selected HTML Node in Dev Tools from the Elements tab. You can also right-click on the selected node and select Capture node screenshot. For instance, select the “header class” and capture the header of the webpage.
  • Select Capture screenshot from the list of commands to take a screenshot of the active view. This is the area that is visible inside the browser and does not include the scrollable but invisible area.

Press the F12 key or Ctrl + Shift + I on your keyboard on Windows to open Developer tools in Microsoft Edge. macOS users should use the Command + Option + I keyboard shortcut. You can also access the Developer tools from the Edge toolbar. Select the three-dot More > More tools > Developer tools. 

In the Developer tools panel, select the three-dotted ellipsis icon on the top right to open the Customize and control DevTools. 

Select Run command (or press Ctrl + Shift + P) from the vertical menu. 

Type “screenshot” in the Run command panel to display the four possible commands. These four commands help you select the part of the webpage you want to capture. 

Select Capture area screenshot from the list of commands to take a screenshot of a specific area. Use the cross-hair to left-click and draw the outline for the screenshot. (We highlighted a section to show you it turns dark gray, but obviously, you’ll highlight the part you want.)

Select Capture full size screenshot from the list of commands to take a full-size screenshot. This captures the entire webpage, including scrollable content that’s not on the screen.

Select Capture node screenshot from the list of commands to capture a selected HTML Node in Dev Tools from the Elements tab. You can also right-click on the selected node and select Capture node screenshot. For instance, select the “header class” and capture the header of the webpage.

Select Capture screenshot from the list of commands to take a screenshot of the active view. This is the area that is visible inside the browser and does not include the scrollable but invisible area.

Tip:

Chromium browsers like Chrome and Edge also allow you to emulate other devices and their screen resolutions. You can also use this property and the screenshot commands and capture what a webpage would look like on a particular device.

Get the Latest Tech News Delivered Every Day