Quantcast
Channel: Updates
Viewing all articles
Browse latest Browse all 599

What's New In DevTools (Chrome 70)

$
0
0

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 a Live Expression to the top of your Console when you want to monitor its value in real-time.

  1. Click Create Live Expression Create Live Expression. The Live Expression UI opens.

    The Live Expression UI
    Figure 1. The Live Expression UI
  1. Type the expression that you want to monitor.

    Typing Date.now() into the Live Expression UI.
    Figure 2. Typing Date.now() into the Live Expression UI
  2. Click outside of the Live Expression UI to save your expression.

    A saved Live Expression.
    Figure 3. A saved Live 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.

Since the current expression evaluates to a node, that node is highlighted in the
            viewport.
Figure 4. Since the current expression evaluates to a node, that node is highlighted 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.

Processing and loading Performance data.
Figure 5. Processing and loading Performance data

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.

Network throttling commands in the Command Menu.
Figure 6. Network throttling commands in the Command Menu

Autocomplete Conditional Breakpoints

Use the Autocomplete UI to type out your Conditional Breakpoint expressions faster.

The Autocomplete UI
Figure 7. The Autocomplete UI

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.

AudioContext events in the Event Listener Breakpoints pane.
Figure 8. AudioContext events in the Event Listener Breakpoints pane

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.
The ndb UI.
Figure 9. The ndb UI

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.


Viewing all articles
Browse latest Browse all 599

Trending Articles