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

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

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

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

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

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

Параметры переопределения в раскрывающемся меню запроса.

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

Выберите папку и разрешите доступ к ней на панели действий вверху.

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

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

Значок переопределения рядом с запросом на панели «Сеть».

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

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

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

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

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

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

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

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

URL-адреса расширений скрыты в таблице запросов.

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

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

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

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

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

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

Красивые ответы для подтипов JSON

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

До и после анализа подтипа application/json в предварительном просмотре сетевого ответа.

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

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

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

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

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

Столбец «Приоритет» на панели «Сеть».

Проблемы с 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 на панели «Сеть» был перефразирован, чтобы было ясно, что он показывает только заблокированные ответные файлы cookie.

Флажок включен и отображает только запросы с заблокированными ответными cookie-файлами.

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

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

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

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

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

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

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

Новые цвета

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

До и после нанесения новых цветов.

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

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

Маяк 10.4.0

Панель Lighthouse теперь работает под управлением Lighthouse 10.4.0. В частности, в этой версии добавлены новые проверки доступности для следующих компонентов:

Например:

Не удалось проверить цвет ссылок, из-за чего их невозможно различить.

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

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

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

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

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

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

Разные моменты

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

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

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

Пользователи вашего сайта могут начать включать новую экспериментальную функцию CSS media 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 ).

Указание и отправка команды CDP.

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

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

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

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

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

Что нового в DevTools

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