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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коды статуса HTTP, понятные человеку

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

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

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

Ответы в формате Pretty-print для подтипов JSON

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предварительная отладка на панели приложений

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

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

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

Более подробную информацию можно найти в специальной статье об отладке правил спекуляции .

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

Новые цвета

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

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

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

Маяк 10.4.0

Панель Lighthouse теперь работает на 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 + Стрелка (Win) и Opt + Стрелка (MacOs) ( 1468208 ).
• Анимации > Переключатель « Приостановить все » теперь сохраняет свое состояние при загрузке страницы ( 1446046 ).
• Приложение > Хранилище > Хранилище кэша перемещено в раздел Приложение > Хранилище > Кэш ( 1462622 ).
• Улучшены некоторые тексты пользовательского интерфейса и подсказки: подсказка по аппаратному параллелизму , тексты сетевых фильтров и опция главного меню , заглавные буквы в дереве приложений , тексты «Сеть» > «Заголовки» , «Источники» > «Переопределения» и «Файловая система» .

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

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

Пользователи вашего сайта могут начать включать новую экспериментальную функцию CSS media prefers-reduced-transparency на своих устройствах, чтобы указать свои предпочтения по уменьшению прозрачных эффектов. Вы можете рассмотреть возможность учета этого предпочтения для повышения доступности вашего сайта. Чтобы помочь вам, вкладка Rendering drawer теперь может эмулировать настройку 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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