Some Cross-Browser DevTools Features You Might Not Know

Developer tools are a daily weapon for front-end developers. This article will share some less-known practical features in cross-browser developer tools to help you debug more efficiently.

For simplicity, "Chromium" will be used in the article to refer to all Chromium-based browsers such as Chrome, Edge, and Opera. Their developer tools are highly consistent in functionality.

DOM tree node search

Facing the nested DOM nodes at layers, finding the target node can be time-consuming and laborious. Use Cmd F (macOS) or Ctrl F (Windows) to quickly search for the DOM tree.

Supports CSS selectors (e.g. <code>.red) and XPath expressions (e.g. <code>//div/h1) searches.

In Chromium browser, searches will automatically jump to the matching node, which can be troublesome when handling long queries or large DOM trees. You can turn off this feature by going to Settings (F1) → Preferences → Global → Enter while searching → Disable

.

After finding the node, right-click on the node and select "Scroll to View" to scroll it to the viewing area.

Accessing node from console

Developer Tools provide multiple ways to access DOM nodes directly from the console:

<code><code>For example, <code> can access the currently selected DOM node. The Chromium browser goes a step further and allows access to nodes in the history selection using <code>,

,

, etc. Right-click on the node and select Copy → <code>document.querySelectorCopy JS path

, and you can copy the node path as a JavaScript expression (

form), which is convenient for access in the console.

Another way is to store the node as a temporary variable. Right-click on the node and select the corresponding option:
Chromium
• : Right-click → "Save as global variable"
Firefox
• : Right-click → “Use in the console”
Safari

: Right-click → “Record Element”

Visualize elements with tags

Developer tools can help visualize elements with specific attributes by displaying tags next to nodes. Tags are clickable, and the types of tags provided by different browsers are also different. In <code>display: gridSafari<code>display: inline-grid, there is a marker button in the Elements Panel toolbar to toggle the visibility of a specific marker. For example, if a node has a

or

CSS declaration applied, a grid mark is displayed next to it. Clicking on the mark will highlight the grid area, track size, line number, etc. on the page.

FirefoxTags currently supported by the developer tool are listed in the Firefox source documentation. For example, a scroll mark indicates a scrollable element. Clicking on a mark highlights the element that causes the overflow and displays the overflow mark next to it.

In the Chromium browser, you can right-click on any node and select "Tag Settings..." to open a container with all available tags. For example, an element with <code>scroll-snap-type will have a scroll snap tag next to it, and clicking on that tag will toggle the scroll snap overlay on that element.

Screenshot

All mainstream browsers now support screenshots from developer tools and provide a new method of full page screenshots.

Right-click on the DOM node you want to capture and select the option to capture the node (different browser tags are different).

Repeat this operation on the html node to take a full page screenshot. It should be noted that Safari retains the transparency of the background color of the element, while Chromium and Firefox capture it as a white background.

You can also take "responsive" screenshots to capture the page with a specific viewport width. The operation methods of different browsers are as follows:

• Chromium: Cmd Shift M (macOS) or Ctrl Shift M (Windows). Or click the Device icon next to the Check icon.
• Firefox: Tools → Browser Tools → “Responsive Design Patterns”
• Safari: Development → “Enter Responsive Design Mode”

Chrome Tips: Check the Top Level

Chrome allows you to visualize and inspect top-level elements such as dialog boxes, alerts, or modal boxes. When an element is added to <code>#top-layer, a top-level mark is displayed next to it. Clicking on the mark will jump to the top-level container that is located after the <code>

The above is the detailed content of Some Cross-Browser DevTools Features You Might Not Know. For more information, please follow other related articles on the PHP Chinese website!