Here's what's new in DevTools in Chrome 73.
Logpoints
Use Logpoints to log messages to the Console without cluttering up your code with console.log()
calls.
To add a logpoint:
-
Right-click the line number where you want to add the Logpoint.
Figure 1. Adding a Logpoint -
Select Add logpoint. The Breakpoint Editor pops up.
Figure 2. The Breakpoint Editor -
In the Breakpoint Editor, enter the expression that you want to log to the Console.
Figure 3. Typing the Logpoint expression -
Press Enter or click outside of the Breakpoint Editor to save. The orange badge on top of the line number represents the Logpoint.
Figure 4. An orange Logpoint badge on line 174
The next time that the line executes, DevTools logs the result of the Logpoint expression to the Console.

See Chromium issue #700519 to report bugs or suggest improvements.
Detailed tooltips in Inspect Mode
When inspecting a node, DevTools now shows an expanded tooltip containing commonly important information like font size, font color, contrast ratio, and box model dimensions.

To inspect a node:
-
Click Inspect
.
-
In your viewport, hover over the node.
Export code coverage data
Code coverage data can now be exported as a JSON file. The JSON looks like this:
[
{
"url": "https://wndt73.glitch.me/style.css",
"ranges": [
{
"start": 0,
"end": 21
},
{
"start": 45,
"end": 67
}
],
"text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
},
...
]
url
is the URL of the CSS or JavaScript file that DevTools analyzed.
ranges
describes the portions of the code that were used.
start
is the starting offset for a range that was used.
end
is the ending offset. text
is the full text of the file.
In the example above, the range 0 to 21 corresponds to body { margin: 1em; }
and the
range 45 to 67 corresponds to h1 { color: #317EFB; }
. In other words, the first and
last rulesets were used and the middle one was not.
To analyze how much code is used on page load and export the data:
-
Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.
Figure 7. The Command Menu -
Start typing
coverage
, select Show Coverage and then press Enter.Figure 8. Show Coverage The Coverage tab opens.
Figure 9. The Coverage tab -
Click Reload
. DevTools reloads the page and records how much code is used compared to how much is shipped.
- Click Export
to export the data as a JSON file.
Code coverage is also available in Puppeteer, a browser automation tool maintained by the DevTools team. See Coverage.
See Chromium issue #717195 to report bugs or suggest improvements.
Navigate the Console with the keyboard
You can now use the keyboard to navigate the Console. Here's an example.
Pressing Shift+Tab focuses the last message (or result of an evaluated expression). If the message contains links, the last link is highlighted first. Pressing Enter opens the link in a new tab. Pressing the Left arrow key highlights the entire message (see Figure 13).

Pressing the Up arrow key focuses the next link.

Pressing the Up arrow key again focuses the entire message.

Pressing the Right arrow key expands a collapsed stack trace (or object, array, and so on).

Pressing the Left arrow key collapses an expanded message or result.
See Chromium issue #865674 to report bugs or suggest improvements.
AAA contrast ratio line in the Color Picker
The Color Picker now shows a second line to indicate which colors meet the AAA contrast ratio recommendation. The AA line has been there since Chrome 65.

Colors between the 2 lines represent colors that meet the AA recommendation but do not meet the AAA recommendation. When a color meets the AAA recommendation, anything on the same side of that color also meets the recommendation. For example, in Figure X anything below the lower line is AAA, and anything above the upper line does not even meet the AA recommendation.
See Contrast ratio in the Color Picker to learn how to access this feature.
See Chromium issue #879856 to report bugs or suggest improvements.
Save custom geolocation overrides
The Sensors tab now lets you save custom geolocation overrides.
-
Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.
Figure 16. The Command Menu -
Type
sensors
, select Show Sensors, and press Enter. The Sensors tab opens.Figure 17. The Sensors tab -
In the Geolocation section click Manage. Settings > Geolocations opens up.
Figure 18. The Geolocations tab in Settings -
Click Add location.
-
Enter a location name, latitude, and longitude, then click Add.
Figure 19. Adding a custom geolocation
See Chromium issue #649657 to report bugs or suggest improvements.
Code folding
The Sources and Network panels now support code folding.

To enable code folding:
- Press F1 to open Settings.
- Under Settings > Preferences > Sources enable Code folding.
To fold a block of code:
-
Hover your mouse over the line number where the block starts.
-
Click Fold
.
See Chromium issue #328431 to report bugs or suggest improvements.
Messages tab
The Frames tab has been renamed to the Messages tab. This tab is only available in the Network panel when inspecting a web socket connection.

See Chromium issue #802182 to report bugs or suggest improvements.
Feedback
To discuss the new features and changes in this post, or anything else related to DevTools:
- File bug reports at Chromium Bugs.
- Discuss features and changes on the Mailing List. Please don't use the mailing list for support questions. Use Stack Overflow, instead.
- Get help on how to use DevTools on Stack Overflow. Please don't file bugs on Stack Overflow. Use Chromium Bugs, instead.
- Tweet us at @ChromeDevTools.
- File bugs on this doc in the Web Fundamentals repository.
Consider Canary
If you're on Mac or Windows, consider using Chrome Canary as your default development browser. Canary gives you access to the latest DevTools features.
Discover other DevTools features
Below is a list of everything that's been covered in the What's New In DevTools series.
Chrome 72
- Visualize performance metrics in the Performance panel.
- Highlight text nodes in the DOM Tree.
- Copy the JS path to a DOM node.
- Audits panel updates, including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.
Chrome 71
- Hover over a Live Expression result to highlight a DOM node.
- Store DOM nodes as global variables.
- Initiator and priority information now in HAR imports and exports.
- Access the Command Menu from the Main Menu.
- Picture-in-Picture breakpoints.
Chrome 70
- Live Expressions in the Console.
- Highlight DOM nodes during Eager Evaluation.
- Performance panel optimizations.
- More reliable debugging.
- Enable network throttling from the Command Menu.
- Autocomplete Conditional Breakpoints.
- Break on AudioContext events.
- Debug Node.js apps with ndb.
- (Bonus Tip) Measure real world user interactions with the User Timing API.
Chrome 68
- Eager Evaluation.
- Argument hints.
- Function autocompletion.
- ES2017 keywords.
- Lighthouse 3.0 in the Audits panel.
- BigInt support.
- Adding property paths to the Watch pane.
- "Show timestamps" moved to Settings.
Chrome 67
- Search across all network headers.
- CSS variable value previews.
- Copy as fetch.
- New audits, desktop configuration options, and viewing traces.
- Stop infinite loops.
- User Timing in the Performance tabs.
- JavaScript VM instances clearly listed in the Memory panel.
- Network tab renamed to Page tab.
- Dark theme updates.
- Certificate transparency information in the Security panel.
- Site isolation features in the Performance panel.
Chrome 66
- Blackboxing in the Network panel.
- Auto-adjust zooming in Device Mode.
- Pretty-printing in the Preview and Response tabs.
- Previewing HTML content in the Preview tab.
- Local Overrides support for styles inside of HTML.
- (Bonus Tip) Blackbox framework scripts to make Event Listener Breakpoints more useful.
Chrome 65
- Local Overrides.
- New accessibility tools.
- The Changes tab.
- New SEO and performance audits.
- Multiple recordings in the Performance panel.
- Reliable code stepping with workers in async code.
Chrome 64
Chrome 63
- Multi-client remote debugging support.
- Workspaces 2.0.
- 4 new audits.
- Simulate push notifications with custom data.
- Trigger background sync events with custom tags.
Chrome 62
- Top-level await in the Console.
- New screenshot workflows.
- CSS Grid highlighting.
- A new Console API for querying objects.
- New Console filters.
- HAR imports in the Network panel.
- Previewable cache resources.
- More predictable cache debugging.
- Block-level code coverage.
Chrome 61
- Mobile device throttling simulation.
- View storage usage.
- View when a service worker cached responses.
- Enable the FPS meter from the Command Menu.
- Set mousewheel behavior to zoom or scroll.
- Debugging support for ES6 modules.
Chrome 60
- New Audits panel.
- 3rd-Party Badges.
- A new gesture for Continue To Here.
- Step into async.
- More informative object previews in the Console.
- More informative context selection in the Console.
- Real-time updates in the Coverage tab.
- Simpler network throttling options.
- Async stacks on by default.
Chrome 59
- CSS and JS code coverage.
- Full-page screenshots.
- Block requests.
- Step over async await.
- Unified Command Menu.
RSS or Atom feed and get the latest updates in your favorite feed reader!
Subscribe to our