What's New in DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova

Improved debugging of missing stylesheets

DevTools gets a number of improvements to help you identify and debug issues with missing stylesheets faster:

  • The Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
  • The Sources > Editor now underlines and shows inline error tooltips next to failed @import, url(), and href statements.

Underlined statements with tooltips in the Sources panel.

  • The Console, in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

The Console provides links to the exact lines with problematic statements.

  • The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

  • The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

The Issues panel with links to to sources and requests.

Chromium issues: 1440626, 1442198, 1453611.

Linear timing support in Elements > Styles > Easing Editor

The Easing Editor. Easing Editor in Elements > Styles lets you adjust transition-timing-function and animation-timing-function values with a click. In this version, the Easing Editor. Easing Editor gets the linear timing function support.

To configure linear timings, click the linear picker button. To add a control point, click anywhere on the line. To remove a control point, double-click it. You can also choose one of the presets: linear, elastic, bounce, or emphasized. Watch the video to see the linear adjustment in action.

Chromium issue: 1421241.

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage.

Check out this fiddle to test the feature. Open DevTools, navigate to Application > Storage > Indexed DB, and run the code. DevTools now shows you the buckets and their contents. Select a bucket to view its metadata.

Viewing the metadata of a bucket.

The unified metadata view is now also available for local, session, and cache storage sections.

The new unified metadata view.

Chromium issues: 1448011, 1406017.

Lighthouse 10.3.0

The Lighthouse panel now runs Lighthouse 10.3.0. Most notably, this version adds four new audits that capture various accessibility issues with table headers and captions, input button names, and language mismatches. For example:

A passed table headers check.

See also the full list of changes. To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 772558.

Accessibility: Keyboard commands and improved screen reading

DevTools now supports more shortcuts and fixes issues with screen readers:

  • You can now open the context menu with a keyboard shortcut, for example, Shift+F10 on Windows and many Linux distributions. For MacOS shortcuts, see Alternate pointer actions.
  • Screen reader applications:
    • Won't unnecessarily announce checkbox labels twice.
    • Will announce column header names for sortable columns when you press the "Read column header" shortcut.

The DevTools team expresses gratitude to Yanling Wang and Elorm Coch for landing these improvements.

Chromium issues: 1446482, 1414952.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • The Network panel continues recording network activity even after you've interacted with the timeline (1422552).
  • The Coverage panel now recognizes if there was prerender activation or back/forward cache navigation and prompts you to reload (1393057).
  • You can now navigate the Sources > Breakpoints pane with the keyboard: Arrow up and Arrow down to move and Space to select (1446150).
  • Fixed HAR files uploading and filtering in the Network panel (1450622).
  • Flamechart in the Performance panel now puts small gaps between traces to render them better (1452150).
  • Fixed automatic mapping for files embedded in source maps (1446383).

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 127

Chrome 126

Chrome 125

Chrome 124

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