Do you use responsive images, lazy loading, or other optimizations? If not, why not? What affects your decisions?
Answer a few simple questions to help us understand your needs, and what we can do to make your life easier. Get Started

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

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

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

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.

Discover other DevTools features

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

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

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!