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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучшая обработка строк в консоли

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

В Chrome 90 DevTools обновил Console , чтобы всегда форматировать строковые выходные данные как допустимые литералы 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, которые заявляют о возможности «new-note», могут быть выбраны в качестве приложения для создания заметок в настройках стилуса (отображается, если устройство CrOS использовалось со стилусом). При выборе в качестве приложения для создания заметок приложение можно запустить с помощью кнопки «Создать заметку» на палитре стилуса. Добавление поля new-note-url в манифест приложения является частью усилий по добавлению эквивалентной функциональности в веб-приложения.

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

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

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

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

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

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

Красивая печать ответов JSON на панели «Сеть»

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

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

Ошибка Chromium: 998674

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

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

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

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

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

Что нового в DevTools

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