 Hola, here's what's new in DevTools in Chrome 75. When auto-completing CSS properties that take functions as values, DevTools now auto-completes to meaningful values. Back in an older version of Chrome, when I add a filter property to document.body and browse the autocomplete values, I don't see any changes, even though the DOM tree shows me that the property is being updated in real time. That's because each of these values is actually a function. For example, to blur a page, I need to pass something like 5px as an argument. As of Chrome 75, when I add the filter property and browse the autocomplete values, I now see how each value affects the styling because DevTools is supplying default arguments for each function. When you want to delete all site storage data, you can now do so from the command menu. Previously, the only easy way to clear all site data was to open the application panel, go to the Clear Storage pane, select what types of storage to delete, then click the Clear Site Data button. Now you can clear site data from the command menu. Open the main menu, click Run Command, type Clear, select the Clear Site Data command, then press Enter to run the command. You can control what data gets saved or deleted by unchecking or checking boxes in the Clear Storage pane. When you've got an IndexedDB database from a third party on your page, you can now inspect that database. In this demo, I'm just embedding MDN's IDB demo in an iframe. I'll set Note Title to Tony and Note Text to Good Cat, and then click Create New Note. On this older version of Chrome, when I go to the application panel and then open the IndexedDB pane to inspect the database, I see nothing. On Chrome 75, after creating the same note, I see the database as expected. Also new in Chrome 75, when inspecting databases, DevTools now tells you the total number of items in that database. When you want to view a network resource's compressed size versus its uncompressed size, you can now do so by hovering over the size column. Previously, you could only see uncompressed resource sizes when using large request rows. For example, after I click Use Large Request Rows, I see two values in the size column. The top value represents the transfer size, which is the total amount of data that was transferred over the network, including headers and content. The bottom value represents the full uncompressed size of the resource content. If the top value is much smaller than the bottom value, then the server is probably using text compression, which is a good practice because it speeds up page loads. If the two values are the same or the top value is slightly larger than the bottom value, then the resource is not being compressed. As of Chrome 75, you no longer need large request rows to view this data. First, I'll click Use Small Request Rows to go back to the default view. And now when I hover over the size column, I see the transfer size and the resource size. Inline breakpoints can now be managed from the breakpoints pane. In this example, I want to pause before map is called. So first, I add a line of code breakpoint. Then I click the icon next to map. I don't want to pause before props, so I'll click to disable that breakpoint. I also want to pause before Create Element, so I enable the inline breakpoint there as well. In this older version of Chrome, there's only one entry in the breakpoints pane, although there really should be two, one for map and one for Create Element. Now, after creating the same breakpoints in Chrome 75, there's two entries in the breakpoints pane as expected. By the way, if you ever need to disable or delete all breakpoints, just right click the breakpoints pane. If you prefer a minimal UI when inspecting nodes, there's now a setting for disabling the detailed tooltip that we introduced in Chrome 73. After I click Inspect and hover over this paragraph, I see a tooltip containing style information about that paragraph node. If you just want to hide the tooltip sometimes, you can hold Control or Command on Mac to hide it temporarily. If you want to permanently disable it, press F1 to open Settings, go to the Preferences page, if not already open, go to the Elements section, then disable the Show Detailed Inspect Tooltip checkbox. Now, when I hover over nodes while in Inspect mode, I see a more minimal tooltip. If you navigate DevTools with a keyboard, there's now a setting to prevent the tab trap in the Sources panel. Right now, my focus is on the Elements tab. When I press Control, Right Square Bracket or Command, Right Square Bracket on Mac, I navigate to the Console. And when I press it again, I navigate to the Sources panel. When I try to tab out of the Editor, it just indents the code instead. To fix this, press F1 to open Settings again, go to the Preferences page, if not already open, go to the Sources section, and enable the checkbox for Enable Tab Moves Focus. Now, when I go back to the Elements panel and use my keyboard to navigate to the Sources panel and then press Tab, my focus moves out of the Editor as expected. By the way, there's been a lot of work recently around making DevTools more accessible. Check out Rob's Navigate DevTools with Assistive Technology Guide to learn more. Here's a bonus tip on how to enable the built-in dark theme that we've had since 2016. Press Control-Shift-P or Command-Shift-P on Mac to open the Command menu. Type dark, and then press Enter to run the Switch to Dark theme command. You can also access this from Settings, Preferences, Appearance, Theme. Thanks for watching. We'll be back for Chrome 76 in six weeks.