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

Jecelyn Yeen

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

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

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

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

Теперь вы можете переключить значок scroll-snap на панели «Элементы», чтобы проверить выравнивание привязки прокрутки 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 для поддержки тестирования полей частного класса на любом заданном объекте.

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

Проблема с хромом: 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 отображал только некоторые функции.

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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