Новинки DevTools (Chrome 93)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaya. Редактор — Maxim Salnikov.

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

Редактируемые выражения от контейнера в панели Styles

Теперь вы можете просматривать и редактировать выражения от контейнера в панели Styles.

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

В панели Elements кликните на DOM-элемент с директивой @container, и в панели Styles DevTools отобразится информация о @container. Кликните на директиву, чтобы изменить размеры. В панели Styles также отобразится информация о соответствующем контейнере. Наведите на него курсор, чтобы подсветить элемент-контейнер на странице и проверить его размеры. Кликните на строку, чтобы выбрать элемент-контейнер.

Выражения от контейнеров пока на стадии эксперимента. Пожалуйста, включите флаг #enable-container-queries по ссылке chrome://flags, чтобы включить эту функциональность.

Редактируемые выражения от контейнера в панели Styles

Задача в трекере Chromium: 1146422

Предварительный просмотр веб-бандлов во вкладке Network

Веб-бандлы — это способ инкапсуляции одного или нескольких HTTP-ресурсов в один файл. Теперь вы можете просмотреть содержимое веб-бандла во вкладке Network.

Веб-бандлы пока на стадии эксперимента. Пожалуйста, включите флаг #enable-experimental-web-platform-features по ссылке chrome://flags чтобы включить эту функциональность.

Просмотр веб-бандлов

Задача в трекере Chromium: 1182537

Отладка Attribution Reporting API

Ошибки, связанные с Attribution Reporting API, теперь отображаются во вкладке Issues.

Attribution Reporting это новый API, который поможет вам понять, когда действия пользователя (например, клик или просмотр рекламы) приводят к конверсии, без использования межсайтовых идентификаторов.

Ошибки, связанные с Attribution Reporting API, во вкладке Issues

Задача в трекере Chromium: 1190735

Улучшенная работа со строками в консоли

Новое контекстное меню во вкладке Console позволяет скопировать любую строку в виде содержимого, литерала JavaScript или литерала JSON.

Новое контекстное меню в консоли

Начиная с версии Chrome 90, DevTools обновил Console, чтобы строки всегда форматировались как валидные литералы JSON. Мы получили отзывы от разработчиков, что это изменение может запутатать. Некоторые считают, что экранирование избыточно и делает вывод нечитаемым.

Console теперь форматирует выходные строки как валидные литералы JavaScript и, кроме того, предоставляет вам 3 варианта копирования строки. Опция Copy as JavaScript literal будет экранировать спецсимволы и заключать строку в одинарные кавычки, двойные кавычки или обратные кавычки в зависимости от содержимого строки. Опция Copy string contents, напротив, скопирует всё содержимое строки без изменений (включая переносы и спецсимволы) в буфер обмена. Опция Copy as JSON literal форматирует строку как валидный литерал JSON и копирует её в буфер обмена.

Задача в трекере Chromium: 1208389

Улучшенная отладка CORS

TypeErrors, связанные с CORS, во вкладке Console теперь связаны с вкладками Network и Issues.

Используйте две новые иконки рядом с сообщением об ошибке, связанной с CORS, чтобы просмотреть сетевой запрос или более подробно изучить сообщение об ошибке и получить потенциальные варианты решения во вкладке Issues.

Иконки рядом с текстом ошибки CORS

Задача в трекере Chromium: 1213393

Lighthouse 8.1

Панель Lighthouse теперь работает под управлением Lighthouse 8.1.

Lighthouse

Если ваш сайт предоставляет Lighthouse исходные карты, то найдите кнопку View Treemap, чтобы увидеть разбивку вашего отправленного кода JavaScript с возможностью фильтрации по размеру и охвату при загрузке.

Отчёт также включает новый фильтр метрик (см. раздел Show audits relevant to на снимке экрана). Выберите метрику, чтобы сосредоточиться на возможностях и диагностике, наиболее релевантных для улучшения именно этой метрики.

Метрика Performance Category претерпела ряд изменений для согласования с другими инструментами оценки производительности и лучшего отражения состояния сети.

Ознакомьтесь с заметками к релизу для просмотра полного списка изменений.

Задача в трекере Chromium: 772558

Отображение new_note_url в панели Manifest

В панели Manifest теперь отображается new_note_url.

В настоящее время в Chrome OS (CrOS) приложения Chrome и Android, в которых есть возможность создания заметок, могут быть выбраны в качестве приложения для создания заметок в настройках стилуса (отображаются, если устройство CrOS используется со стилусом). Если приложение помечено таким образом, его можно запустить по кнопке «Создать заметку». Добавление поля new-note-url в манифесте приложения является частью работы по добавлению аналогичных функций в веб-приложения.

new-note-url в панели Manifest

Задача в трекере Chromium: 1185678

Исправление соответствия селекторам CSS

DevTools исправил отображение соответствия селекторам CSS, в прошлой версии это не работало.

Разделённые запятыми селекторы CSS в панели Styles окрашиваются по разному в зависимости от того, соответствуют ли они выбранному узлу DOM:

  • Часть селектора, не соответствующая узлу, окрашена в светло-серый цвет.
  • Часть селектора, соответствующая узлу, окрашена в чёрный цвет.
Перечисления CSS-селекторов

Задача в трекере Chromium: 1219153

Форматирование ответов JSON во вкладке Network

Теперь вы можете отформатировать ответы JSON во вкладке Network.

Откройте ответ JSON во вкладке Network и нажмите на значок {}, чтобы его отформатировать.

Форматирование JSON-ответов во вкладке Network

Задача в трекере Chromium: 998674

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.