How to Screenshot on Microsoft Edge

Take screenshot of a webpage with hidden commands in Edge.

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.

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

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 Developer tools are usually for web developers. You can still use these hidden tactics to quickly take clean screenshots instead of using a screen capture utility or Print Screen function. 

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

  1. 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

    Developer tools highlighted in the More menu in Microsoft Edge's main menu.
  2. In the Developer tools panel, select the three-dotted ellipsis icon on the top right to open the Customize and control DevTools

    The Run command under the Open Customize and control DevTools menu in Microsoft Edge.
  3. Select Run command (or press Ctrl + Shift + P) from the vertical menu. 

  4. 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. 

    The screenshot options in the developer tools section of Microsoft Edge.
  5. 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.)

    A highlighted area being captured as a screenshot in Microsoft Edge.
  6. 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.

  7. 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.

    Capture node screenshot menu item highlighted in Microsoft Edge.
  8. 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.


Select Toggle device emulation on the Developer tools toolbar (or press Ctrl + Shift + M).

Was this page helpful?