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.

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 The Network Settings button pane.

Network Settings

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.

Mapping the old locations to the new.

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

The new HAR buttons.

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.

Real-time total memory usage.

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.

Service worker ports.

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 Record to start logging events. Click an event to view more information about it.

The Background Fetch pane.

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

The Background Sync pane.

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.

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59