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

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

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

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

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

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

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

В консоли отображаются ссылки на строки, содержащие проблемные утверждения.

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

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

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

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

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

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

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

Выпуск Chromium: 1421241 .

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

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

Проверьте эту функцию в примере на jsfiddle . Откройте DevTools, перейдите в Application > Storage > Indexed DB и запустите код. Теперь DevTools отображает корзины и их содержимое. Выберите корзину, чтобы просмотреть ее метаданные.

Просмотр метаданных хранилища.

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

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

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

Маяк 10.3.0

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

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

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

Номер выпуска Chromium: 772558 .

Доступность: сочетания клавиш и улучшенная функция чтения с экрана.

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

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

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

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

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

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

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

Что нового в инструментах разработчика

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