What's New In DevTools (Chrome 71)

New features and major changes coming to Chrome DevTools in Chrome 71 include:

• Hover over a Live Expression to highlight a DOM node
• Store DOM nodes as global variables
• Initiator and priority information now in HAR imports and exports
• Access the Command Menu from the Main Menu
• Picture-in-Picture breakpoints

Hover over a Live Expression to highlight a DOM node

When a Live Expression evaluates to a DOM node, hover over the Live Expression result to highlight that node in the viewport.

Store DOM nodes as global variables

To store a DOM node as a global variable, run an expression in the Console that evaluates to a node, right-click the result, and then select Store as global variable.

Or, right-click the node in the DOM Tree and select Store as global variable.

Initiator and priority information now in HAR imports and exports

If you'd like to diagnose network logs with colleagues, you can export the network requests to a HAR file.

To import the file back into the Network panel, just drag and drop it.

When you export a HAR file, DevTools now includes initiator and priority information in the HAR file. When you import HAR files back into DevTools, the Initiator and Priority columns are now populated.

The _initiator field provides more context around what caused the resource to be requested. This maps to the Initiator column in the Requests table.

You can also hold Shift and hover over a request to view its initiator and dependencies.

The _priority field states what priority level the browser assigned to the resource. This maps to the Priority column in the Requests table, which is hidden by default.

Right-click the header of the Requests table and select Priority to show the Priority column.

Note: The _initiator and _priority fields begin with underscores because the HAR spec states that custom fields must begin with underscores.

Access the Command Menu from the Main Menu

Use the Command Menu for a fast way to access DevTools panels, tabs, and features.

You can now open the Command Menu from the Main Menu. Click the Main Menu button and select Run command.

Picture-in-Picture breakpoints

Picture-in-Picture is a new experimental API that enables a page to create a floating video window over the desktop.

Enable the enterpictureinpicture, leavepictureinpicture, and resize checkboxes in the Event Listener Breakpoints pane to pause whenever one of these picture-in-picture events fires. DevTools pauses on the first line of the handler.

Feedback

To discuss the new features and changes in this post, or anything else related to DevTools:

• File bug reports at Chromium Bugs.
• Discuss features and changes on the Mailing List. Please don't use the mailing list for support questions. Use Stack Overflow, instead.
• Get help on how to use DevTools on Stack Overflow. Please don't file bugs on Stack Overflow. Use Chromium Bugs, instead.
• Tweet us at @ChromeDevTools.
• File bugs on this doc in the Web Fundamentals repository.

Consider Canary

If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.

Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.

Previous release notes

See the devtools-whatsnew tag for links to all previous DevTools release notes.