Что нового в 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» .

Jecelyn Yeen

В Интернете информация появляется на панели Performance

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

Выпуск хрома: 1147872

Визуализируйте CSS Scroll-Snap

Теперь вы можете переключить значок scroll-snap на панели Elements , чтобы осмотреть выравнивание CSS Scroll-Snap.

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

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

Выпуск хрома: 862450

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

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

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

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

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

Выпуск хрома: 1166577

Настройки новых значков на панели Elements

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

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

Выпуск хрома: 1066772

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

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

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

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

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

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

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

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

Выпуск хрома: 1162042

Усовершенствования стилей

Новый ярлык для просмотра компьютерной ценности на панели Styles

Теперь вы можете щелкнуть правой кнопкой мыши на свойство CSS на панели Styles и выбрать просмотр вычисленного значения , чтобы просмотреть вычисленное значение CSS.

Выпуск хрома: 1076198

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

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

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

Выпуск хрома: 1092093

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

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

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

Выпуск хрома: 1183241

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

Теперь вы можете удалить токены Trust с помощью новой кнопки Delete на панели Trust Tokens , под панелью приложения .

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

Выпуск хрома: 1126824

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

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

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

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

Выпуск хрома: 1158827

Фильтруя эксперименты в настройке экспериментов

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

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

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

Выпуск хрома: 1186049

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

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

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

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

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

Выпуск хрома: 11374

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

Devtools теперь правильно устанавливают точки останова в нескольких сценариях. Modern JavaScript Bundlers (например, WebPack , Rollup ) Функция кода поддержки - существуют сценарии, в которых один общий компонент может быть включен в несколько маршрутов (разделения кода).

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

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

Поддержка просмотра Hover с [] нотацией

В настоящее время Devtools поддерживает предварительный просмотр Hover на выражениях членов 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 More Options > Help > Сообщите о проблеме DevTools в DevTools.
• Твит на @chromedevtools .
• Оставьте комментарии о том, что нового в Devtools Videos YouTube или Devtools Советы на YouTube Videos .

Что нового в Devtools

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

Jecelyn Yeen

Web Vitals information pop up in the Performance panel

Hover on a Web Vitals marker in the Performance panel to understand what's the indicator about - whether the performance is good, needs improvement, or poor.

Chromium issue: 1147872

Visualize CSS scroll-snap

You can now toggle the scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.

When an HTML element on your page (eg this demo page) has scroll-snap-type applied to it, you can see a scroll-snap badge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.

In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.

Chromium issue: 862450

New Memory inspector

Use the new Memory inspector to inspect an ArrayBuffer in JavaScript, as well as the Wasm memory.

Open this demo page . In the Sources panel, open the demo-js.js file, and set a breakpoint at line 18.

Refresh the page. Expand the Scope section in the right debugger pane. Notice the new icon next to the buffer value. Click on it to reveal the Memory Inspector .

Check out the documentation to learn more about inspecting JavaScript ArrayBuffer and WebAssembly.Memory with this new Memory inspector.

Chromium issue: 1166577

New badge settings pane in the Elements panel

You can now selectively enable or disable badges via the Badge settings in the Elements panel. Use this feature to customize and stay focused on the important badges while inspecting web pages.

In the Elements panel, right click on any elements. Select Badge settings from the context menu, the badge settings pane appears on top. Enable or disable any checkbox to show/hide the badges.

Chromium issue: 1066772

Enhanced image preview with aspect ratio information

Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.

This information helps you better understand your images and apply optimization if you need to.

The image aspect ratio information is available in the Network panel as well when you click to preview the image.

Chromium issues: 1149832 , 1170656

New network conditions button with options to configure Content-Encoding s

A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.

A new Accepted Content-Encodings option is added to the Network conditions tab. Configure it to test if server responses are encoded correctly in browsers that do not support gzip, brotli, or other future Content-Encoding s.

Chromium issue: 1162042

Styles pane enhancements

New shortcut to view computed value in the Styles pane

You can now right click on a CSS property in the Styles pane and select View computed value to view the computed CSS value.

Chromium issue: 1076198

Support for the accent-color keyword

The Styles pane's autocomplete UI now detects the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (eg checkbox, radio button) generated by the element.

The accent-color CSS property is currently experimental . Please enable chrome://flags/#enable-experimental-web-platform-features to test it.

Chromium issue: 1092093

Categorize issue types with colors and icons

