Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more

What's New In DevTools (Chrome 87)

New CSS Grid debugging tools

DevTools now has better support for CSS grid debugging!

CSS grid debugging

When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see a grid badge next to it in the Elements panel. Click the badge to toggle the display of a grid overlay on the page.

The new Layout pane has a Grid section offering you a number of options for viewing the grids.

Check out the documentation to learn more.

Chromium issue: 1047356

New WebAuthn tab

You can now emulate authenticators and debug the Web Authentication API with the new WebAuthn tab.

Select More options > More tools > WebAuthn to open the WebAuthn tab.

WebAuthn tab

Prior to the new WebAuthn tab, there was no native WebAuthn debugging support on Chrome. Developers needed physical authenticators to test their web application with Web Authentication API.

With the new WebAuthn tab, web developers can now emulate these authenticators, customize their capabilities, and inspect their states, without the need of any physical authenticators. This makes the debugging experience much easier.

Check out our documentation to learn more about the WebAuthn feature.

Chromium issue: 1034663

Move tools between top and bottom panel

DevTools now support moving tools in DevTools between the top and bottom panel. This way, you can view any two tools at once.

For example, if you would like to view Elements and Sources panel at once, you can right click on the Sources panel, and select Move to bottom to move it to the bottom.

Move to bottom

Similarly, you can move any bottom tab to the top by right clicking on a tab and select Move to top.

Move to top

Chromium issue: 1075732

Elements panel updates

View the Computed sidebar pane in the Styles pane

You can now toggle the Computed sidebar pane in the Styles pane.

The Computed sidebar pane in the Styles pane is collapsed by default. Click on the button to toggle it.

Computed sidebar pane

Chromium issue: 1073899

Grouping CSS properties in the Computed pane

You can now group the CSS properties by categories in the Computed pane.

With this new grouping feature, it will be easier to navigate in the Computed pane (less scrolling) and selectively focus on a set of related properties for CSS inspection.

On the Elements panel, select an element. Toggle the Group checkbox to group/ungroup the CSS properties.

Grouping CSS properties

Chromium issues: 1096230, 1084673, 1106251

Lighthouse 6.4 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 6.4. Check out the release notes for a full list of changes.

Lighthouse

New audits in Lighthouse 6.4:

  • Preload fonts. Validates if all fonts that usefont-display: optional were preloaded.
  • Valid sourcemaps. Audits if a page has valid sourcemaps for large, first-party JavaScript.
  • [Experimental] Large JavaScript library. Large JavaScript libraries can lead to poor performance. This audit suggests cheaper alternatives to common, large JavaScript libraries like moment.js.

Chromium issue: 772558

performance.mark() events in the Timings section

The Timings section of a Performance recording now marks performance.mark() events.

Performance.mark events

New resource-type and url filters in the Network panel

Use the new resource-type and url keywords in the Network panel to filter network requests.

For example, use resource-type:image to focus on the network requests that are images.

resource-type filter

Check out filter requests by properties to discover more special keywords like resource-type and url.

Chromium issues: 1121141, 1104188

Frame details view updates

Display COEP and COOP reporting to endpoint

You can now view the Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy (COOP)reporting to endpoint under the Security & Isolation section.

The Reporting API defines a new HTTP header, Report-To, that gives web developers a way to specify server endpoints for the browser to send warnings and errors to.

reporting to endpoint

Read this article to learn more about how to enable COEP and COOP and make your website "cross-origin isolated".

Chromium issue: 1051466

Display COEP and COOP report-only mode

DevTools now displays report-only label for COEP and COOP that are set to report-only mode.

report-only label

Watch this video to learn about how to prevent information leaks and enable COOP and COEP in your website.

Chromium issue: 1051466

Deprecation of Settings in the More tools menu

The Settings in the More tools menu has been deprecated. Open the Settings from the main panel instead.

Settings in the main panel

Chromium issue: 1121312

Experimental features

View and fix color contrast issues in the CSS Overview panel

CSS Overview panel now displays a list of low color contrast texts of your page.

In this example, the demo page has a low color contrast issue. Click on the issue, you can view a list of elements that have the issue.

Low color contrast issues

Click on an element in the list to open the element in Elements panel. DevTools provides auto color suggestion to help you fix the low contrast text.

Chromium issue: 1120316

Customize keyboard shortcuts in DevTools

You can now customize the keyboard shortcuts for your favourite commands in DevTools.

Go to Settings > Shortcuts, hovering on a command and click the Edit button (pen icon) to customize the keyboard shortcut.

Customize keyboard shortcuts

To reset all shortcuts, click on Restore default shortcuts.

Chromium issue: 174309

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

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.

Discover DevTools features

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

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

Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!