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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

Отладка API Attribution Reporting

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

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

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

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

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

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

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

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

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

Ошибки типа TypeErrors, связанные с 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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