The Issues tab now categorize issues into page errors, upcoming breaking changes, and possible improvements for better severity indication. You can open the Issues tab by clicking on the issue count button in the Console .

• Page errors (red) . Issues that have immediate impact for page functionality, such as not setting correct CORS headers, etc.
• Upcoming breaking changes (yellow) . Issues that inform about an upcoming, incompatible change of the web platform that may result in a loss of page functionality (eg warning of upcoming CORS RFC 1918 changes ).
• Possible improvements (blue) . Potential improvements on the page, but are currently not impairing basic functionality of the page (eg accessibility issues)

Chromium issue: 1183241

Delete Trust tokens

You can now delete trust tokens with the new delete button in the Trust tokens pane, under the Application panel.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens .

Chromium issue: 1126824

View details on blocked features in the Frame details view

You can now view details on blocked features under the Permissions policy section in the Frame details view.

Open this demo page. Go to the Application panel and select a frame. In the Permissions Policy section, scroll to the Disabled Features property. Click on Show details to view the details on why the feature is blocked. Click on the icon next to each policy to navigate to the iframe or network request that blocked the feature.

Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.

Chromium issue: 1158827

Filter experiments in the Experiments setting

Find experiments quicker with the new experiment filter. For example, go to Settings > Experiments , in the Filter textbox, type "contrast" to filter all the experiments with the word "contrast".

New Vary Header column in the Cache storage pane

Use the new Vary Header column in the Cache Storage pane to view the Vary HTTP response header.

Chromium issue: 1186049

Sources panel improvements

Support for new JavaScript features

DevTools now support the new private brand check JavaScript language feature, aka #foo in obj .

This private brand checks feature extends the in operator to support the private class fields testing on any given object.

Try it out in the Console and Sources panel. You can inspect the private fields in the Scope section under the debugger pane as well.

Chromium issue: 11374

Enhanced support for breakpoints debugging

DevTools now properly set breakpoints in multiple scripts correctly. Modern JavaScript bundlers (eg Webpack , Rollup ) support code splitting feature - there are scenarios where one shared component can be included in multiple routes (code splits).

Previously, DevTools was only able to set breakpoints on one raw location. With this latest improvement, DevTools can set breakpoints in all relevant locations correctly.

Chromium issues: 1142705 , 979000 , 1180794

Support hover preview with [] notation

DevTools now support for hover preview on JavaScript member expressions that use the [] notation in the Sources panel.

Chromium issue: 1178305

Improved outline of HTML files

DevTools now has better outline support for HTML files. In the Sources panel, open a HTML file. You can toggle the code outline with keyboard Cmd + Shift + O in Mac or Ctrl + Shift + O in Windows.

In the example below, DevTools now correctly list all functions in the outline. Previously, DevTools only showed some of the functions.

Chromium issue: 761019 , 1191465

Proper error stack traces for Wasm debugging

DevTools now resolves inline function calls and shows proper error stack traces for Wasm debugging.

Previously DevTools only displayed generic Wasm references in the Error stack traces.

The old version of Chrome on the left does not show the source location (eg dsquare ) in the Error stack traces, whereas the new version on the right does.

Chromium issue: 1189161

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

Jecelyn Yeen

Web Vitals information pop up in the Performance panel

Hover on a Web Vitals marker in the Performance panel to understand what's the indicator about - whether the performance is good, needs improvement, or poor.

Chromium issue: 1147872

Visualize CSS scroll-snap

You can now toggle the scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.

When an HTML element on your page (eg this demo page) has scroll-snap-type applied to it, you can see a scroll-snap badge next to it in the Elements panel. Click the badge to toggle the display of a scroll-snap overlay on the page.

In the example above, you can see dot marks on snap edges. The scroll port has solid outlined while the snap items have dash outlines. The scroll padding is filled in green color while the scroll margin is filled in orange.

Chromium issue: 862450

New Memory inspector

Use the new Memory inspector to inspect an ArrayBuffer in JavaScript, as well as the Wasm memory.

Open this demo page . In the Sources panel, open the demo-js.js file, and set a breakpoint at line 18.

Refresh the page. Expand the Scope section in the right debugger pane. Notice the new icon next to the buffer value. Click on it to reveal the Memory Inspector .

Check out the documentation to learn more about inspecting JavaScript ArrayBuffer and WebAssembly.Memory with this new Memory inspector.

Chromium issue: 1166577

New badge settings pane in the Elements panel

