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

Всплывающая информация Web Vitals на панели «Производительность»

Наведите указатель мыши на маркер Web Vitals на панели «Производительность» , чтобы понять, о чем говорит индикатор: хорошая ли производительность, требует улучшения или плохая.

Всплывающее окно с информацией о веб-показателях

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

Визуализируйте привязку прокрутки CSS

Теперь вы можете переключить значок scroll-snap на панели «Элементы» , чтобы проверить выравнивание привязки прокрутки CSS.

CSS-прокрутка

Если к элементу HTML на вашей странице (например, на этой демонстрационной странице) применен scroll-snap-type , вы можете увидеть значок scroll-snap рядом с ним на панели «Элементы» . Нажмите на значок, чтобы переключить отображение наложения с прокруткой на странице.

В приведенном выше примере вы можете увидеть точечные метки на краях привязки. Порт прокрутки имеет сплошной контур, а элементы привязки имеют пунктирный контур. Поле прокрутки заполнено зеленым цветом, а поле прокрутки — оранжевым.

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

Новый инспектор памяти

Используйте новый инспектор памяти для проверки ArrayBuffer в JavaScript, а также памяти Wasm.

Откройте эту демонстрационную страницу . На панели «Источники» откройте файл demo-js.js и установите точку останова в строке 18.

Обновите страницу. Разверните раздел «Область» на правой панели отладчика . Обратите внимание на новый значок рядом со значением буфера . Нажмите на него, чтобы открыть инспектор памяти .

Ознакомьтесь с документацией, чтобы узнать больше об проверке JavaScript ArrayBuffer и WebAssembly.Memory с помощью этого нового инспектора памяти.

Инспектор памяти

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

Новая панель настроек значка на панели «Элементы».

Теперь вы можете выборочно включать или отключать значки в настройках значков на панели «Элементы» . Используйте эту функцию, чтобы настроить важные значки и сосредоточиться на них при просмотре веб-страниц.

панель настроек значка на панели «Элементы»

На панели «Элементы» щелкните правой кнопкой мыши любой элемент. В контекстном меню выберите «Настройки значка» , сверху появится панель настроек значка. Установите или отключите любой флажок, чтобы показать/скрыть значки.

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

Улучшенный предварительный просмотр изображения с информацией о соотношении сторон

Предварительный просмотр изображения на панели «Элементы» теперь отображает дополнительную информацию об изображении — визуализируемый размер, визуализированное соотношение сторон, внутренний размер, внутреннее соотношение сторон и размер файла.

Эта информация поможет вам лучше понять ваши изображения и при необходимости применить оптимизацию.

Предварительный просмотр изображения с информацией о соотношении сторон

Информация о соотношении сторон изображения также доступна на панели «Сеть» , а также при нажатии кнопки предварительного просмотра изображения.

Информация о соотношении сторон изображения на панели «Сеть»

Проблемы с хромом: 1149832 , 1170656.

Новая кнопка условий сети с возможностью настройки Content-Encoding .

На панели «Сеть» добавлена ​​новая кнопка «Условия сети». Нажмите на нее, чтобы открыть вкладку «Сетевые условия» .

На вкладку «Условия сети» добавлена ​​новая опция «Принятые кодировки контента» . Настройте его, чтобы проверить, правильно ли кодируются ответы сервера в браузерах, которые не поддерживают gzip, brotli или другие будущие Content-Encoding .

Новая кнопка условий сети с возможностью настройки кодирования контента

Проблема с хромом: 1162042.

Улучшения панели «Стили»

Новый ярлык для просмотра вычисленного значения на панели «Стили».

Теперь вы можете щелкнуть правой кнопкой мыши свойство CSS на панели «Стили» и выбрать «Просмотреть вычисленное значение» , чтобы просмотреть вычисленное значение CSS.

Новый ярлык для просмотра вычисленного значения

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

Поддержка ключевого слова accent-color

