Редактируемые запросы контейнера 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, чтобы просмотреть сетевой запрос или более подробно разобраться в сообщении об ошибке и получить возможные решения на вкладке «Проблемы».
Проблема с хромом: