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

What's New In DevTools (Chrome 86)

New Media panel

DevTools now displays media players information in the Media panel.

New Media panel

Prior to the new media panel in DevTools, logging and debug information about video players could be found in chrome://media-internals.

The new Media panel provides an easier way to view events, logs, properties, and a timeline of frame decodes in the same browser tab as the video player itself. You can live view and inspect on potential issues quicker (e.g. why dropped frames are occurring, why JavaScript is interacting with the player in an unexpected way).

Chromium issue: 1018414

Capture node screenshots via Elements panel context menu

You can now capture node screenshots via the context menu in the Elements panel.

For example, you can take a screenshot of the table of content by right clicking the element and select Capture node screenshot.

Capture node screenshots

Chromium issue: 1100253

Issues tab updates

The Issues warning bar on the Console panel is now replaced with a regular message.

Issues in console message

Third-party cookie issues are now hidden by default in the Issues tab. Enable the new Include third-party cookie issues checkbox to view them.

third-party cookie issues checkbox

Chromium issues: 1096481, 1068116, 1080589

Emulate missing local fonts

Open the Rendering tab and use the new Disable local fonts feature to emulate missing local() sources in @font-face rules.

For example, when the font “Rubik” is installed on your device and the @font-face src rule uses it as a local() font, Chrome uses the local font file from your device.

When Disable local fonts is enabled, DevTools ignores the local() fonts and fetches them from the network.

Emulate missing local fonts

Oftentimes, developers and designers use two different copies of the same font during development:

  • A local font for your design tools, and
  • A web font for your code

Disabling local fonts makes it easier for you to:

  • Debug and measure web fonts loading performance and optimization
  • Verify correctness of your CSS @font-face rules
  • Discover any differences between web fonts and their local versions

Chromium issue: 384968

Emulate inactive users

The Idle Detection API allows developers to detect inactive users and react on idle state changes. You can now use DevTools to emulate idle state changes in the Sensors tab for both the user state and the screen state instead of waiting for the actual idle state to change. You can open the Sensors tab from the Drawer.

Emulate inactive users

Chromium issue: 1090802

Emulate prefers-reduced-data

The prefers-reduced-data media query detects if the user prefers being served alternate content that uses less data for the page to be rendered.

You can now use DevTools to emulate the prefers-reduced-data media query.

Emulate prefers-reduced-data

Chromium issue: 1096068

Support for new JavaScript features

DevTools now has better support for some of the latest JavaScript language features:

  • Logical assignment operators - DevTools now supports logical assignment with the new operators &&=, ||=, and ??= in the Console and Sources panels.
  • Pretty-print numeric separators - DevTools now properly pretty-prints the numeric separators in the Sources panel.

Chromium issues: 1086817, 1080569

Lighthouse 6.2 in the Lighthouse panel

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

Unsize image

New audits in Lighthouse 6.2:

  • Avoid long main thread tasks. Reports the longest tasks on the main thread, useful for identifying worst contributors to input delay.
  • Links are crawlable. Check if the href attribute of anchor elements links to an appropriate destination, so the links can be discovered.
  • Unsized image elements - Check if an explicit width and height is set on image elements. Explicit image size can reduce layout shifts and improve CLS.
  • Avoid non-composited animations. Reports non-composited animations that appear janky and reduce CLS.
  • Listens for the unload events. Reports the unload event. Consider using the pagehide or visibilitychange events instead as the unload event does not fire reliably.

Updated audits in Lighthouse 6.2:

  • Remove unused JavaScript. Lighthouse will now enhance the audit if a page has publicly-accessible JavaScript source maps.

Chromium issue: 772558

Deprecation of “other origins” listing in the Service Workers pane

DevTools now provides a link to view the full list of service workers from other origins in a new browser tab - chrome://serviceworker-internals/?devtools.

Previously DevTools displayed a list nested under the Application panel > Service workers pane.

Link to other origins

Chromium issue: 807440

Show coverage summary for filtered items

DevTools now recalculates and displays a summary of coverage information dynamically when filters are applied in the Coverage tab. Previously, the Coverage tab always displayed a summary of all coverage information.

In the example below notice how the summary initially says 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. and then says 57 kB of 604 kB (10%) used so far. 546 kB unused. after CSS filtering has been applied.

Coverage summary for filtered items

Chromium issue: 1061385

New frame details view in Application panel

DevTools now show a detailed view for each frame. Access it by clicking a frame under the Frames menu in the Application panel.

New frame details view in Application panel

Chromium issue: 1093247

Frame details for opened windows

DevTools now displays opened windows / pop-ups under the frame tree as well. The frame details view of the opened windows includes additional security information.

New frame details view in Application panel

Chromium issue: 1107766

Security and isolation information (COEP / COOP)

DevTools now display secure context, Cross-Origin-Embedder-Policy (COEP) and Cross-Origin-Opener-Policy (COOP) in the frame details.

Security and isolation information

More security information will be added to the frame details view soon.

Chromium issue: 1051466

Elements and Network panel updates

Accessible color suggestion in the Styles pane

DevTools now provides color suggestions for low color contrast text.

In the example below, h1 has low contrast text. To fix it, open the color picker of the color property in the Styles pane. After you expand the Contrast ratio section, DevTools provides AA and AAA color suggestions. Click on the suggested color to apply the color.

Chromium issue: 1093227

Reinstate Properties pane in the Elements panel

The Properties pane is back, it was deprecated in Chrome 84. In a future version of DevTools, we are going to improve the workflow for inspecting properties of elements.

Properties pane in the Elements panel

Chromium issue: 1105205, 1116085

Human-readable X-Client-Data header values in the Network panel

When inspecting a network resource in the Network panel, DevTools now formats any X-Client-Data header values in Headers pane as code.

The X-Client-Data HTTP header contains a list of experiment IDs and Chrome flags that are enabled in your browser. The raw header values look like opaque strings since they are base-64-encoded, serialized protocol buffers. To make the contents more transparent to developers, DevTools is now showing the decoded values.

Human-readable `X-Client-Data` header values

Chromium issue: 1103854

Auto-complete custom fonts in the Styles pane

Imported font faces are now added to the list of CSS auto-completion when editing the font-family property in the Styles pane.

In this example, 'Noto Sans' is a custom font installed in the local machine. It is displayed in the CSS completion list. Previously, it was not.

Auto-complete custom fonts

Chromium issue: 1106221

Consistently display resource type in Network panel

DevTools now consistently displays the same resource type as the original network request and appends / Redirect to the Type column value when redirection (status 302) happens.

Previously DevTools changed the type to Other sometimes.

Display redirect resource type

Chromium issue: 997694

Clear buttons in the Elements and Network panels

The filter text boxes in the Styles pane and Network panel, as well as the DOM search text box in the Elements panel, now have Clear buttons. Clicking Clear removes any text that you have input.

Clear buttons in the Elements and Network panels

Chromium issue: 1067184

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!