What's New In DevTools (Chrome 70)
Note: We'll publish the video version of What's New In DevTools (Chrome 70) around mid-October 2018.
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. Pin an expression to the top of your Console and monitor its value in real-time.
- Highlight DOM nodes during Eager Evaluation. Type an expression that evaluates to a DOM node to highlight that node in the viewport.
- Performance panel optimizations. Faster visualizing and processing of data.
- More reliable debugging. Bug fixes related to breakpoints, and code stepping for TypeScript users.
- Enable network throttling from the Command Menu. Run commands to simulate fast 3G or slow 3G.
- Autocomplete Conditional Breakpoints. Use the Autocomplete UI to type out conditional breakpoints faster.
- Break on
AudioContext
events. Use the Event Listener Breakpoints pane to pause on the first line of anAudioContext
lifecycle event handler. - Debug Node.js apps with ndb. Detect and attach to child processes, place breakpoints before modules are required, edit files from the DevTools UI, blackbox scripts outside of the working directory, and more.
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 highlights that node in the viewport.
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.
It also fixes bugs related to sourcemaps. Some TypeScript users would instruct DevTools to blackbox a certain TypeScript file while stepping through code, and instead DevTools would blackbox the entire bundled JavaScript file. These fixes also address an issue that was causing the Sources panel to generally run slowly.
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 AudioContext
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.
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.
Note: Canary is released as soon as its built, without testing. This means that Canary breaks about once-a-month. It's usually fixed within a day. You can go back to using Chrome Stable while Canary is broken.
Previous release notes
See the devtools-whatsnew tag for links to all previous DevTools release notes.