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.
_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.
_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.
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 is a new experimental API that enables a page to create a floating video window over the desktop.
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.
Was this page helpful?
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.
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.
Previous release notes
See the devtools-whatsnew tag for links to all previous DevTools release notes.