Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Copy element's styles

Visualize layout shifts

This feature can cause your screen to flash a lot and may not be suitable for you if you're prone to
photosensitive epilepsy.

Supposing you're reading a news article on your favorite website. As you're reading the page, you
keep losing your place because the content is jumping around. This problem is called layout
shifting. It usually happens when images and ads finish loading. The page hasn't reserved any
space for the images and ads, so the browser has to shift all the other content down to
make room for them. The solution is to use placeholders.

Maximum Potential First Input Delay. Measures the maximum potential time between a user's
first page interaction and the browser's response to that interaction. Note that this metric
replaces the Estimated Input Latency metric. Maximum Potential First Input Delay does not
factor into your Performance category score.

Figure 3. The new Audits panel UI.

The Node and CLI versions of Lighthouse 5.1 have 3 new major features worth checking out:

Performance Budgets. Prevent your site from regressing
over time by specifying request counts and file sizes that pages should not exceed.

OS theme syncing

If you're using the dark theme of your OS, DevTools now switches to its own dark theme
automatically.

Keyboard shortcut for opening the Breakpoint Editor

Press Control+Alt+B or
Command+Option+B (Mac) when focused in the Sources panel's
Editor to open the Breakpoint Editor. Use the Breakpoint Editor to create
Logpoints and Conditional Breakpoints.

Figure 4. The Breakpoint Editor.

Prefetch cache in Network panel

The Size column of the Network panel now says (prefetch cache) when a resource was loaded from
the prefetch cache. Prefetch is a new-ish web platform feature for speeding up subsequent
page loads. Can I use... reports that it's supported in 83.33% of global browsers as of July 2019.

Figure 5. The Size column shows that prefetch2.html and
prefetch2.css came from (prefetch cache).

Private properties when viewing objects

Figure 6. The old version of Chrome on the left does not show the
#color field when inspecting the object, whereas the new version on the
right does.

Notifications and push messages in the Application panel

The Background Services section of the Application panel now supports Push Messages and
Notifications. Push Messages occur when a server sends information to a service worker.
Notifications occur when a service worker or page script shows information to the user.

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.

Discover other DevTools features

Below is a list of everything that's been covered in the What's New In DevTools series.