Пользовательский интерфейс автозаполнения панели «Стили» теперь обнаруживает ключевое слово CSS accent-color , которое позволяет веб-разработчикам указывать цвет акцента для элементов управления пользовательского интерфейса (например, флажка, переключателя), генерируемых элементом.

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

акцентный цвет

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

Классифицируйте типы проблем с помощью цветов и значков.

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

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

Классифицируйте типы проблем с помощью цветов и значков.

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

Удалить токены доверия

Теперь вы можете удалять токены доверия с помощью новой кнопки удаления на панели «Токены доверия» под панелью «Приложение» .

Trust Token — это новый API, помогающий бороться с мошенничеством и отличать ботов от реальных людей без пассивного отслеживания. Узнайте, как начать работу с токенами доверия .

Удалить токены доверия

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

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

Теперь вы можете просмотреть подробную информацию о заблокированных функциях в разделе «Политика разрешений» в представлении сведений о фрейме.

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

Политика разрешений — это API веб-платформы, который дает веб-сайту возможность разрешать или блокировать использование функций браузера в его собственном фрейме или в встроенных в него iframe.

Заблокированные функции в представлении сведений о раме

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

Фильтруйте эксперименты в настройках «Эксперименты».

Находите эксперименты быстрее с помощью нового фильтра экспериментов. Например, перейдите в «Настройки» > «Эксперименты» и в текстовом поле «Фильтр» введите «контраст», чтобы отфильтровать все эксперименты со словом «контраст».

Фильтруйте эксперименты в настройках «Эксперименты».

Новый столбец Vary Header на панели хранилища кэша.

Используйте новый столбец Vary Header на панели «Хранилище кэша» , чтобы просмотреть заголовок ответа Vary HTTP.

Изменить столбец заголовка

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

Улучшения панели «Источники»

Поддержка новых функций JavaScript

DevTools теперь поддерживает новую функцию языка JavaScript для проверки частного бренда , также известную как #foo in obj .

Эта функция проверки частного бренда расширяет оператор in для поддержки тестирования полей частного класса на любом заданном объекте.

Попробуйте это на панели «Консоль и источники» . Вы также можете проверить частные поля в разделе «Область» на панели отладчика .

Проверки частного бренда JavaScript

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

Расширенная поддержка отладки точек останова.

DevTools теперь правильно устанавливает точки останова в нескольких скриптах. Современные упаковщики JavaScript (например, Webpack , Rollup ) поддерживают функцию разделения кода — существуют сценарии, в которых один общий компонент может быть включен в несколько маршрутов (разделение кода).

Раньше DevTools мог устанавливать точки останова только в одном необработанном месте. Благодаря этому последнему усовершенствованию DevTools может правильно устанавливать точки останова во всех соответствующих местах.

Проблемы с хромом: 1142705 , 979000 , 1180794.

Поддержка предварительного просмотра при наведении с обозначением []

DevTools теперь поддерживает предварительный просмотр при наведении на выражения-члены JavaScript, которые используют нотацию [] на панели «Источники» .

Поддержка предварительного просмотра при наведении с обозначением «[]»

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

Улучшенная структура HTML-файлов.

DevTools теперь имеет улучшенную поддержку HTML-файлов. На панели «Источники» откройте HTML-файл. Вы можете переключить структуру кода с помощью клавиатуры Cmd + Shift + O в Mac или Ctrl + Shift + O в Windows.

В приведенном ниже примере DevTools теперь правильно отображает все функции в структуре. Раньше DevTools отображал только некоторые функции.

Улучшенная структура HTML-файлов.

Проблема с хромом: 761019 , 1191465

Правильная трассировка стека ошибок для отладки Wasm

DevTools теперь разрешает встроенные вызовы функций и отображает правильные трассировки стека ошибок для отладки Wasm.

Ранее DevTools отображал только общие ссылки Wasm в трассировках стека ошибок.

Правильная трассировка стека ошибок для отладки Wasm

Старая версия Chrome слева не показывает местоположение источника (например, dsquare ) в трассировках стека ошибок, тогда как новая версия справа показывает.

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

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

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

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

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

Что нового в DevTools

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