What's New in DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.