Taking a precise screenshot of an HTML element in your browser’s Developer Tools can be incredibly useful for web development and design. Follow these steps to capture a node screenshot with a custom Device Pixel Ratio (DPR) and resolution.
Overview
- Press
Ctrl + Shift + IorF12to open the browser developer tools. - Press
Ctrl + Shift + Mto toggle the device toolbar. - Click the dots on top right and select “Add device pixel ratio” or DPR.
- Set DPR to
2.0if not done yet. - Set resolution (e.g. 512x512).
- Select the HTML element you’d like to capture within the “elements panel”.
- Press
Ctrl + Shift + Pto open the run command interface. - Type “node” to show the “Capture node screenshot” and press
Enter. - Enjoy your screenshot.
Step-by-Step Tutorial
1. Open Developer Tools
Press Ctrl + Shift + I or F12 to open the browser developer tools. This can look different depending on what browser you use.
Here’s what it looks like in Microsoft Edge:
2. Toggle Device Toolbar
Press Ctrl + Shift + M to toggle the Device Toolbar, allowing you to simulate different devices.
3. Add Device Pixel Ratio (DPR)
Click the three vertical dots in the top right corner of the Developer Tools pane. From the dropdown menu, select “Add device pixel ratio” (or DPR).
4. Set Device Pixel Ratio (DPR)
In the Device Toolbar, set the DPR to 2.0 if it is not already set. This ensures the screenshot captures with the desired pixel density.
5. Set Resolution
In the Device Toolbar, set the desired resolution. This configures the viewport size for your screenshot.
6. Select HTML Element
In the Elements panel, navigate to and select the HTML element you want to capture. This highlights the specific node for the screenshot. Usually the <body> element will work, but it depends on the site you are screenshotting.
7. Open Command Menu
Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac) to open the Command Menu in Developer Tools.
8. Capture Node Screenshot
In the Command Menu, type “node” to filter commands and select “Capture node screenshot” from the list. Press Enter.
9. Enjoy Your Screenshot
The screenshot of the selected HTML element with the specified DPR and resolution is now saved. You can find it in your default download location.