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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 8.1

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

Маяк

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS-селекторы соответствия

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59