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

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

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

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

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

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

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

Если у вас настроены, но отключены локальные переопределения, 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-адреса расширений .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новые цвета

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

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

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

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

Маяк 10.4.0

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

Например:

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

См. также полный список изменений . Чтобы узнать основы использования панели 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 ).

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

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

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

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

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

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

Что нового в DevTools

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

,

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

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

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

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

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

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

Если у вас настроены, но отключены локальные переопределения, 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-адреса расширений .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новые цвета

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

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

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

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

Маяк 10.4.0

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

Например:

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

См. также полный список изменений . Чтобы узнать основы использования панели 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 ).

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

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

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

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

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

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

Что нового в DevTools

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

,

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

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

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

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

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

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

Если у вас настроены, но отключены локальные переопределения, 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-адреса расширений .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новые цвета

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

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

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

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

Маяк 10.4.0

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

Например:

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

См. также полный список изменений . Чтобы узнать основы использования панели 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 ).

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

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

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

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

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

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

Что нового в DevTools

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

,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 1153956 .

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

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

До и после анализа подтипа приложения/JSON в предварительном просмотре сетевого ответа.

Выпуск хрома: 406900 .

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

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

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

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

Приоритетный столбец на сетевой панели.

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

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

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

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

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

Эта настройка делает дерево файлов на странице источников > Выберите текущий файл, открытый в редакторе при переключении вкладок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 1410709 .

Новые цвета

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

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

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

Выпуск хрома: 1456677 .

Маяк 10.4.0

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

Например:

Неудачная проверка цвета ссылок, которые делают их неразличимыми.

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

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

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

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

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

Выпуск хрома: 1410709 .

Разное

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

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

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

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

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

Выпуск хрома: 1424879 .

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

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

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

В правом нижнем углу вкладки ящика монитора протокола нажмите Левая панель открыта. Показать редактор команд CDP , выберите цель, начните вводить команду, выберите одно из предложенных, если это необходимо, укажите значения параметров и нажмите Отправлять. Отправить команду ( ctrl/cmd + enter ).

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

Выпуск хрома: 1469345 .

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

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

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

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

Что нового в DevTools

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