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

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

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

Чтобы отпраздновать День дурака в этом году, команда DevTools спрятала пасхальное яйцо где-то в DevTools.

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

Обновления панели «Элементы»

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

Эмулируйте выделенную страницу в разделе «Элементы» > «Стили».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 1488863 , 40659493 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11.5.0

На панели «Маяк» теперь работает Lighthouse 11.5.0. См. полный список изменений .

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

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

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

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

Доступность

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

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

Проблемы с хромом: 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» .