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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

Проблема с хромом: 1182537

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

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

Отчеты об атрибуции – это новый API, который поможет вам определить, когда действие пользователя (например, клик или просмотр объявления) приводит к конверсии, без использования межсайтовых идентификаторов.

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

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

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

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

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

Проблема с хромом: 1208389

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

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

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

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

Маяк 8.1

На панели Lighthouse теперь работает Lighthouse 8.1.

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

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

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

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

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

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

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

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

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

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

DevTools исправил селекторы соответствия CSS, они не работали в последней версии.

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

• Несовпадающая часть отображается светло-серым цветом.
• Соответствующая часть селектора показана черным цветом.

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

Удобная печать ответов JSON на панели «Сеть».

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

Откройте ответ JSON на панели «Сеть» , щелкните значок {} чтобы распечатать его.

Ошибка хрома: 998674

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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