What's New In DevTools (Chrome 77)
Copy element's styles
Right-click a node in the DOM Tree to copy that DOM node's CSS to your clipboard.
Visualize layout shifts
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.
DevTools can now help you detect layout shifting:
- Open the Command Menu.
- Start typing
Rendering. - Run the Show Rendering command.
- Enable the Layout Shift Regions checkbox. As you interact with a page, layout shifts are highlighted blue.
Lighthouse 5.1 in the Audits panel
The Audits panel is now running Lighthouse 5.1. New audits include:
- Provides a valid
apple-touch-icon. Checks that a PWA can be added to an iOS homescreen. - Keep request counts and file sizes low. Reports the total number of network requests and file sizes for various categories, such as documents, scripts, stylesheets, images, and so on.
- 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.
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.
- Plugins. Extend Lighthouse with your own custom audits.
- Stack Packs. Add audits tailored to specific technology stacks. The WordPress Stack Pack shipped first. React and AMP Stack Packs are in development.
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.
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.
prefetch2.html and
prefetch2.css came from (prefetch cache).
See Prefetch Demo to try it out.
Private properties when viewing objects
The Console now shows private class fields in its object previews.
#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.
As with the Background Fetch and Background Sync features from Chrome 76, once you start recording, Push Messages and Notifications on this page are recorded for 3 days, even when the page is closed, and even when Chrome is closed.
Feedback
To discuss the new features and changes in this post, or anything else related to DevTools:
- File definite bug reports and feature requests at Chromium Bugs.
- Discuss possible features, changes, and bugs on the Mailing List.
- Get help on how to use DevTools on Stack Overflow.
- Tweet us at @ChromeDevTools.
- File bugs on this document 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.
<<../../_shared/discover.md>>