

To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. The result of the Capture node screenshot command DevTools downloads a screenshot of the selected node.įigure 4. Start typing node and select Capture node screenshot.

Note that this node is already selected in the DOM Tree of the Elements panel In this example, the goal is to take a screenshot of the blue header that contains the text Tools. To take a screenshot of a specific HTML node:įigure 3. Taking a screenshot of a portion of the viewport # Screenshots of specific HTML nodes DevTools downloads a screenshot of the portion that you selected.įigure 2. Hold Command (Mac) or Control (Windows, Linux) and select the portion of the viewport that you want to take a screenshot of.

Click Inspect or press Command+ Shift+ C (Mac) or Control+ Shift+ C (Windows, Linux) to enter Inspect Element Mode.To take a screenshot of a portion of your viewport: # Screenshots of a portion of the viewport You can now take a screenshot of a portion of the viewport, or of a specific HTML node. Using top-level await operators in the Console # New screenshot workflows The Console now supports top-level await operators.įigure 1. # Top-level await operators in the Console
