Что нового в 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» .