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

Jecelyn Yeen

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

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

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

Визуализация CSS scroll-nap

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

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

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

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

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

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

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

Обновите страницу. Разверните раздел Scope в правой панели отладчика . Обратите внимание на новый значок рядом со значением буфера . Щелкните по нему, чтобы открыть Memory Inspector .

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

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

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

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

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

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

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

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

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

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

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

Кнопка «Новые сетевые условия» с опциями для настройки Content-Encoding

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

Новая опция Accepted Content-Encodings добавлена ​​на вкладку Network conditions . Настройте ее для проверки правильности кодирования ответов сервера в браузерах, которые не поддерживают gzip, brotli или другие будущие Content-Encoding s.

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

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

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

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

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

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

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

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

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

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

Используйте новый столбец Vary Header на панели Cache Storage для просмотра заголовка ответа HTTP Vary .

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

Улучшения панели источников

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

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

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

Попробуйте это на панели Console and Sources . Вы также можете проверить приватные поля в разделе Scope под панелью отладчика .

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

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

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

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

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

Поддержка предварительного просмотра при наведении с помощью нотации []

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

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

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

DevTools теперь имеет лучшую поддержку контуров для файлов HTML. На панели Sources откройте файл 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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