Что нового в DevTools (Chrome 116)

София Емельянова
Sofia Emelianova
GitHub

Улучшена отладка отсутствующих таблиц стилей.

DevTools получил ряд улучшений, которые помогут вам быстрее выявлять и устранять проблемы с отсутствующими таблицами стилей:

  • В дереве «Источники > Страницы» теперь отображаются только успешно развернутые и загруженные таблицы стилей, чтобы минимизировать путаницу.
  • В разделе «Источники» > «Редактор» теперь подчеркиваются и отображаются встроенные всплывающие подсказки об ошибках рядом с неудачными операторами @import , url() и href .

Подчеркнутые утверждения со всплывающими подсказками на панели «Источники».

  • Консоль , помимо ссылок на неудачные запросы, теперь предоставляет ссылки на точную строку, которая ссылается на таблицу стилей, которую не удалось загрузить.

Консоль предоставляет ссылки на точные строки с проблемными утверждениями.

  • Панель «Сеть» последовательно заполняет столбец «Инициатор» ссылками на ту строку, которая ссылается на таблицу стилей, которую не удалось загрузить.

  • На панели «Проблемы» перечислены все проблемы с загрузкой таблиц стилей, включая неработающие URL-адреса, неудачные запросы и неуместные операторы @import .

Панель «Проблемы» со ссылками на источники и запросы.

Проблемы с хромом: 1440626 , 1442198 , 1453611 .

Поддержка линейного времени в разделе «Элементы» > «Стили» > «Редактор замедления».

Упрощающий редактор. Редактор замедления в разделе «Элементы» > «Стили» позволяет одним щелчком мыши настраивать значения transition-timing-function и animation-timing-function . В этой версии Упрощающий редактор. Редактор Easing получает поддержку функции линейного времени.

Чтобы настроить линейные тайминги, нажмите кнопку линейного выбора. Чтобы добавить контрольную точку, щелкните в любом месте линии. Чтобы удалить контрольную точку, дважды щелкните ее. Вы также можете выбрать один из пресетов: linear , elastic , bounce или emphasized . Посмотрите видео, чтобы увидеть линейную регулировку в действии.

Проблема с хромом: 1421241 .

Поддержка сегментов хранения и просмотр метаданных

В разделе «Приложение» > «Хранилище» появилась поддержка сегментов хранилища . Сегменты хранения независимы друг от друга, поэтому вы можете указать приоритеты вытеснения для фрагментов данных и убедиться, что наиболее ценные данные не будут удалены. В каждом сегменте хранилища могут храниться данные, связанные с установленными API-интерфейсами хранилища, такими как IndexedDB и CacheStorage .

Проверьте эту скрипту , чтобы протестировать эту функцию. Откройте DevTools, выберите Приложение > Хранилище > Индексированная БД и запустите код. DevTools теперь показывает сегменты и их содержимое. Выберите сегмент, чтобы просмотреть его метаданные.

Просмотр метаданных сегмента.

Унифицированное представление метаданных теперь также доступно для разделов локального, сеансового и кэш-хранилища.

Новое унифицированное представление метаданных.

Проблемы с хромом: 1448011 , 1406017 .

Маяк 10.3.0

На панели «Маяк» теперь работает Lighthouse 10.3.0. В частности, в этой версии добавлены четыре новых аудита, которые фиксируют различные проблемы доступности с заголовками и заголовками таблиц , названиями кнопок ввода и несоответствиями языков . Например:

Пройдена проверка заголовков таблиц.

См. также полный список изменений . Чтобы узнать основы использования панели Lighthouse в DevTools, см. Lighthouse: оптимизация скорости веб-сайта .

Проблема с хромом: 772558 .

Специальные возможности: команды с клавиатуры и улучшенное чтение с экрана.

DevTools теперь поддерживает больше ярлыков и устраняет проблемы с программами чтения с экрана:

  • Теперь вы можете открыть контекстное меню с помощью сочетания клавиш, например Shift + F10 в Windows и многих дистрибутивах Linux. Информацию о ярлыках MacOS см. в разделе Альтернативные действия с указателем .
  • Приложения для чтения с экрана:
    • Не буду дважды без необходимости объявлять метки флажков.
    • Будет объявлять имена заголовков столбцов для сортируемых столбцов, когда вы нажимаете ярлык «Читать заголовок столбца».

Команда DevTools выражает благодарность Янлингу Вану и Элорму Коху за внедрение этих улучшений.

Проблемы с хромом: 1446482 , 1414952 .

Разное

Вот некоторые примечательные исправления и улучшения в этом выпуске:

  • Панель «Сеть» продолжает записывать сетевую активность даже после того, как вы взаимодействовали с временной шкалой ( 1422552 ).
  • Панель «Покрытие» теперь распознает, была ли активация предварительной визуализации или навигация по кэшу вперед/назад, и предлагает перезагрузить ( 1393057 ).
  • Теперь вы можете перемещаться по панели «Источники» > «Точки останова» с помощью клавиатуры: стрелки вверх и стрелки вниз для перемещения и пробел для выбора ( 1446150 ).
  • Исправлена ​​загрузка и фильтрация HAR-файлов на панели «Сеть» ( 1450622 ).
  • Flamechart на панели «Производительность» теперь размещает небольшие промежутки между трассами для их лучшей визуализации ( 1452150 ).
  • Исправлено автоматическое сопоставление файлов, встроенных в исходные карты ( 1446383 ).

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API-интерфейсы веб-платформы и помогают находить проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие параметры, чтобы обсудить новые функции, обновления или что-либо еще, связанное с DevTools.

Что нового в DevTools

Список всего, что было описано в серии «Что нового в DevTools» .

,

София Эмельянови
Sofia Emelianova
GitHub

Улучшенная отладка пропущенных таблиц стилей

Devtools получает ряд улучшений, чтобы помочь вам быстрее выявлять и отлаживать проблемы с пропущенными таблицами стилей:

  • В источниках > Page Tree теперь показано только успешно развернутые и загруженные таблицы стилей, чтобы минимизировать путаницу.
  • Источники > Редактор теперь подчеркивает и показывает встроенные операторы инструментов по ошибкам рядом с операторами @import , url() и href .

Подчеркнутые операторы с подсказками на панели источников.

  • Консоль , в дополнение к ссылкам на неудачные запросы, теперь предоставляет ссылки на точную строку, которая ссылается на таблицу стилей, которая не загрузилась.

Консоль предоставляет ссылки на точные строки с проблемными утверждениями.

  • Сетевая панель последовательно зажигает столбец инициатора ссылками на точную линию, которая ссылается на таблицу стилей, которая не загружалась.

  • В панели «Проблемы» перечислены все проблемы с загрузкой стилей, включая разбитые URL -адреса, неудачные запросы и неуместные операторы @import .

Панель проблем со ссылками на источники и запросы.

Проблемы с хромом: 1440626 , 1442198 , 1453611 .

Линейная поддержка времени в элементах> Стили> Редактор смягчения

Редактор ослабления. Редактор Ealeing in Elements > Styles позволяет настроить значения функции-функции transition-timing-function и animation-timing-function с помощью щелчка. В этой версии Редактор ослабления. Редактор Ealeing получает поддержку линейной функции времени.

Чтобы настроить линейные времена, нажмите кнопку «Линейный сборщик». Чтобы добавить контрольную точку, нажмите в любом месте линии. Чтобы удалить точку управления, дважды щелкните ее. Вы также можете выбрать один из пресетов: linear , elastic , bounce или emphasized . Посмотрите видео, чтобы увидеть линейную регулировку в действии.

Выпуск хрома: 1421241 .

Поддержка ведра для хранения и просмотр метаданных

В разделе «Приложение» > «Хранение» получает поддержку ведра для хранения . Ведения хранилища не зависят друг от друга, поэтому вы можете указать приоритету выселения для срезах данных и убедиться, что наиболее ценные данные не удаляются. Каждое ведро для хранения может хранить данные, связанные с установленными API хранилища, такие как IndexedDB и Cachestorage .

Проверьте эту скрипку , чтобы проверить функцию. Откройте Devtools, перейдите к приложению > Storage > Indexted DB и запустите код. Devtools теперь показывает вам ведра и их содержимое. Выберите ведро, чтобы просмотреть его метаданные.

Просмотр метаданных ведра.

Просмотр Unified Metadata теперь также доступен для разделов локального, сеанса и хранения кэша.

Новая единая вида метаданных.

Проблемы хрома: 1448011 , 1406017 .

Маяк 10.3.0

Панель маяка теперь работает на маяке 10.3.0. В частности, эта версия добавляет четыре новых аудита, которые отражают различные проблемы доступности с заголовками таблиц и подписей , именами кнопок ввода и несоответствиями языка . Например:

Проверка заголовков таблицы.

Смотрите также полный список изменений . Чтобы узнать основы использования панели маяка в Devtools, см. Lighthouse: оптимизируйте скорость веб -сайта .

Выпуск хрома: 772558 .

Доступность: команды клавиатуры и улучшенное чтение экрана

DevTools теперь поддерживает больше ярлыков и исправляет проблемы с читателями экрана:

  • Теперь вы можете открыть контекстное меню с сочетанием клавиш, например, Shift + F10 в Windows и многих распределениях Linux. Для ярлыков macOS см. Альтернативные действия .
  • Приложения для чтения экрана:
    • Не будет излишне объявить метки флажков дважды.
    • Объявит имена заголовок столбцов для сортируемых столбцов, когда вы нажимаете ярлык «Читать заголовок».

Команда Devtools выражает благодарность Янлингу Ван и Элорму Коху за привлечение этих улучшений.

Проблемы хрома: 1446482 , 1414952 .

Разные основные моменты

Это некоторые примечательные исправления и улучшения в этом выпуске:

  • Сетевая панель продолжает записывать сетевую деятельность даже после того, как вы взаимодействуете с временной шкалой ( 1422552 ).
  • Панель покрытия теперь распознает, была ли прерандерная активация или навигация на кеш -кеша, и побуждает вас перезагрузить ( 1393057 ).
  • Теперь вы можете ориентироваться в панели «Источники» > «Точки останова» с клавиатурой: стрелка вверх и стрелка вниз , чтобы перемещаться и пространство для выбора ( 1446150 ).
  • Исправлена ​​HAR -файлы Загрузка и фильтрация на сетевой панели ( 1450622 ).
  • FlameChart на панели Performance теперь ставит небольшие промежутки между следами, чтобы сделать их лучше ( 1452150 ).
  • Исправлено автоматическое отображение для файлов, встроенных в исходные карты ( 1446383 ).

Скачать каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям Devtools, позволяют протестировать передовые API веб-платформы и помочь вам найти проблемы на вашем сайте, прежде чем ваши пользователи!

Свяжитесь с командой Chrome Devtools

Используйте следующие варианты, чтобы обсудить новые функции, обновления или что -либо еще, связанное с DevTools.

Что нового в Devtools

Список всего, что было опубликовано в серии «Что нового в Devtools» .

,

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

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 . Например:

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.

,

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

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 . Например:

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.