 Chrome 77 Approacheth. Here's what's new in DevTools. First up, you can now copy an element CSS styles. I like the styles on this link element and want to copy them. First, I right-click and select Inspect to highlight the link in the DOM tree. Actually, I want to make the font italic first. Now, I'll right-click the element and select Copy Copy Styles, and when I paste to the clipboard, I can see the element styles, including my font style italic declaration. When you're reading an article and the content jumps around, that's called layout shifting. It usually happens because ads and images have finished loading and the page didn't reserve space for them. You can now visualize layout shifts from the Rendering tab. However, a word of warning, this feature can cause your screen to flash a lot, so if you're prone to photosensitive epilepsy, you might want to look away. To visualize layout shifts, first press Control-Shift-P or Command-Shift-P to open the command menu. Type Rendering, run the Show Rendering command, and then enable the Layout Shift Regions checkbox. Now, as you load or interact with pages, layout shifts are highlighted blue. The Audits panel has a couple new audits and a new metric. As always, if you want to find ways to improve page quality, go to the Audits panel, then click Run Audits, and after 10 seconds or so, the Audits panel gives you a report on how to improve. The Estimated Input Latency metric in the Performance section has been replaced with a new metric called Maximum Potential First Input Delay. The old metric did not factor into your performance score, and the new one doesn't either. The new Keep Request Counts and File Sizes Low Audit reports the total number of network requests and the size of each request. And down in the PWA section, the new Apple Touch Icon audit checks that your PWA can be added to an iOS home screen. DevTools now automatically syncs its theme with your OS theme. Right now, my OS is in its dark theme. When I open DevTools, it's also in dark theme. When I set my OS to its light theme, and then close and reopen DevTools, DevTools is also in its light theme. By the way, dark theme isn't new, we've had it for a long time. To manually enable it, press Ctrl Shift P or Command Shift P to open the command menu, type dark, then run the enable dark theme command. For light theme, run the enable light theme command. If you create conditional breakpoints or logpoints a lot, there's a new keyboard shortcut for opening the breakpoint editor. While my cursor is in the editor, I can press Ctrl Alt B or Command Option B on Mac to open the breakpoint editor. To choose my breakpoint type, I can press Shift Tab to select the menu, then Space to open the menu, then I can select either breakpoint or conditional breakpoint or logpoint. If you're not sure how to use conditional breakpoints or logpoints, check out the links in the description for more information. Prefetch links give you the chance to download resources before they're needed in order to speed up subsequent page loads. The network panel now indicates whether a resource came from the prefetch cache. On this page, I'm prefetching an HTML file and a CSS file. In the network panel, you can see that the resources were downloaded even though they're not actually needed for the page I'm currently on. When I navigate to page two, the size column tells me that the resources came from the prefetch cache. Check out our resource prioritization guide to learn more about prefetch. The console now shows private class fields. In this older version of Chrome, I'm defining a class called cat with a public field called name and a private field called color. When I inspect the object, I can't see the private field. In Chrome 77, after I define the same class and inspect the object, I can see the private field as expected. The background services section now supports push messages and notifications. A push message is when a server sends information to a service worker and a notification is when a service worker shows information to a user. To record notifications, go to the application panel, then go to the notifications pane. Then click record. Now when I send a notification, I see it logged to the table. I can click the notification to view more information about it. However, considering that this is a background service, it wouldn't be that helpful if it only worked when DevTools was open. So DevTools logs notifications and push messages for three days, even when DevTools is closed. For example, first I'll close DevTools, then change the title and message to closed, then send the message. To reopen DevTools, I'll press control shift I or command option I, which is the shortcut for reopening the last panel I was using, in this case the application panel. And here you can see that the second message was logged. Here's a bonus tip about a lesser known DevTools feature, the DOM Tree Search UI. To open the DOM Tree Search UI, focus the DOM Tree, then press control F or command F on Mac. You can search by strings like DevTools or CSS selectors like input type equals hidden or even XPath queries. Thanks for watching. We'll be back in six weeks for Chrome 78.