Initiator and priority information now in HAR imports and exports

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.

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.

Figure 11. The Priority column

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 _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.

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

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.

(Bonus Tip) Run monitorEvents() in the Console to watch an element's events fire

Note: This section covers a lesser-known feature that has been in DevTools for a long time.

Suppose you want to add a red border around a button after focusing it and pressing R, E, D,
but you don't know what events to add listeners to. Use monitorEvents() to log
all of the element's events to the Console.

Get a reference to the node.

Figure 17. Using Store as global variable to get a reference to the node

Pass the node as the first argument to monitorEvents().

Figure 18. Passing the node to monitorEvents()

Interact with the node. DevTools logs all of the node's events to the Console.

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.

Discover other DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.