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

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

Оптимизированная панель фильтров на панели «Сеть»

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

Соответствующий эксперимент был включён по умолчанию в этой версии, но будет отменён. Вы можете отслеживать ход выполнения на сайте crbug.com/1523150 .

Новая панель фильтров содержит два раскрывающихся меню: одно для выбора типов запросов, а другое — для скрытия URL-адресов данных и расширений или отображения только заблокированных файлов cookie и запросов, а также сторонних запросов. Оба меню поддерживают множественный выбор.

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

До и после оптимизации панели фильтров на панели «Сеть».

Не стесняйтесь оставлять свои отзывы об этой функции на сайте crbug.com/1500573 .

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

Улучшения элементов

Поддержка @font-palette-values

Панель «Элементы» теперь поддерживает CSS-правило @font-palette-values . Оно позволяет настраивать значения по умолчанию для свойства font-palette .

В разделе «Стили» щелкните значение свойства font-palette , и DevTools перенесет вас в специальный раздел @font-palette-values где вы сможете редактировать пользовательские значения.

Раздел @font-palette-values ​​в стилях.

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

Поддерживаемый случай: пользовательское свойство как резервное для другого пользовательского свойства.

Элементы > Стили теперь разрешают пользовательское свойство, являющееся резервным вариантом другого пользовательского свойства .

До и после разрешения пользовательского свойства как резервного варианта другого пользовательского свойства.

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

Улучшенная поддержка исходной карты

> Эксперименты > Разрешать имена переменных в выражениях с использованием исходных карт включен по умолчанию.

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

Более подробную информацию см. в соответствующем RFC .

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

Улучшения панели производительности

Трек расширенного взаимодействия

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

До и после добавления усов на трек взаимодействий.

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

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

Расширенная фильтрация на вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий»

Вкладки «Снизу вверх» , «Дерево вызовов» и «Журнал событий» на панели «Производительность» получили три новые кнопки для расширенной фильтрации:

  • Учитывать регистр .
  • Регулярное выражение .
  • Совпадение целого слова .

Три новые кнопки для расширенной фильтрации.

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

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

Маркеры отступов на панели «Источники»

Для вашего удобства редактор на панели «Источники» теперь отмечает отступы в блоках кода вертикальными линиями.

До и после маркировки отступов в блоках кода вертикальными линиями.

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

Полезные подсказки для переопределенных заголовков и содержимого на панели «Сеть»

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

Новые подсказки рядом со значком фиолетовой точки на вкладках «Заголовки» и «Ответы».

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

Новые параметры меню команд для добавления и удаления шаблонов блокировки запросов

Теперь вы можете вводить команды для добавления или удаления шаблонов блокировки сетевых запросов в меню команд .

До и после добавления новых команд для добавления или удаления шаблонов блокировки сети.

Команда «Добавить» открывает диалоговое окно для указания шаблона, а команда «Удалить» удаляет все шаблоны, не открывая панель блокировки сетевых запросов .

Эксперимент по нарушениям CSP отменен

Экспериментальная вкладка нарушений CSP , представленная в версии 89, была удалена как ненужная.

Чтобы просмотреть подробную информацию о CSP, перейдите в раздел Приложение > Фреймы > Политика безопасности контента (CSP) .

Политика безопасности контента на панели приложений.

Кроме того, комиссия по рассмотрению вопросов сообщает о нарушениях CSP.

Политика безопасности контента на панели приложений.

Маяк 11.3.0

Панель Lighthouse теперь работает на базе Lighthouse 11.3.0. Полный список изменений см. здесь. Среди заметных изменений — возможность создавать отчёты по страницам с ошибкой 404.

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

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

Доступность

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

  • В разделе «Сеть» > «Полезная нагрузка» теперь можно с помощью клавиши Tab выбрать кнопки просмотра исходного кода и просмотра URL-кодированных кнопок, а затем нажать Enter или пробел для вызова соответствующего действия.
  • В консоли , чтобы избежать путаницы, ссылки, ведущие к скриптам, которые больше не доступны отладчику , теперь выделены серым цветом и по ним нельзя щелкнуть.
  • В навигационных деревьях, таких как дерево в Источниках > Страница , клавиша Enter теперь разворачивает и сворачивает узлы с дочерними элементами.

Проблемы с Chromium: 1338391 , 1500662 , 1420362 .

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

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

  • Производительность . Если запись не удалась, теперь у вас есть возможность загрузить необработанные события трассировки и попытаться выяснить, что пошло не так ( коммит ).
  • Сочетание клавиш «Показать консоль» ( Ctrl + ` для Mac, Ctrl + + для Windows и Linux) теперь не только открывает консоль , но и закрывает ее при повторном нажатии.
  • Ресурсы для разработчиков . Исправлена ​​ошибка, препятствовавшая отправке сообщений о ресурсах CSS и связанных с ними проблемах ( 1420362 ).
  • Элементы :
    • Исправлена ​​ошибка проверки элементов в фреймах ( 1453375 ).
    • Вычислено . Исправлена ​​ошибка, препятствовавшая отображению значений по умолчанию ( 1499882 ).
    • Поиск . Исправлена ​​ошибка, препятствовавшая подсчёту количества совпадений для коротких запросов из одного или двух символов ( 1416457 ).
  • Консоль . Теперь корректно анализирует регулярные выражения, заканчивающиеся экранированным символом в поле «Фильтр» ( 1346936 ).
  • Настройки > Рабочее пространство . Исправлена ​​ошибка, препятствовавшая добавлению исключенной папки ( 1503580 ).
  • Сеть > Предварительный просмотр . Теперь отображает изображения с data: URI ( 1381791 ).
  • Память . Добавлены корректные кнопки и сохранения на панель действий ( 1275407 ).

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

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

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

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

Что нового в DevTools

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