You can now selectively enable or disable badges via the Badge settings in the Elements panel. Use this feature to customize and stay focused on the important badges while inspecting web pages.

In the Elements panel, right click on any elements. Select Badge settings from the context menu, the badge settings pane appears on top. Enable or disable any checkbox to show/hide the badges.

Chromium issue: 1066772

Enhanced image preview with aspect ratio information

Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.

This information helps you better understand your images and apply optimization if you need to.

The image aspect ratio information is available in the Network panel as well when you click to preview the image.

Chromium issues: 1149832 , 1170656

New network conditions button with options to configure Content-Encoding s

A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.

A new Accepted Content-Encodings option is added to the Network conditions tab. Configure it to test if server responses are encoded correctly in browsers that do not support gzip, brotli, or other future Content-Encoding s.

Chromium issue: 1162042

Styles pane enhancements

New shortcut to view computed value in the Styles pane

You can now right click on a CSS property in the Styles pane and select View computed value to view the computed CSS value.

Chromium issue: 1076198

Support for the accent-color keyword

The Styles pane's autocomplete UI now detects the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (eg checkbox, radio button) generated by the element.

The accent-color CSS property is currently experimental . Please enable chrome://flags/#enable-experimental-web-platform-features to test it.

Chromium issue: 1092093

Categorize issue types with colors and icons

The Issues tab now categorize issues into page errors, upcoming breaking changes, and possible improvements for better severity indication. You can open the Issues tab by clicking on the issue count button in the Console .

• Page errors (red) . Issues that have immediate impact for page functionality, such as not setting correct CORS headers, etc.
• Upcoming breaking changes (yellow) . Issues that inform about an upcoming, incompatible change of the web platform that may result in a loss of page functionality (eg warning of upcoming CORS RFC 1918 changes ).
• Possible improvements (blue) . Potential improvements on the page, but are currently not impairing basic functionality of the page (eg accessibility issues)

Chromium issue: 1183241

Delete Trust tokens

You can now delete trust tokens with the new delete button in the Trust tokens pane, under the Application panel.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens .

Chromium issue: 1126824

View details on blocked features in the Frame details view

You can now view details on blocked features under the Permissions policy section in the Frame details view.

Open this demo page. Go to the Application panel and select a frame. In the Permissions Policy section, scroll to the Disabled Features property. Click on Show details to view the details on why the feature is blocked. Click on the icon next to each policy to navigate to the iframe or network request that blocked the feature.

Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.

Chromium issue: 1158827

Filter experiments in the Experiments setting

Find experiments quicker with the new experiment filter. For example, go to Settings > Experiments , in the Filter textbox, type "contrast" to filter all the experiments with the word "contrast".

New Vary Header column in the Cache storage pane

Use the new Vary Header column in the Cache Storage pane to view the Vary HTTP response header.

Chromium issue: 1186049

Sources panel improvements

Support for new JavaScript features

DevTools now support the new private brand check JavaScript language feature, aka #foo in obj .

This private brand checks feature extends the in operator to support the private class fields testing on any given object.

Try it out in the Console and Sources panel. You can inspect the private fields in the Scope section under the debugger pane as well.

Chromium issue: 11374

Enhanced support for breakpoints debugging

DevTools now properly set breakpoints in multiple scripts correctly. Modern JavaScript bundlers (eg Webpack , Rollup ) support code splitting feature - there are scenarios where one shared component can be included in multiple routes (code splits).

Previously, DevTools was only able to set breakpoints on one raw location. With this latest improvement, DevTools can set breakpoints in all relevant locations correctly.

Chromium issues: 1142705 , 979000 , 1180794

Support hover preview with [] notation

DevTools now support for hover preview on JavaScript member expressions that use the [] notation in the Sources panel.

Chromium issue: 1178305

Improved outline of HTML files

DevTools now has better outline support for HTML files. In the Sources panel, open a HTML file. You can toggle the code outline with keyboard Cmd + Shift + O in Mac or Ctrl + Shift + O in Windows.

In the example below, DevTools now correctly list all functions in the outline. Previously, DevTools only showed some of the functions.

Chromium issue: 761019 , 1191465

Proper error stack traces for Wasm debugging

DevTools now resolves inline function calls and shows proper error stack traces for Wasm debugging.

Previously DevTools only displayed generic Wasm references in the Error stack traces.

The old version of Chrome on the left does not show the source location (eg dsquare ) in the Error stack traces, whereas the new version on the right does.

Chromium issue: 1189161

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.