Эта страница переведена с помощью Cloud Translation API.

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

Sofia Emelianova

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

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.

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