Thursday, 11 October, 2018 UTC
Summary
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
- "Add to homescreen" now referred to as "Trigger beforeinstallprompt"
- Picture-in-Picture breakpoints
When a Live Expression evaluates to a DOM node, hover over the Live Expression result to
highlight that node in the viewport.
Figure 1. Hovering over a Live Expression result to highlight the 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.
Figure 2. Store as global variable in the Console
Or, right-click the node in the DOM Tree and select Store as global variable.
Figure 3. Store as global variable in the DOM Tree
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.
Figure 8. Exporting 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
Figure 9. The initiator column
_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.
Figure 10. Viewing initiators and dependencies
The
Figure 11. The Priority column
_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.
Figure 12. How to show the Priority column
Note: The
Access the Command Menu from the Main Menu
_initiator and _priority fields begin with underscores because the HAR spec
states that custom fields must begin with underscores.Use the Command Menu for a fast way to access DevTools panels,
tabs, and features.
Figure 13. The Command Menu
You can now open the Command Menu from the Main Menu. Click the Main Menu
button and select Run command.
Figure 14. Opening the Command Menu from the Main Menu
"Add to homescreen" now referred to as "Trigger beforeinstallprompt"
The Add to homescreen button on the Manifest tab has been renamed to Trigger beforeinstallprompt to
be more semantically accurate. There is no concept of homescreens on desktop platforms. Also, this name
is more behaviorally accurate because add to homescreen behavior has changed from always triggering an app banner
to requiring a user gesture on a JavaScript API call on the
Figure 15. Trigger beforeinstallprompt
Picture-in-Picture breakpoints
beforeinstallprompt event to trigger.Picture-in-Picture is a new experimental API that enables a page to create
a floating video window over the desktop.
Enable the
Figure 16. Picture-in-Picture events in the Event Listener Breakpoints pane
Feedback
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.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.
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.