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

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

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

Еще быстрее перезаписывайте веб-контент локально.

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

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

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

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

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

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

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

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

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

Переопределяйте содержимое XHR-запросов и запросов на получение данных.

Теперь вы можете переопределять содержимое XHR-запросов и запросов fetch, а также заголовки их ответов. Благодаря таким переопределениям вы можете имитировать ответы 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 до и после.

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

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

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

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

Предварительный просмотр ответа сети: анализ подтипа application/json до и после.

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшена отладка проблем, связанных с файлами cookie сторонних разработчиков.

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

Вы уже можете проверить, как 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 возвращает полную предварительную отрисовку будущих страниц, на которые пользователь, скорее всего, перейдет. Для отладки этой функции в Инструменты разработчика добавлен раздел «Предварительная загрузка » на панель «Приложение» . Новая предварительная загрузка и предварительная отрисовка (в совокупности известные как «навигационная предварительная загрузка») используют API правил спекуляции, а не подсказки ресурсов на основе ссылок .

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

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

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

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

Новые цвета

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

Фотографии до и после нанесения новых цветов.

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

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

Маяк 10.4.0

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

Например:

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

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

Номер выпуска Chromium: 772558 .

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

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

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

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

Различные важные моменты

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

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

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

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

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

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

Номер выпуска Chromium: 1424879 .

Усовершенствованный монитор протокола

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

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

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

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

Номер выпуска Chromium: 1469345 .

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

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

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

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

Что нового в инструментах разработчика

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