 Hello, here's what's new in DevTools in Chrome 76. First up, autocomplete in the styles pane now supports keyword values. Here I want to make this H1 bold. I can't remember what property I need, but I know the value should be bold. In this older version of Chrome, when I type bold, nothing shows up. Now in Chrome 76, when I type bold, the styles pane autocompletes to font weight bold, which is exactly what I want. In general, if you remember what keyword value you want but can't remember the property name, try typing the value and the autocomplete should help you finish the declaration. There's a new UI for network settings. On this older version of Chrome, note the throttling menu and offline checkbox here on the right. When I make my window narrow, I can no longer access those options. To fix this usability issue, Chrome 76 now has a network settings pane. This is where you'll now find the options, use large request rows, show overview, group by frame, and capture screenshots. The network panel now has prominent buttons for importing and exporting hard files. After logging network activity, press the new export button to download the log as JSON and share it with your colleagues. Your colleagues can view the log in the network panel by clicking the import button and then selecting the horror file that you provided them. Horror exports now include WebSocket messages. First, I create a WebSocket connection, then send a message which also gets echoed back, then click export to save the log as a horror file, then open the file and search for WebSocket messages, and I can see the messages that I just logged. The memory panel now reports total memory usage in real time. Down here is the total memory usage, next to that is the trend over the last two minutes. Red text with an up arrow means that memory usage is increasing. Green text with a down arrow means that memory usage is decreasing. The service worker pane now lists port numbers in its titles. Back in this older version of Chrome, I've developed a few sites on localhost. Many of them use service workers and it's not easy to see which service worker belongs to which port. In Chrome 76, the port is now listed in the title for easier scanning. The application panel now logs background fetch and background sync events. To log background fetch events, go to the application panel, open the background fetch pane, then click record. After triggering background fetch, life cycle events like background fetch registered are logged to the table. The background sync pane works the same way. The experimental puppeteer for Firefox project was announced at Google IO 2019, which means you can now automate Firefox and Chrome with the same node API. Here I've got a sample node script that instantiates Firefox and Chrome and runs an integration test on both browsers. When I run node example.js, Firefox launches, then the puppeteer documentation site opens, then Page is inserted into the search bar. After that, the test is repeated with Chrome. By the way, we're mentioning puppeteer in this DevTools video because you can use it to automate tasks that were previously only possible in DevTools. For example, you can use page.screenshot to take screenshots and coverage.startjs coverage to extract code coverage data. Here's a bonus tip. Microsoft's accessibility insights extension has a handy feature for visualizing tap stops. For example, I open the extension, go to ad hoc tools, enable tap stops, and then as I tap through the page, I see a trail of tap stops. To share this visualization with colleagues, I open DevTools, open the command menu from the main menu, then run the capture full size screenshot command. Thanks for watching. We'll be back in six weeks for Chrome 77.