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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблемы с Chromium: 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

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