 Welcome back! Here's what's new in DevTools in Chrome 72. The timing section of the performance panel now includes performance metrics. Here I've got a performance recording of our optimized site speed tutorial. The new performance metrics are here in the timing section. FCP represents first contentful paint, which is when the browser rendered the first bit of content from the DOM. FMP is first meaningful paint, which approximates when meaningful content is visible. DCL is DOM content loaded, which the browser fires when the initial HTML document has been loaded and parsed. And L is the load event, which is fired when all resources have finished loading. How do you use this information? Well, if you want to get initial content to screen faster, for example, you'd focus on all the activity that occurs before your FMP event. Deferring any unnecessary network requests or JavaScript calls should help push your FMP event to the left, meaning that the page is rendering the first bit faster. Check out this optimized site speed tutorial to learn the basics of analyzing load performance. Hovering over a text node in the DOM tree now highlights that node in the viewport. Back in Chrome 71, when I hover over a text node, nothing happens. In Chrome 72, when I hover over that same node, it gets highlighted in the viewport. Suppose you're writing an automation test that involves clicking a DOM node. CopyJS path provides a fast way to get a JavaScript reference to that node from within DevTools. Here on this shadow DOM tutorial, I need a reference to the first paragraph. So I right-click the node, then select Inspect, which opens up the elements panel and highlights the node in the DOM tree. Then I right-click the node, go to Copy, and select CopyJS path. A document.querySelector expression that resolves to this node is now copied to my clipboard. I can confirm this by pasting the expression into the console. IgorVal shows me that the expression evaluates to the node as expected. Next up, the Audits panel has one new audit. Under the past audit section of the Best Practices category, you'll find a new audit called Detected JavaScript Libraries. As the name suggests, this audit lists out all JavaScript libraries that were detected on the page. Here's a bonus tip. Device mode can help you inspect media queries. Click Toggle Device Toolbar to enter device mode. You need to be in responsive mode for this feature, so switch back to it if you're simulating a specific device. Click More Options, then select Show media queries. The blue bar contains media queries that only set a maximum width. The green bar contains queries that set a minimum width and a maximum width. And the orange bar contains queries that only set a minimum width. Click a query to resize the viewport so that the query gets triggered. Right-click a query and select Reveal in Source Code to see its source code in the Sources panel. If the CSS file is minified, click Format, and DevTool shows you a more readable version of the query. Thanks for watching. See you in six weeks for Chrome 73.