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

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

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

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

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

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

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

Эмулируйте выделенную страницу в Элементах > Стили

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

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

До и после эмуляции выделенной страницы на вкладке «Стили».

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

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

Для упрощения редактирования CSS вкладка «Элементы» > «Стили» теперь позволяет использовать Color Picker , Angle Clock и Easing Editor в резервных вариантах var() .

Инструменты «Выбор цвета», «Часы углов» и «Редактор замедления» до и после рендеринга в резервных вариантах var().

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

Инструмент длины CSS устарел

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

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

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

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

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

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

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

До и после показа всплывающего окна над выбранным результатом поиска.

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

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

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

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

Вкладка Network > EventStream получает:

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

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

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

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

Проблема с хромом: 1488863 , 40659493 .

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

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

До и после показа подсказки с причиной исключения стороннего файла cookie.

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

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

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

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

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

До и после возвращения опций включения и выключения.

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

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

DevTools for Node.js теперь отображает загруженные скрипты в дереве навигации в разделе Источники > Скрипты .

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

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

Маяк 11.5.0

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

Среди заметных изменений — новый аудит, оценивающий первопричины смещений макета. Он заменяет аудит «Layout-shift-elements», который перечислял только элементы, затронутые смещением макета.

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

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

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

Доступность

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

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

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

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

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

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

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

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

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

Что нового в DevTools

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