Welcome back! It's been about 12 weeks since our last update, which was for Chrome 68. We skipped Chrome 69 because we didn't have enough new features or UI changes to warrant a post.
New features and major changes coming to DevTools in Chrome 70 include:
- 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
- Debug Node.js apps with ndb.
Live Expressions in the Console
Pin a Live Expression to the top of your Console when you want to monitor its value in real-time.
Click Create Live Expression . The Live Expression UI opens.
Type the expression that you want to monitor.
Click outside of the Live Expression UI to save your expression.
Live Expression values update every 250 milliseconds.
Highlight DOM nodes during Eager Evaluation
Type an expression that evaluates to a DOM node in the Console and Eager Evaluation now highlights that node in the viewport.
Here are some expressions you may find useful:
document.activeElementfor highlighting the node that currently has focus.
document.querySelector(s)for highlighting an arbitrary node, where
sis a CSS selector. This is equivalent to hovering over a node in the DOM Tree.
$0for highlighting whatever node is currently selected in the DOM Tree.
$0.parentElementto highlight the parent of the currently-selected node.
Performance panel optimizations
When profiling a large page, the Performance panel previously took tens of seconds to process and visualize the data. Clicking on a event to learn more about it in the Summary tab also sometimes took multiple seconds to load. Processing and visualizing is faster in Chrome 70.
More reliable debugging
Chrome 70 fixes some bugs that were causing breakpoints to disappear or not get triggered.
Enable network throttling from the Command Menu
You can now set network throttling to fast 3G or slow 3G from the Command Menu.
Autocomplete Conditional Breakpoints
Use the Autocomplete UI to type out your Conditional Breakpoint expressions faster.
Break on AudioContext events
Use the Event Listener Breakpoints pane to pause on the first line of an
lifecycle event handler.
AudioContext is part of the Web Audio API, which you can use to process and synthesize audio.
Debug Node.js apps with ndb
ndb is a new debugger for Node.js applications. On top of the usual debugging features that you get through DevTools, ndb also offers:
- Detecting and attaching to child processes.
- Placing breakpoints before modules are required.
- Editing files within the DevTools UI.
- Blackboxing all scripts outside of the current working directory by default.
Check out ndb's README to learn more.
Was this page helpful?
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.
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.
Previous release notes
See the devtools-whatsnew tag for links to all previous DevTools release notes.