 Salutations! We've got seven new features and one minor change coming to DevTools in Chrome 73. Logpoints let you log messages to the console without cluttering up your code with console.log statements. First, you need to open a file in the sources panel. A fast way to do that when you know the file name is to press Ctrl-O or Command-O on Mac, type the file name, then press Enter. To add a logpoint, right-click a line number and select Add Logpoint. In the Breakpoint Editor, type the expression that you want to log to the console. Side note, check out the Art of Debugging article that we've linked to in the description to learn more about this handy shorthand syntax. When your expression is ready, press Enter to save it. The next time that the code runs, the result of the logpoint is logged to the console. First, I'll press Escape so that we can see the console door. In this case, I need to reload the page in order for this code to run. As expected, the expression has been logged to the console. To temporarily deactivate the logpoint, hold Shift and then click it. To delete a logpoint, just give it a regular click. When inspecting a node, DevTools now shows an expanded tooltip containing commonly needed information about the node. To enter Inspect Mode, press Ctrl Shift C or Command Shift C on Mac or click the Inspect Mode icon. Back in an earlier version of Chrome, when I hover over a node, I just see the node type and its size. When I do the same in Chrome 73, I see the node's color, font, margin, and contrast. Code coverage data can now be exported as a JSON file. To open the Coverage tab, press Ctrl Shift P or Command Shift P on Mac to open the command menu. Start typing coverage, then select Show Coverage. To review, when I reload the page, DevTools tells me how much code from each file is actually being used. When I click a file, I see a line-by-line breakdown. To export the code, click Export, which downloads the data as a JSON file. The URL property describes what file is analyzed, the ranges property describes the portions of code that were used, and the text property contains the full text of the file. In this example, the JSON is telling me that the substring between index 0 and index 21 of the text string was used, as well as the substring between index 49 and index 71. To extract the use code, I would just concatenate these substrings. The console can now be navigated with a keyboard. To start navigating the console with a keyboard, press Shift Tab. Use the up and down arrow keys to select messages or parts of a message. When a URL is selected, pressing Enter opens that file in a new tab if it's an external file. To expand a message, you need to first select a whole message, which is indicated by a blue background. And then press the right arrow key. Pressing Enter on a link to a page resource opens up the Sources panel for scripts or the Network panel for network requests. To collapse, press Left to re-select the message, then press Left again. The Color Picker now shows a AAA contrast ratio line in addition to the AA line. To see contrast ratio information in the Color Picker, enter Inspect Mode, select a note containing text, click the box next to the node's color property, then click Show More. Since this node meets the AAA recommendation, anything below this line also meets the AAA recommendation, which is considered very readable. Anything between the two lines meets the AA recommendation but does not meet the AAA one. In other words, this is the bare minimum for readability. And anything above the top line doesn't even satisfy the AA recommendation, which is considered unreadable. Custom Geolocation Overrides can now be saved across sessions. Press Ctrl Shift P or Command Shift P on Mac to open the Command menu. Start typing Sensors, then select Show Sensors. The Sensors tab is where you can manually override your Geolocation while DevTools is open. Click Manage, then click Add Location. Enter the name, latitude, and longitude of your custom location, then click Add. The Sources and Network Panels now support code folding. To enable code folding, press F1 to open Settings. Scroll to the Sources section, then check the Code Folding checkbox. To fold a section of code, hover near the line number and press the Fold icon. The name of the tab for inspecting WebSocket messages has changed. When you wanted to inspect WebSocket connections in earlier versions of Chrome, the Frames tab was where you inspected the upstream and downstream messages. As of Chrome 73, this tab is now called the Messages tab. This behavior is the same as before. Here's a bonus tip about a lesser-known DevTools feature that has been around for a long time. The Network Panel supports special keywords that let you filter network resources based on certain properties of each resource. To log network activity, I'll go to the Network Panel, then reload the page. To filter by domain, I type domain colon, and I see a list of domains of page resources. To only show resources larger than 10 kilobytes, I type larger-than colon, and then select 10k. Check out the Filter Request by Properties section in our Network Reference to see the full list of keywords. That's all, folks. Send me questions and feedback in the comments, and see you in six weeks for Chrome 74.