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

Джеселин Йин

Редактируемые CSS-контейнерные запросы в панели «Стили».

Теперь вы можете просматривать и редактировать запросы CSS-контейнеров на панели «Стили» .

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

В панели «Элементы» щелкните по элементу DOM с атрибутом @container at-rule. Инструменты разработчика отобразят информацию @container в панели «Стили» . Щелкните по нему, чтобы изменить размер. В панели «Стили» также отображается соответствующая информация о контейнере. Наведите курсор на него, чтобы выделить элемент-контейнер на странице и проверить размер контейнера. Щелкните по нему, чтобы выбрать элемент-контейнер.

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

Редактируемые CSS-контейнерные запросы в панели «Стили».

Проблема с Chromium: 1146422

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

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

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

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

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

Отладка API для составления отчетов об атрибуции

Теперь ошибки API для формирования отчетов об атрибуции отображаются на вкладке «Проблемы» .

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

Ошибки API для составления отчетов об атрибуции на вкладке «Проблемы»

Проблема с Chromium: 1190735

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

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

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

В Chrome 90 в инструментах разработчика консоль была обновлена ​​таким образом, чтобы строковый вывод всегда форматировался как допустимые JSON-литералы . Мы получили отзывы от разработчиков о том, что это изменение может вызывать путаницу, некоторые считают, что экранирование избыточно и делает вывод нечитаемым.

Теперь консоль форматирует строковый вывод как допустимые JavaScript-литералы и, кроме того, предоставляет 3 варианта копирования строки. Вариант «Копировать как JavaScript-литерал» экранирует соответствующие специальные символы и заключает строку в одинарные, двойные или обратные кавычки в зависимости от содержимого строки. Вариант «Копировать содержимое строки» вместо этого копирует исходное содержимое строки (включая новые строки и другие специальные символы) в буфер обмена. Наконец, вариант «Копировать как JSON-литерал» форматирует строку как допустимый JSON-литерал и копирует её в буфер обмена.

Проблема Chromium: 1208389

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

Теперь ошибки TypeError, связанные с CORS, в консоли отображаются в панели «Сеть» на вкладке «Проблемы».

Нажмите на два новых значка рядом с сообщением об ошибке, связанной с CORS, чтобы просмотреть сетевой запрос, или же разберитесь в сообщении об ошибке подробнее и найдите возможные решения на вкладке «Проблемы».

Значки рядом с сообщением об ошибке, связанной с CORS.

Проблема с Chromium: 1213393

Маяк 8.1

В настоящее время панель управления Lighthouse работает под управлением Lighthouse 8.1.

Маяк

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

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

В категории «Производительность» был внесен ряд изменений в систему оценки, чтобы привести ее в соответствие с другими инструментами анализа производительности и лучше отразить текущее состояние веб-технологий.

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

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

Отобразить новый URL-адрес заметки в панели «Манифест».

В панели «Манифест» теперь отображается новый URL-адрес заметки .

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

Новый URL-адрес заметки в панели «Манифест».

Проблема с Chromium: 1185678

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

В инструментах разработчика исправлена ​​ошибка сопоставления селекторов CSS, которая не работала в предыдущей версии.

Селекторы, разделенные запятыми, на панели «Стили» окрашиваются по-разному в зависимости от того, соответствуют ли они выбранному узлу DOM:

  • Несоответствующий фрагмент показан светло-серым цветом.
  • Соответствующий селекторный элемент показан черным цветом.

CSS-селекторы, соответствующие

Проблема с Chromium: 1219153

Форматирование JSON-ответов на панели «Сеть»

Теперь вы можете форматировать JSON-ответы в панели «Сеть» .

Откройте JSON-ответ на панели «Сеть» , нажмите на значок {} для форматированного вывода.

Форматирование JSON-ответов на панели «Сеть»

Ошибка Chromium: 998674

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

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

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

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

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

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