Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

Google announces updates to Chrome DevTools in Chrome 71

Save for later
  • 2 min read
  • 11 Oct 2018

article-image
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.

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime

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.

“Add to homescreen" now called "Trigger beforeinstallprompt"


There’s an Add to homescreen button on the Manifest tab which is renamed to Trigger beforeinstallprompt as it is more semantically accurate.

For more information, check out the official update notes.

Chrome 69 privacy issues: automatic sign-ins and retained cookies; Chrome 70 to correct these

Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more

Google Chrome’s 10th birthday brings in a new Chrome 69