Google is committed to advancing racial equity for Black communities. See how.

What's New In DevTools (Chrome 83)

Emulate vision deficiencies

Open the Rendering tab and use the new Emulate vision deficiencies feature to get a better idea of how people with different types of vision deficiencies experience your site.

Emulating blurred vision.
Emulating blurred vision.

DevTools can emulate blurred vision and the following types of color vision deficiencies:

  • Protanopia: the inability to perceive any red light.
  • Deuteranopia: the inability to perceive any green light.
  • Tritanopia: the inability to perceive any blue light.
  • Achromatopsia: the inability to perceive any color except for shades of grey (extremely rare).

Less extreme versions of these color vision deficiencies exist, and in fact they are more common. For example, protanomaly is a reduced sensitivity to red light (as opposed to protanopia, which is the complete inability to perceive red light). However, these “-omaly” vision deficiencies are not as clearly defined: every person with such a vision deficiency is different and might see things differently (being able to perceive more/less of the relevant colors).

By designing for the more extreme simulations in DevTools, your web apps are guaranteed to be accessible to people with protanomaly, deuteranomaly, tritanomaly, and achromatomaly as well.

Send feedback to Chromium issue #1003700.

Emulate locales

You can now emulate locales by setting a location in Sensors > Location. Open the Command Menu and type Sensors to access the Sensors tab. After performing these actions DevTools modifies the current default locale, affecting the following:

  • Intl.* APIs, e.g. new Intl.NumberFormat().resolvedOptions().locale
  • other locale-aware JavaScript APIs such as String.prototype.localeCompare and *.prototype.toLocaleString, e.g. 123_456..toLocaleString()
  • DOM APIs such as navigator.language and navigator.languages
  • the Accept-Language HTTP request header

Check out Locale-dependent code example to try it yourself.

Send feedback to Chromium issue #1051822.

Cross-Origin Embedder Policy (COEP) debugging

The Network panel now provides Cross-Origin Embedder Policy debugging information.

The Status column now provides a quick explanation of why a request was blocked as well as a link to view that request's headers for further debugging:

Blocked requests in the Status column

The Response Headers section of the Headers tab provides more guidance on how to resolve the issues:

More guidance in the Response Headers section

Send feedback to Chromium issue #1051466.

New icons for breakpoints, conditional breakpoints, and logpoints

The Sources panel has new icons for breakpoints, conditional breakpoints, and logpoints:

The motivation for the new icons was to make the UI more consistent with other GUI debugging tools (which usually color breakpoints red) and to make it easier to distinguish between the 3 features at a glance.

Send feedback to Chromium issue #1041830.

Use the new cookie-path filter keyword in the Network panel to focus on the network requests that set a specific cookie path.

Check out Filter requests by properties to discover more special keywords like cookie-path.

Dock to left from the Command Menu

Open the Command Menu and run the Dock to left command to move DevTools to the left of your viewport.

DevTools docked to the left of the viewport

Send feedback to Chromium issue #1011679.

The Settings option in the Main Menu has moved

The option for opening Settings from the Main Menu can now be found under More Tools.

Main Menu > More Tools > Settings

Send feedback to Chromium issue #1050855.

The Audits panel is now the Lighthouse panel

The DevTools and Lighthouse teams frequently got feedback from web developers that they would hear that it's possible to run Lighthouse from DevTools, but when they went to try it out they couldn't find the "Lighthouse" panel, so the Audits panel is now the Lighthouse panel.

The Lighthouse panel

Delete all Local Overrides in a folder

After setting up Local Overrides you can now right-click a folder and select the new Delete all overrides option to delete all Local Overrides in that folder.

Delete all overrides

Send feedback to Chromium issue #1016501.

Updated Long tasks UI

A Long Task is JavaScript code that monopolizes the main thread for a long time, causing a web page to freeze.

You've been able to visualize Long Tasks in the Performance panel for a while now, but in Chrome 83 the Long Task visualization UI in the Performance panel has been updated. The Long Task portion of a task is now colored with a striped red background.

The new Long Task UI

Send feedback to Chromium issue #1054447.

Maskable icon support in the Manifest pane

Android Oreo introduced adaptive icons, which display app icons in a variety of shapes across different device models. Maskable icons are a new icon format that support adaptive icons, which enable you to ensure that your PWA icon looks good on devices that support the maskable icons standard.

Enable the new Show only the minimum safe area for maskable icons checkbox in the Manifest pane to check that your maskable icon will look good on Android Oreo devices. Check out Are my current icons ready? to learn more.

The "Show only the minimum safe area for maskable icons" checkbox

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 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!