 Welcome back. Here's what's new in DevTools in Chrome 66. Blackboxing in the network panel, auto-adjust zooming in device mode, HTML rendering in the preview tab, pretty printing in the preview and response tabs, and an improvement to local overrides. First up, blackboxing in the network panel. The initiator column tells you what code caused a network request. If you don't see it, right-click the table header and click Initiator. Here in this demo, you can see that there's a framework wrapper around the requests, so they all point to the same line of code. What I really want is to see the application code that caused each request. To do this, I hover over the initiator, which shows the call stack leading up to the request, right-click the call that I want to hide, then click Blackbox Script. The wrapper code is now hidden from the results, and I can see the app code that really caused each request. To manage your blackbox scripts, type blackbox in the command menu, or go to Settings. The preview tab now always renders HTML and pretty print minified files. Here we've got the Stack Overflow page for DevTools questions. When I click the request for the main document, then open the preview tab, I see a rendering of the HTML. It's not a complete browser, so the rendering isn't perfect, but it's good enough. This often comes in handy when an API returns an error code that's formatted in HTML and you just want to see the rendered output. The preview tab now also pretty prints minified files by default, such as this jQuery file. You can also pretty print from the Response tab by clicking the Pretty Print button. In Device Mode, you can now configure DevTools to always resize the viewport so that it doesn't overflow your screen. First, let's see the old behavior. Here I'm simulating a mobile viewport in Portrait Mode. When I switch to landscape, the viewport overflows my screen. In Chrome 66, if I never want it to overflow, I can click the zoom dropdown, then select Auto Adjust Zoom. Now when I change orientation, the viewport resizes itself to fit my screen. In the last episode, when we announced the launch of local overrides, I mentioned that it had a limitation around CSS and HTML. If you had some CSS inlined in your HTML and made a change to that CSS, local overrides couldn't detect the change. In Chrome 66, that's fixed. Here on this super impressive demo that I built, we've got a CSS rule in the head of the document. The rule sets the color of H1 elements to Fuchsia. In Chrome 65, when I make a change to this declaration and reload the page, the change is gone even though I've got local override set up. In Chrome 66, though, it works as you'd expect. I change the color, then reload the page, and the change is still there. That's all for Chrome 66. Here's a bonus tip. Back when I created the JavaScript debugging tutorial, some viewers pointed out that event listener breakpoints aren't that useful if you're building on top of a framework because your event listeners are usually wrapped in framework code. The black boxing feature that I showed you earlier can also help here. When I click this button, the count increments. When I set a click break point, then click the button, DevTools pauses and views wrapper code, which isn't that helpful. What I really want is to see the app code that causes the count to increment. Since the framework code is in a separate file, I can black box that script from the call stack pane. Now, if I click the button and trigger the break point again, DevTools pauses on the code that I actually care about. Thanks for watching. Leave me a comment if you've got any questions or feedback. Otherwise, I'll see you in six weeks for Chrome 67.