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.

Figure 1. After typing bold the Styles pane autocompletes to font-weight: bold.

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.

Figure 2. Network Settings.

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.

Figure 3. Mapping the old locations to the new.

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 and Import HAR File buttons. HAR importing and exporting have existed in DevTools for a while. The more discoverable buttons are the new change.

Figure 4. The new HAR buttons.

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.

Figure 5. The bottom of the Memory panel shows that the page is using 43.4 MB of memory in total. 209 KB/s indicates that total memory usage is increasing 209 KB per second.

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.

Figure 6. Service worker ports.

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. Given that Background Fetch and Background Sync events occur in the... well... background, it wouldn't be very useful if DevTools only recorded Background Fetch and Background Sync events while DevTools was open. So, once you start recording, Background Fetch and Background Sync events will continue to be recorded, even after you close the tab, and even after you close Chrome.

Go to the Application panel, open the Background Fetch or Background Sync tab, then click Record to start logging events. Click an event to view more information about it.

Figure 7. The Background Fetch pane. Demo by Maxim Salnikov.

Figure 8. The Background Sync pane.

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.