What's New In DevTools (Chrome 76)

Hello! Here's what's new in Chrome DevTools in Chrome 76.

Autocomplete with CSS values

When adding style declarations to a DOM node sometimes the declaration value is easier to remember than the declaration name. For example, when making a <p> node bold, the value bold might be easier to remember than the name font-weight. The Style pane's autocomplete UI now supports CSS values. If you remember what keyword value you want, but can't remember the property name, try typing the value and autocomplete should help you find the name you're looking for.

Send feedback on this new feature to Chromium issue #931145.

A new UI for network settings

The Network panel previously had a usability issue where options like the throttling menu were unreachable when the DevTools window was narrow. To fix this issue and de-clutter the Network panel, a few lesser-used options have been moved behind the new Network Settings pane.

The following options have moved to Network Settings: Use Large Request Rows, Group By Frame, Show Overview, Capture Screenshots. Figure 3 maps the old locations to the new ones.

Send feedback on this UI change to Chromium issue #892969.

WebSocket messages in HAR exports

When exporting a HAR file from the Network panel to share network logs with your colleagues, your HAR file now includes WebSocket messages. The _webSocketMessages property begins with an underscore to indicate that it's a custom field.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Send feedback on this new feature to Chromium issue #496006.

HAR import and export buttons

Share network logs with colleagues more easily with the new Export All As HAR With Content buttons. HAR importing and exporting have existed in DevTools for a while. The more discoverable buttons are the new change.

Send feedback on this UI change to Chromium issue #904585.

Real-time total memory usage

The Memory panel now shows total memory usage in real-time.

See also the Performance Monitor for tracking memory usage in real-time.

Send feedback on this new feature to Chromium issue #958177.

Service worker registration port numbers

The Service Workers pane now includes port numbers in its titles to make it easier to keep track of which service worker you're debugging.

Send feedback on this UI change to Chromium issue #601286.

Inspect Background Fetch and Background Sync events

Use the new Background Services section of the Application panel to monitor Background Fetch and Background Sync events.

Send feedback on these new features to Chromium issue #927726.

Puppeteer for Firefox

Puppeteer for Firefox is a new experimental project that enables you to automate Firefox with the Puppeteer API. In other words, you can now automate Firefox and Chromium with the same Node API, as demonstrated in the video below.

After running node example.js, Firefox opens and the text page is inserted into the search box on Puppeteer's documentation site. Then the same task is repeated in Chromium.

Check out the Puppeteer talk by Joel and Andrey from Google I/O 2019 to learn more about Puppeteer and Puppeteer for Firefox. The Firefox announcement happens around 4:05.

Feedback

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

• File definite bug reports and feature requests at Chromium Bugs.
• Discuss possible features, changes, and bugs on the Mailing List.
• Get help on how to use DevTools on Stack Overflow.
• Tweet us at @ChromeDevTools.
• File bugs on this document 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.

<<../../_shared/discover.md>>