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

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

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

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

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

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

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

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

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

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

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

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

Панель Elements теперь поддерживает @font-palette-values ​​CSS at-rule. Это позволяет настраивать значения по умолчанию свойства font-palette .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом: 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 ).
  • Элементы :
    • Исправлена ​​ошибка с проверкой элементов в iframe ( 1453375 ).
    • Вычислено . Исправлена ​​ошибка, из-за которой значения по умолчанию не отображались ( 1499882 ).
    • Поиск . Исправлена ​​ошибка, из-за которой не подсчитывалось количество совпадений для коротких запросов из одного или двух символов ( 1416457 ).
  • Консоль . Теперь правильно анализирует регулярные выражения, которые заканчиваются экранированным символом в поле Фильтр ( 1346936 ).
  • Настройки > Рабочее пространство . Исправлена ​​ошибка, которая не позволяла добавить исключенную папку ( 1503580 ).
  • Сеть > Предварительный просмотр . Теперь отображает изображения с data: URI ( 1381791 ).
  • Память . Добавлены правильные кнопки и загрузки на панель действий ( 1275407 ).

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

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

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

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

Что нового в DevTools

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