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 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.
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).
How to Take a Screenshot on Any Device