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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 10.3.0

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

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

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

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

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

• Теперь вы можете открыть контекстное меню с помощью сочетания клавиш, например, 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.

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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