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

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

Упрощенная панель фильтров в панели «Сеть».

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

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

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

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

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

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

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

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

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

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

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

Раздел @font-palette-values ​​в разделе Styles.

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

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

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

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

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

Улучшена поддержка карт исходного кода.

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

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

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

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

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

Расширенные возможности взаимодействия (трек)

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

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

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

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

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

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

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

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

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

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

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

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

Блоки кода с отступами, обозначенные вертикальными линиями, содержат разметку "до" и "после".

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

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

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

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

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

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

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

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

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

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

Экспериментальная вкладка «Нарушения CSP» , появившаяся в версии 89, была удалена как избыточная.

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

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

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

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

Маяк 11.3.0

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

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

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

Доступность

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

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

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

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

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

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

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

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

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

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

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

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