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

Sofia Emelianova

Улучшения сетевой панели

Переопределять веб-контент локально еще быстрее

Функция локального переопределения теперь оптимизирована, поэтому вы можете легко имитировать заголовки ответов и веб-содержимое удаленных ресурсов с панели «Сеть», не имея к ним доступа.

Чтобы переопределить веб-содержимое, откройте панель «Сеть» , щелкните запрос правой кнопкой мыши и выберите «Переопределить содержимое» .

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

После настройки переопределений DevTools перенаправит вас в раздел «Источники» > «Переопределения» > «Редактор», чтобы вы могли переопределить веб-контент .

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

Проблемы с хромом: 1465785 , 1470532 , 1469359 .

Переопределить содержимое XHR и запросы на получение

Теперь вы можете переопределить содержимое XHR и получать запросы в дополнение к заголовкам ответов. С помощью таких переопределений вы можете имитировать ответы API для отладки вашей веб-страницы, даже если ваш сервер и API еще не готовы.

DevTools в настоящее время поддерживает переопределение содержимого для следующих типов запросов: изображения (например, avif, png), шрифты, выборка и XHR, сценарии (css и js) и документы (html). DevTools теперь неактивен для параметра «Переопределить содержимое» для неподдерживаемых типов.

Проблемы с хромом: 792101 , 1469776 .

Скрыть запросы на расширение Chrome

Чтобы помочь вам сосредоточиться на написанном вами коде и отфильтровать ненужные запросы, отправленные расширениями, которые вы, возможно, установили в Chrome, на панели «Сеть» появился новый фильтр.

Чтобы отфильтровать все запросы, отправленные на URL-адреса chrome-extension:// , установите флажок Скрыть URL-адреса расширений .

Проблемы с хромом: 1257885 , 1458803 .

Удобочитаемые коды состояния HTTP

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

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

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

Симпатичные ответы для подтипов JSON

Вкладка «Ответ» для запроса с подтипом MIME application/[subtype]+json (например, ld+json , hal+json и другие) теперь корректно анализирует ответ и позволяет его оформить.

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

Производительность: просмотрите изменения приоритета выборки для сетевых событий.

На панели «Производительность» теперь отображаются два поля приоритета в сводке события на дорожке сети : начальный приоритет и (конечный) приоритет , а не только один приоритет . С помощью этого дополнительного поля вы теперь можете увидеть, изменился ли приоритет загрузки события, и настроить порядок загрузок. Дополнительные сведения см. в разделе Оптимизация загрузки ресурсов с помощью Fetch Priority API .

Кроме того, ту же информацию можно найти в столбце «Приоритет» на панели «Сеть» с помощью кнопки Включена настройка больших строк запроса .

Проблемы с хромом: 1463901 , 1380964 .

Настройки исходного кода включены по умолчанию: свертывание кода и автоматическое раскрытие файлов.

Настройки > Настройки > Опция свертывания кода теперь включена по умолчанию. Эта опция позволяет складывать блоки кода.

Чтобы свернуть блок кода, наведите указатель мыши на номер строки рядом с началом блока и нажмите кнопку значок свернуть. Нажмите {...} чтобы снова развернуть блок.

Более того, Настройки > Настройки > Автоматическое отображение файлов на боковой панели теперь также включено по умолчанию.

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

Проблемы с хромом: 1459193 , 1336599 .

Улучшена отладка проблем со сторонними файлами cookie.

Стремясь помочь создать более конфиденциальную сеть и параллельно с обновлениями других браузеров , Chrome представил инициативу Privacy Sandbox . Эта инициатива фундаментально повышает конфиденциальность в Интернете и может поддерживать здоровую сеть с рекламной поддержкой, что сделает сторонние файлы cookie устаревшими. Privacy Sandbox имеет график поэтапного вывода из эксплуатации , что позволяет вам комфортно адаптироваться к изменениям.

Вы уже можете протестировать, как ведет себя Chrome после прекращения использования сторонних файлов cookie. Для этого запустите Chrome из командной строки с флагом --test-third-party-cookies-phaseout . Чтобы узнать, что делает этот флаг, см. Отладка файлов cookie .

Независимо от того, как вы запускаете Chrome (с флагом или без него), на вкладке «Проблемы» теперь отображается значок Флажок « Включить проблемы со сторонними файлами cookie» включен по умолчанию для всех новых пользователей Chrome и в результате сообщает:

• Предупреждение о критическом изменении о предстоящем прекращении использования.
• Проблемы, связанные со сторонними файлами cookie.

Если вы хотите видеть предупреждения файлов cookie о предстоящем прекращении использования в качестве существующего пользователя Chrome, обязательно установите этот флажок.

Чтобы проверить это, проверьте файлы cookie на этой демонстрационной странице .

Кроме того, Фильтр файлов cookie заблокированных ответов на панели «Сеть» был перефразирован, чтобы было понятно, что он отображает только файлы cookie заблокированных ответов .

Проблемы с хромом: 1458839 , 1462693 , 1466310 .

Отладка предварительной загрузки на панели приложений

Команда Chrome возвращает полную предварительную отрисовку будущих страниц, на которые, скорее всего, перейдет пользователь. Чтобы вы могли отладить это, DevTools добавляет раздел «Предварительная загрузка» на панель «Приложение» . Новая предварительная выборка и предварительный рендеринг (в совокупности известные как «навигационная предварительная загрузка») использует API Speculation Rules, а не подсказки ресурсов на основе ссылок .

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

• Правила спекуляции , в которых перечислены все наборы правил, найденные на текущей странице.
• Предварительная загрузка , в которой перечислены все предварительно выбранные и предварительно обработанные URL-адреса из наборов правил.
• Эта страница , на которой указан предварительно обработанный статус текущей страницы.

За дополнительной информацией обратитесь к специальному посту, посвященному отладке правил спекуляций .

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

Новые цвета

Возможно, вы уже заметили, что DevTools теперь имеет обновленный внешний вид, который лучше соответствует Chrome. Одним из факторов, способствующих этому, является новая цветовая схема.

Эта версия (117) содержит дополнительные улучшения пользовательского интерфейса DevTools, как уже упомянутые, так и перечисленные далее, включая ряд улучшенных текстов пользовательского интерфейса.

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

Маяк 10.4.0

На панели «Маяк» теперь работает Lighthouse 10.4.0. В частности, в этой версии добавлены новые проверки доступности для следующего:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Например:

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

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

Расширение отладки C/C++ WebAssembly для DevTools теперь с открытым исходным кодом.

Расширение отладки C/C++ WebAssembly для DevTools теперь имеет открытый исходный код и находится в репозитории внешнего интерфейса DevTools . Это расширение обеспечивает возможности отладки в DevTools для программ C++, скомпилированных в WebAssembly. Дополнительные сведения см. в разделе Отладка C/C++ WebAssembly .

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

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

Разное

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

• Вложенность CSS : на панели «Элементы» теперь отображается вся цепочка селекторов для вложенных дочерних элементов ( 1172985 ).
• Приложение > Манифест теперь имеет раздел «Наложение элементов управления окном» , который проверяет, присутствует ли значение display_override в манифесте, и предоставляет ссылки на соответствующую документацию.
• Дерево «Источники > Страницы» теперь выполняет следующие действия, включая, помимо прочего, ( 1442863 ):
  • Папки выделяются серым цветом, если все их содержимое находится в списке игнорируемых.
  • Папки окрашиваются в оранжевый цвет, если все их содержимое взято из исходной карты.
• Производительность : настройки захвата теперь автоматически скрываются при запуске записи ( 1455498 ).
• Источники > Редактор восстановили поведение Ctrl + Arrow (Win) и Opt + Arrow (MacOs) ( 1468208 ).
• Переключатель «Анимация» > «Приостановить все » теперь сохраняет свое состояние при загрузке страницы ( 1446046 ).
• Приложение > Хранилище > Хранилище кэша перемещено в раздел Приложение > Хранилище > Кэш ( 1462622 ).
• Улучшены некоторые тексты пользовательского интерфейса и всплывающие подсказки: всплывающая подсказка по аппаратному параллелизму , тексты сетевых фильтров и опции главного меню , использование заглавных букв в дереве приложений , тексты «Сеть» > «Заголовки» , «Источники» > «Переопределения» и «Файловая система» .

Новые экспериментальные функции

Новая эмуляция рендеринга: prefers-reduced-transparency

Пользователи вашего веб-сайта могут включить на своих устройствах новую экспериментальную функцию CSS-медиа « prefers-reduced-transparency чтобы указать, что они предпочитают уменьшать эффекты прозрачности. Вы можете принять во внимание это предпочтение, чтобы повысить доступность вашего веб-сайта. Чтобы помочь вам, на вкладке «Рендеринг» теперь можно эмулировать настройку prefers-reduced-transparency: reduce , чтобы вы могли создать прототип решения и протестировать, как ваш веб-сайт ведет себя в этом случае.

Чтобы протестировать эту функцию в Chrome, включите функции экспериментальной веб-платформы в chrome://flags .

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

Улучшенный монитор протокола

Chrome DevTools использует протокол Chrome DevTools (CDP) для инструментирования, проверки, отладки и профилирования браузеров Chrome. Если вы являетесь разработчиком Chromium или DevTools, монитор протокола дает вам возможность просматривать все запросы и ответы CDP, сделанные DevTools, и отправлять команды CDP.

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

В правом нижнем углу вкладки «Монитор протокола» нажмите Показать редактор команд CDP , выбрать цель, начать вводить команду, выбрать одну из предложенных, при необходимости указать значения параметров и нажать Отправить команду ( Ctrl/Cmd + Enter ).

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

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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