 Hey, hey, welcome back. We've got a bunch of new stuff coming to DevTools in Chrome 62, including two new ways to take screenshots. To take a screenshot of a specific HTML node, such as this header here, select the node in the elements panel, open the command menu by pressing Command Shift P on Mac or Control Shift P on Windows and Linux, type node, then select Capture Nodescreenshot. To take a screenshot of a portion of the viewport, click Inspect, hold Command on Mac or Control on Windows and Linux, then drag your mouse over the portion that you want to screenshot. Here's what's new in the console. As you may know, the await operator lets you write synchronous promise-based code that doesn't block the main thread. When you're tinkering around in the console, you can now use await in your top-level statements. If you've got a lot of the messages logged to your console, you can now filter out the noise by typing a minus sign in the filter box, followed by some text. If that text occurs in a message or the file name that created a message, then the console hides that message. You can also filter by URLs now. In the filter box, type URL colon followed by a portion of a script file name, and then the console only shows messages that came from that file. When you want to inspect all objects of a certain type, you can now call the new query objects API to get the job done quickly. Just pass in a constructor and DevTools returns an array of all objects in the heap that were instantiated with that constructor. Here we've got a page with four buttons. Within the iframe, we can see a JavaScript reference to button one. And down here in this script block, we can see references to buttons two and three. When we pass HTML button element to query objects, the console returns an array that includes buttons two and three. For security reasons, to use this array in subsequent statements, we need to manually store it as a global variable. Button floor isn't included because there's no reference to it in the JavaScript heap. And button one isn't included because it's in a different context. When we change the console context to the iframe and then run query objects again, we can see button one as expected. In the elements panel, you can now visualize CSS grids. Hover over an element that has display grid applied to it, and you can see the grid that's affecting the element's layout. This also works when the parent of the element has display grid applied to it. In the network panel, it's now easy to share network recordings with your colleagues thanks to the new horror imports feature. To load a horror file, just drag and drop it into the network panel. And in case you didn't know, to save a network recording, right-click the requests table and select Save as horror content. In the Coverage tab, you now get even more detail about which code your page actually uses. Before, the Coverage tab marked every line of a function as used, so long as the function was called. But now, the Coverage tab shows you which blocks of code within each function are actually being used. If you've built progressive web apps, you might have noticed that cache debugging can be a little rough around the edges. The big problem was that the DevTools UI didn't reflect cache updates in real time. In Chrome 62, the experience is much better. Here, I've got a demo that lets me create, update, and delete a cache. The DevTools UI now updates in real time when a cache is created, same with creating a resource. Also new in Chrome 62, you can now view the contents of a resource by clicking on it. The preview also updates in real time when the contents of that resource change. That does it for Chrome 62. Thanks for watching. Tweet us at Chrome DevTools or start a thread in the mailing list to discuss these changes and subscribe to the Chrome Developers YouTube channel to keep up with the latest trends in web death. We'll be back in six weeks for Chrome 63.