What's New In DevTools (Chrome 76)

Technical Writer, Chrome DevTools & Lighthouse

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.

After typing 'bold' the Styles pane autocompletes to 'font-weight: bold'. — 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.

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.

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

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

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)