 Greetings! Chrome 71 has arrived. Here's what's new in DevTools. Back in Chrome 70, we shipped live expressions, which let you pin an expression to the top of your console and monitor its value in real-time. In Chrome 71, when you hover over a live expression that points to a DOM node, DevTools highlights that node in the viewport. To create a live expression, click this little eye of Mordor icon, type the expression, then click outside of UI to save it. Here I'm watching document.activeElement, which tells me what node has focus. When I hover over the result, DevTools shows the node's box model in the viewport. When working in the console or elements panel, you can now store DOM nodes as global variables. Suppose I want to quickly get a reference to this button node. Before Chrome 71, I'd have to do something hacky, like select the node in the DOM tree, then assign $0 to a const. Now you can just right-click the DOM tree and select Store as global variable. If you're logging nodes to the console, you can right-click the result and select Store as global variable from there too. Harfiles let you share network logs with your teammates. DevTools Harfiles now contain custom fields for initiator and priority information. The initiator field tells you why the resource was downloaded, and the priority field tells you what download priority Chrome assigned to the resource. To export a Harfile, first capture some network traffic, then right-click and select Save All as Har with Content. The new fields are called underscore initiator and underscore priority. The underscore means that they're custom fields, not part of the Harspec. To import a Harfile back into DevTools, just drag and drop it into the network panel. You'll notice that the initiator and priority columns now get properly populated after an import. If you can't see these columns, right-click the table header and enable them. You can now access the command menu from the main menu. Click the three dots icon to open the main menu, then select Run Command. From here, you can do lots of handy stuff such as open panels, open drawers, change the appearance of DevTools, and so on. Here's a bonus tip. To view the events fired on an element, use Monitor Events. In this demo, I've got a big button. I want to add a red border to the button when I focus it and then type R-E-D. But I don't know the names of the events that I need in order to do this. So, I right-click the node in the DOM tree and use our handy new store as global variable feature to get a reference to it. Then I call Monitor Events and pass the node as the first argument. Now, when I hover over the button, we see a bunch of mouse move and pointer move events. When I click the button, we see the trusty click event, which we all know and love. When I press Tab to focus the node, we see a focus event. Last, when I type R, we see key down, key press, and key up events. Same for E and D. So, it looks like I just need the key press events to get this feature working. And indeed, over here, I got a sample working using only the key press events. When you want to stop monitoring a node's events, call Unmonitor Events and pass the node as the first argument again. You can also limit what events get logged by passing an array as the second argument, where each item of the array is the name of an event that you care about, such as key press and focus. We also have a few shorthand codes that let you monitor a group of related events all at once. For example, passing the mouse code tells DevTools to log all mouse-related events. Check out the Monitor Events API reference to learn more. Thanks for watching. See you in six weeks for Chrome 72.