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

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

Найдите пасхальное яйцо

В честь Дня дураков в этом году команда DevTools спрятала пасхальное яйцо где-то в DevTools.

Чтобы найти его, ищите красочный эмодзи 💫.

Обновления панели элементов

В этой версии внесены несколько обновлений в панель «Элементы» .

Имитация активной страницы в разделе «Элементы > Стили»

Теперь на вкладке «Элементы > Стили» под кнопкой «Переключать состояние элементов» ( :hov ) находится «Эмулировать сфокусированную страницу» . Ранее эту опцию можно было найти только на панели «Рендеринг» .

Если вы переключите фокус со страницы на инструменты разработчика, некоторые элементы наложения автоматически скрываются, если они активируются при переключении на них фокуса. Например, выпадающие списки, меню или средства выбора даты. Параметр «Эмулировать сфокусированную страницу» позволяет отлаживать такой элемент так, как если бы он находился в фокусе.

Сценарий «до» и «после» имитирует сфокусированную страницу на вкладке «Стили».

Проблема с Chromium: 1468393 .

Палитра цветов, часы углов и редактор сглаживания доступны в качестве резервных вариантов в функции var()

Для упрощения редактирования CSS на вкладке «Элементы > Стили» теперь можно использовать «Палитру цвета» , «Часы угла» и «Редактор сглаживания» в качестве резервных вариантов для функции var() .

Инструменты Color Picker, Angle Clock и Easing Editor для отображения результатов до и после рендеринга используются в качестве резервных вариантов в функции var().

Проблема Chromium: 1520417 .

Инструмент CSS length устарел.

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

Теперь вы не можете перетаскивать курсор для изменения значения или выбора типа единицы измерения из выпадающего меню. Вместо этого дважды щелкните значение и введите новое.

Чтобы снова включить инструмент определения длины, очистите в разделе «Настройки» > «Эксперименты» > «Устаревать инструмент создания CSS-стилей <length>» на вкладке «Стили» .

Если вы по-прежнему хотите использовать этот инструмент, команда DevTools хотела бы узнать ваше мнение и то, как инструмент определения длины помогает вам в работе. Пожалуйста, оставляйте отзывы в репозитории crbug/1522657 .

Эксперимент по снижению рисков отключен.

Всплывающее окно для выбранного результата поиска в разделе «Производительность > Основной трек»

Для упрощения поиска, диаграмма пламени в разделе «Производительность > Основной трек» теперь отображает всплывающее окно поверх соответствующего события при перелистывании результатов поиска.

На скриншоте «до» и «после» поверх выбранного результата поиска отображается всплывающее окно.

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

Обновления сетевой панели

В этой версии внесены некоторые обновления в панель «Сеть» .

Кнопка «Очистить» и фильтр поиска на вкладке «Сеть» > «Поток событий»

На вкладке Сеть > Поток событий отображается:

  • Кнопка «Очистить» , которая удаляет захваченные события из таблицы.
  • Поисковый фильтр, распознающий регулярные выражения.

Фотографии до и после добавления кнопки «Очистить» и фильтра поиска.

Команда DevTools хотела бы поблагодарить Чарльза Вазака за внедрение этой функции.

Кроме того, вкладка EventStream теперь также захватывает события, отправляемые серверами через fetch/XHR, а не только через API EventSource . Попробуйте это на этой демонстрационной странице .

Номер выпуска Chromium: 1488863 , 40659493 .

Всплывающие подсказки с указанием причин исключения сторонних файлов cookie в разделе «Сеть > Файлы cookie».

На вкладке «Сеть > Файлы cookie» теперь отображаются всплывающие подсказки с указанием причин исключения рядом с файлами cookie, которые в противном случае должны были быть заблокированы в рамках поэтапного прекращения использования сторонних файлов cookie .

На изображениях «до» и «после» отображается всплывающая подсказка с указанием причины исключения для стороннего файла cookie.

Использование сторонних файлов cookie может быть разрешено по следующим причинам:

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

Включать и отключать все точки останова в исходном коде.

В разделе «Источники > Точки останова» в выпадающее меню снова добавлены параметры «Включить» и «Отключить все точки останова» . Ранее эти параметры отсутствовали в обновленном интерфейсе точек останова .

Чтобы включить или отключить все точки останова, щелкните правой кнопкой мыши точку останова в разделе «Источники» > «Точки останова» и выберите соответствующий параметр.

Фотографии «до» и «после» возвращения опций включения и отключения.

Проблема Chromium: 1522037 .

Просмотр загруженных скриптов в инструментах разработчика для Node.js

В инструментах разработчика для Node.js загруженные скрипты теперь отображаются в дереве навигации в разделе «Источники > Скрипты» .

Фотографии до и после добавления вкладки «Скрипты» с деревом загруженных скриптов.

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

Маяк 11.5.0

В панели Lighthouse теперь используется Lighthouse 11.5.0. Полный список изменений смотрите здесь.

Среди существенных изменений — новый аудит, который оценивает первопричины изменений планировки. Этот аудит заменяет аудит элементов, затронутых изменениями планировки, который содержал только перечень элементов.

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

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

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

Доступность

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

  • Программы чтения с экрана теперь объявляют:
    • Ссылка «Узнать больше» находится рядом с типами селекторов на панели «Рекордер» .
    • Если ни один из экспериментов не соответствует фильтру в > Настройки > Эксперименты .
    • Подтверждение действия при удалении, подтверждении или восстановлении ярлыка в > Ярлыки .
  • Теперь таблица в настройках Местоположения корректно отображается как таблица для инструментов обеспечения доступности.

Проблемы Chromium: 1516957 , 324282443 , 324467508 , 324930007 .

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

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

  • Шрифты в инструментах разработчика обновлены в соответствии с Chrome ( 1523538 ).
  • Производительность : Исправлено отображение скриншота при наведении курсора на временную шкалу ( 1519469 ).
  • Источники : Межстрочный интервал в редакторе увеличен для улучшения читаемости кода ( 1523640 ).
  • Сеть > Ответы : Исправлены различные проблемы отображения с разными форматами и кодировками ( 1523128 , 1509336 , 1523128 , 41481944 , 1509336 ).

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

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

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

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

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

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