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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 1479986 .

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

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

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

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

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

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

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

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

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

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

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

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

Кроме того, на панели «Проблемы» сообщается о нарушениях CSP.

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

Маяк 11.3.0

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

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

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

Доступность

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

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

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

Разное

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

  • Производительность . Если запись не удалась, теперь у вас есть возможность загрузить необработанные события трассировки и попытаться выяснить, что пошло не так ( коммит ).
  • Ярлык «Показать консоль» ( 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.

Что нового в DevTools

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