What's New in DevTools (Chrome 119)

Sofia Emelianova
Sofia Emelianova

Improved @property section in Elements > Styles

Editable @property rule

You can now edit the @property CSS at-rule in the corresponding section in the Elements > Styles pane.

The before and after making the property rule editable.

Chromium issue: 1471123.

Issues with invalid @property rules are reported

The Issues tab now reports issues with invalid declarations in @property rules.

An issues with the property rule reported in the Issues tab.

Chromium issue: 1473283.

Updated list of devices to emulate

The user agent strings in Settings. Settings > Devices has been updated to reflect the average usage of browsers and operating systems. You can now emulate more of the up-to-date devices in device mode.

The before and after updating the device list.

Chromium issue: 1479733.

Pretty-print inline JSON in script tags in Sources

The Sources panel now supports pretty-printing inline JSON in <script> HTML tags for easier debugging.

The before and after pretty-printing inline JSON in the script tag.

Chromium issues: 406900, 1473875.

Autocomplete private fields in Console

You can now autocomplete private class fields when evaluating them outside the class scope in the Console.

The before and after supporting autocompletion for private class field outside of class scope.

Chromium issues: 1483848, 1381806.

Lighthouse 11.1.0

The Lighthouse panel now runs Lighthouse 11.1.0. See the full list of changes.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issues: 772558.

Accessibility improvements

Screen readers will now read out the following:

  • Warnings and errors in the Console.
  • The text in the Do you trust this code? dialog when pasting code to Console or Sources.

Additionally, the Application panel fixed contrast issues with links in high contrast mode.

Chromium issues: 1485257, 1486643, 1485263.

Web SQL deprecation

The Application > Web SQL section will be removed in Chrome 123 because the Web SQL Database API isn't maintained anymore. This version adds a warning to the section about the upcoming removal.

The Web SQL deprecation warning.

For more information, see Deprecating and removing Web SQL.

Chromium issues: 1485966.

Screenshot aspect ratio validation in Application > Manifest

The Application > Manifest section now checks if your web app's screenshots with the same form factor (wide or narrow) have the same aspect ratio.

A warning on the incorrect aspect ratio of screenshots with the same form factor.

For more information, see Debug Progressive Web Apps and Add a web app manifest.

The DevTools team expresses gratitude to Alexey Rodionov for landing this change and other manifest warning improvements in the previous version.

Chromium issue: 1476656.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Elements:
    • Animation timing function swatches are not shown for longhand CSS properties under the expandable shorthand ones (1149182).
    • The autocomplete for contain-intrinsic-* now doesn't provide the incorrect single auto value because it should be auto <length> (1480415).
    • Support for deprecated and invalid -webkit-* properties has been removed (1086089, 1030765).
  • Breakpoints: Fixed the bug with disappearing breakpoint editing dialog when the breakpoint type is changed (1485782).
  • Performance:
    • The color parsing error during performance recording has been fixed (1480205).
    • Fixed the bug with LCP not showing in the Timings track (1487136).
  • Network: The Set cookies column now shows the correct number of cookies that are set, excluding blocked (1486903).
  • DevTools extensions now load after navigation to a non-blocked host (1476264).
  • Fixed the bug with incorrect script execution context for extensions (1275331).

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