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.

Copy styles.

Figure 1. Copy element styles.

Thanks Adam Argyle and VisBug for the inspiration.

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:

  1. Open the Command Menu.
  2. Start typing Rendering.
  3. Run the Show Rendering command.
  4. Enable the Layout Shift Regions checkbox. As you interact with a page, layout shifts are highlighted blue.

A layout shift.

Figure 2. A layout shift.

Chromium issue #961846

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 new Audits panel UI.

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.
  • 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.

The Breakpoint Editor.

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.

The Size column showing that resources came from the prefetch cache.

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

See Prefetch Demo to try it out.

Chromium issue #935267

Private properties when viewing objects

The Console now shows private class fields in its object previews.

When inspecting an object, the Console now shows private fields like '#color'.

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.

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.

The new Notifications and Push Messages panes.

Figure 7. The new Push Messages and Notifications panes in the Application panel.

Chromium issue #927726

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59