Google announces updates to Chrome DevTools in Chrome 71

2 min read

The Google Chrome team announced new updates and changes to the Chrome DevTools in Chrome 71, today. The latest update explores features such as hovering over a Live Expression to highlight the DOM node, storing DOM nodes as global variables, Initiator and priority information in HAR imports and exports, and Picture-in-Picture breakpoints among others.

Let’s discuss these features in the latest update to DevTools in Chrome 71.

Hovering over Live Expression to highlight DOM node

Now when an Expression evaluates to a DOM node, hovering over the Live Expression will result in highlighted DOM node in the viewport.

Storing DOM nodes as global variables

You can now store DOM nodes as a global variable. All you need to do is run an expression in the console that evaluates to a node. Then right-click the result and select Store as the global variable. Alternatively, you can also right-click the node in the DOM Tree and then select Store as a global variable.

Initiator and priority information available in HAR imports and exports

DevTools now comprises initiator and priority information in the HAR file on exporting a HAR file. Once done importing the HAR files back into DevTools, the Initiator and Priority columns gets populated.

The _initiator field offers information behind the cause of the requested resource. The _priority field states the priority level that the browser assigned to the resource.

Accessing Command Menu from the Main Menu

Command Menu provides a fast way to access DevTools panels, tabs, and features. Now, you can open the Command Menu directly from the Main Menu. Click the main button on the main menu and select Run command.