Jecelyn Yeen
Новые инструменты отладки CSS flexbox
В DevTools теперь есть специальные инструменты для отладки CSS-flexbox!
Когда к HTML-элементу на вашей странице применяется display: flex или display: inline-flex , рядом с ним в панели «Элементы» отображается значок flex . Щелкните значок, чтобы переключить отображение гибкого наложения на странице.
В панели «Стили» вы можете щелкнуть новый значок рядом с display: flex или display: inline-flex чтобы открыть редактор Flexbox . Редактор Flexbox предоставляет быстрый способ редактирования свойств flexbox. Попробуйте сами!
Кроме того, в панели «Макет» есть раздел «Flexbox» , отображающий все элементы Flexbox на странице. Вы можете переключать режим наложения каждого элемента.
Проблемы Chromium: 1166710 , 1175699
Новое наложение основных веб-функций
Благодаря новому наложению Core Web Vitals вы сможете лучше визуализировать и измерять производительность вашей страницы.
Core Web Vitals — это инициатива Google, направленная на предоставление единых рекомендаций по показателям качества, которые имеют решающее значение для обеспечения превосходного пользовательского опыта в интернете.
Откройте командное меню , выполните команду «Показать рендеринг» , а затем установите флажок «Core Web Vitals» .
В данный момент наложение отображает:
- Показатель Largest Contentful Paint (LCP) : измеряет скорость загрузки . Для обеспечения удобства использования LCP должен происходить в течение 2,5 секунд с момента начала загрузки страницы.
- Первая задержка ввода (FID) : измеряет интерактивность . Для обеспечения хорошего пользовательского опыта страницы должны иметь FID менее 100 миллисекунд .
- Накопленный сдвиг макета (CLS) : измеряет визуальную стабильность . Для обеспечения удобства использования страницы должны поддерживать значение CLS менее 0,1 .
Проблема Chromium: 1152089
Обновления вкладки «Проблемы»
Переместил счетчик проблем в строку состояния консоли.
В строку состояния консоли добавлена новая кнопка подсчета количества проблем, чтобы улучшить видимость предупреждений о проблемах. Она заменит сообщение о проблеме в консоли .
Проблема Chromium: 1140516
Сообщить о проблемах с доступом к доверенным веб-ресурсам
Теперь на вкладке «Проблемы» отображаются проблемы, связанные с активностью в доверенных веб-серверах . Это призвано помочь разработчикам понять и устранить проблемы с активностью в доверенных веб-серверах своих сайтов, повысив качество их приложений.
Откройте доверенное веб-действие. Затем откройте вкладку «Проблемы» , нажав на кнопку « Количество проблем» в строке состояния консоли , чтобы просмотреть проблемы. Посмотрите это выступление Андре, чтобы узнать больше о том, как создавать и развертывать доверенные веб-действия.
Номер выпуска Chromium: 1147479
Форматирование строк как (допустимых) строковых литералов JavaScript в консоли.
Теперь консоль форматирует строки как допустимые строковые литералы JavaScript. Ранее консоль не экранировала двойные кавычки при выводе строк.
Проблема с Chromium: 1178530
В панели приложений появилась новая панель «Доверенные токены».
В инструментах разработчика теперь все доступные токены доверия в текущем контексте просмотра отображаются в новой панели «Токены доверия» в разделе «Приложение» .
Trust Token — это новый API, помогающий бороться с мошенничеством и отличать ботов от реальных людей без пассивного отслеживания. Узнайте, как начать работу с Trust Tokens .
Номер выпуска Chromium: 1126824
Имитация функции CSS color-gamut media
Медиазапрос color-gamut позволяет проверить приблизительный диапазон цветов, поддерживаемых браузером и устройством вывода. Например, если медиазапрос color-gamut: p3 совпадает, это означает, что устройство пользователя поддерживает цветовое пространство Display-P3.
Откройте командное меню , выполните команду «Показать рендеринг» , а затем выберите параметр «Имулировать цветовой охват медиафайлов CSS» в раскрывающемся списке.
Номер выпуска Chromium: 1073887
Улучшенные инструменты для прогрессивных веб-приложений
В инструментах разработчика теперь отображается более подробное предупреждение о невозможности установки прогрессивных веб-приложений (PWA) в консоли , содержащее ссылку на документацию .
В панели «Манифест» теперь отображается предупреждение, если описание в манифесте превышает 324 символа.
Кроме того, в панели «Манифест» теперь отображается предупреждение, если снимок экрана PWA не соответствует требованиям. Подробнее о свойстве «Снимки экрана PWA» и его требованиях можно узнать здесь.
Проблемы Chromium: 1146450 , 1169689 , 965802
В панели «Сеть» появился новый столбец Remote Address Space .
Используйте новый столбец Remote Address Space на панели «Сеть», чтобы просмотреть адресное пространство IP-адресов каждого сетевого ресурса.
Проблема с Chromium: 1128885
Улучшения производительности
Улучшена производительность загрузки страниц при открытых инструментах разработчика. В некоторых экстремальных случаях мы наблюдали десятикратное повышение производительности.
Инструменты разработчика собирают трассировки стека и прикрепляют их к сообщениям консоли или асинхронным задачам для последующего использования разработчиком в случае возникновения проблемы. Поскольку этот сбор должен происходить синхронно в движке браузера, медленный сбор трассировок стека может значительно замедлить загрузку страницы при открытых инструментах разработчика. Нам удалось значительно снизить накладные расходы на сбор трассировок стека.
Следите за обновлениями — в блоге появится более подробная статья о реализации проекта.
Проблемы Chromium: 1069425 , 1077657
Отображение разрешенных/запрещенных функций в окне сведений о раме.
В окне сведений о фрейме теперь отображается список разрешенных и запрещенных функций браузера, управляемых политикой разрешений.
Политика разрешений — это API веб-платформы, который позволяет веб-сайту разрешать или блокировать использование функций браузера в собственном фрейме или во встраиваемых им iframe-элементах.
Номер выпуска Chromium: 1158827
В панели «Cookies» появился новый столбец SameParty .
В панели «Cookies» в разделе «Приложение» теперь отображается атрибут SameParty для файлов cookie. Атрибут SameParty — это новый логический атрибут, указывающий, следует ли включать файл cookie в запросы к источникам из одних и тех же наборов файлов cookie первого уровня .
Номер выпуска Chromium: 1161427
Устаревшая нестандартная поддержка fn.displayName
Поддержка нестандартного параметра fn.displayName устарела. Используйте fn.name вместо него.
В Chrome традиционно поддерживается нестандартное свойство fn.displayName , позволяющее разработчикам управлять отладочными именами функций, отображаемых в error.stack и в трассировках стека в инструментах разработчика. В приведенном выше примере в стеке вызовов ранее отображалось бы noLongerSupport .
Замените fn.displayName на стандартное fn.name , которое стало настраиваемым (через Object.defineProperty ) в ECMAScript 2015 для замены нестандартного свойства fn.displayName .
Поддержка fn.displayName ненадежна и непоследовательна в разных браузерных движках. Она замедляет сбор трассировки стека, и разработчики всегда платят за это, независимо от того, используют они fn.displayName или нет.
Проблема с Chromium: 1177685
Отключена функция « Don't show Chrome Data Saver warning в меню настроек.
Параметр Don't show Chrome Data Saver warning удален, поскольку функция Chrome Data Saver устарела .
Проблема с Chromium: 1056922
Экспериментальные особенности
Автоматическая отправка отчетов о проблемах с низким контрастом на вкладке «Проблемы».
В DevTools добавлена экспериментальная поддержка автоматического сообщения о проблемах с контрастом на вкладке "Проблемы".
Текст с низким контрастом — наиболее распространенная проблема доступности, автоматически обнаруживаемая в интернете. Отображение этих проблем на вкладке «Проблемы» помогает разработчикам легче их выявлять.
Откройте страницу с задачами, отображаемыми с низким контрастом (например, эту демонстрацию ). Затем откройте вкладку «Задачи» , нажав на кнопку « Количество задач» в строке состояния консоли , чтобы просмотреть список задач.
Проблема с Chromium: 1155460
Полное древовидное представление доступности в панели «Элементы»
Теперь вы можете переключиться на новый, улучшенный режим просмотра страницы в виде дерева доступности.
Текущая панель специальных возможностей отображает лишь ограниченное количество узлов, показывая прямую цепочку предков от корневого узла до проверяемого узла. Новое древовидное представление специальных возможностей призвано улучшить этот аспект и сделать дерево специальных возможностей более удобным для исследования, полезным и простым в использовании для разработчиков.
После активации эксперимента на панели «Элементы» появится новая кнопка; нажав на нее, можно переключаться между существующим деревом DOM и полным деревом доступности.
Обратите внимание, что это эксперимент на ранней стадии. Мы планируем улучшать и расширять функциональность со временем.
Номер выпуска Chromium: 887173
Загрузите предварительные каналы
Рекомендуем использовать Chrome Canary , Dev или Beta в качестве браузера по умолчанию для разработки. Эти предварительные версии предоставляют доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают выявлять проблемы на вашем сайте до того, как их обнаружат пользователи!
Свяжитесь с командой Chrome DevTools
Используйте следующие параметры для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.
- Отправляйте нам свои отзывы и предложения по улучшению функционала на сайте crbug.com .
- Сообщить о проблеме в инструментах разработчика можно с помощью параметра Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
- Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к видеороликам YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .
Что нового в инструментах разработчика
Список всего, что было рассмотрено в серии статей «Что нового в инструментах разработчика» .
- Обновления сервера DevTools MCP
- Улучшенное совместное использование трассировки
- Поддержка @starting-style
- Виджет редактора для отображения: кладка
- Маяк 13
- Предложения по коду от Gemini
- Улучшения для сервера DevTools MCP.
- Более быстрый доступ к помощи ИИ.
- Отладка полной трассировки производительности с помощью Gemini.
- Изменить ориентацию выдвижного ящика
- Программа для разработчиков Google
- Различные важные моменты
- Инструменты разработчика Chrome (MCP) для вашего ИИ-агента
- Отладка дерева сетевых зависимостей с помощью Gemini.
- Экспортируйте свои чаты с помощью Gemini
- Сохраненная конфигурация трека на панели «Производительность».
- Фильтрация сетевых запросов, защищенных IP-адресом.
- Вкладка «Элементы > Макет» добавляет поддержку макета «кирпичная кладка».
- Маяк 12.8.2
- Различные важные моменты
- Получите больше аналитической информации с помощью Gemini.
- В разделе «Сетевые условия» эмулируйте заголовок «Save-Data».
- Отображение базового состояния во всплывающей подсказке свойства CSS.
- Переопределение форм-факторов в подсказках клиентского пользовательского агента
- Маяк 12.8.0
- Различные важные моменты
- Более надежные и эффективные инструменты разработчика Chrome
- Загрузите изображения в систему помощи ИИ для создания стиля.
- Добавьте заголовки запроса в таблицу в разделе «Сеть».
- Ознакомьтесь с основными моментами конференции Google I/O 2025.
- Различные важные моменты
- Улучшения производительности панели
- Предварительно связанные истоки в анализе «дерева сетевых зависимостей»
- Время ответа сервера и время перенаправления в разделе «Задержка запроса документа»
- Перенаправления в сводке сетевых запросов
- Снижение уровня шума в графике производительности.
- Устаревшая функция «Отключить примеры JavaScript»
- Параметр точности геолокации в датчиках
- Улучшения панели элементов
- Упрощенная отладка сложных значений CSS.
- Поддержка @function в Элементах > Стили
- Улучшения сетевой панели
- has-request-header filter
- Прямые сокеты в изолированных веб-приложениях
- Различные важные моменты
- Доступность
- Google I/O 2025
- Изменяйте и сохраняйте изменения CSS в своем рабочем пространстве с помощью Gemini.
- Подключите папку рабочей области и сохраните изменения в исходных файлах.
- Обратитесь в Gemini за информацией об эффективности работы.
- Аннотируйте результаты анализа производительности с помощью Gemini.
- Добавляйте скриншоты в свои чаты с помощью Gemini.
- Новые данные в панели «Производительность»
- Дублированный JavaScript
- Устаревший JavaScript
- Теперь появились предположения, подтверждающие наличие тегов правил.
- Маяк 12.6.0
- Различные важные моменты
- Доступность
- Улучшения производительности панели
- Новые данные об эффективности
- Нажмите, чтобы выделить
- Время выполнения серверных запросов указано в сводке сетевых запросов.
- Фильтрация файлов cookie в разделе «Конфиденциальность и безопасность»
- Размеры указаны в единицах КБ в таблицах на разных панелях.
- Автозаполнение поддерживает corner-shape и corner-*-shape в разделе «Элементы > Стили».
- Экспериментальная функция: выявление проблем с элементами и атрибутами в DOM.
- Маяк 12.5.0
- Различные важные моменты
- Улучшения производительности панели
- Ссылки на источники и скрипты для вызовов профилей и функций в разделе «Производительность»
- LCP с поддержкой данных фазового поля
- Анализ дерева сетевых зависимостей
- В сводке вместо общего и личного времени указывается продолжительность.
- Подсветка наиболее тяжелого стека
- Улучшены состояния пустого пространства для различных панелей.
- Древовидное представление доступности в Elements
- Маяк 12.4.0
- Различные важные моменты
- Панель конфиденциальности и безопасности
- Улучшения производительности панели
- Откалиброванные предустановки регулирования производительности процессора
- Выберите различные события, связанные с производительностью, в одном и том же чате с использованием ИИ.
- Выделение результатов поиска по ключевым словам и сторонним сервисам в разделе «Производительность».
- Полевые данные во всплывающих подсказках и аналитических отчетах по маркерам.
- Информация о принудительном переформатировании
- Информация по оптимизации размера DOM
- Расширьте трассировку производительности с помощью console.timeStamp.
- Улучшения панели элементов
- Значения анимированных стилей в реальном времени
- Поддержка псевдокласса `:open` и различных псевдоэлементов.
- Скопировать все сообщения консоли
- Байтовые единицы на панели «Память»
- Различные важные моменты
- Постоянная история чата с использованием ИИ
- Улучшения производительности панели
- Анализ доставки изображений
- Классическая и современная навигация с помощью клавиатуры
- Игнорируйте нерелевантные скрипты на диаграмме пламени.
- Маркеры временной шкалы и подсветка диапазона при наведении курсора
- Рекомендуемые настройки регулирования скорости
- Временные метки наложены
- Трассировка стека вызовов JavaScript в сводке
- Настройки значка перемещены в меню Elements.
- Новая панель «Что нового»
- Маяк 12.3.0
- Различные важные моменты
- Отладка сетевых запросов, исходных файлов и трассировок производительности с помощью Gemini.
- Просмотреть историю чата с использованием ИИ.
- Управление хранилищем расширений осуществляется в разделе «Приложения» > «Хранилище».
- Улучшения производительности
- Фазы взаимодействия в метриках реального времени
- Информация о блокировке рендеринга находится на вкладке «Сводка».
- Поддержка событий scheduler.postTask и стрелок-инициаторов для них.
- Улучшения в панели «Анимация» и вкладке «Элементы > Стили».
- Перейти из раздела «Элементы» > «Стили» в раздел «Анимация».
- Обновления в режиме реального времени на вкладке «Вычисления».
- Вычисление эмуляции давления в датчиках
- Объекты JavaScript с одинаковым именем сгруппированы по источнику на панели «Память».
- Новый дизайн настроек
- Панель анализа производительности устарела и удалена из инструментов разработчика.
- Различные важные моменты
- Отладка CSS с помощью Gemini
- Управляйте функциями ИИ на специальной вкладке настроек.
- Улучшения производительности панели
- Аннотируйте и делитесь результатами анализа производительности.
- Получайте аналитические данные о производительности прямо на панели «Производительность».
- Обнаружить чрезмерные изменения в компоновке проще.
- Найдите некомпозитные анимации.
- Аппаратная параллельность переносится на датчики.
- Игнорируйте анонимные скрипты и сосредоточьтесь на своем коде в трассировках стека.
- Элементы > Стили: Поддержка режимов написания с боковым * для наложений сетки и ключевых слов, используемых во всем CSS.
- Аудит Lighthouse для страниц, не использующих протокол HTTP, в режимах временного интервала и снимка.
- Улучшения доступности
- Различные важные моменты
- Улучшения сетевой панели
- Переосмысление сетевых фильтров
- Теперь при экспорте HAR по умолчанию исключаются конфиденциальные данные.
- Улучшения панели элементов
- Значения автозаполнения для свойств text-embassis-*
- Переполнение при прокрутке отмечено значком
- Улучшения производительности панели
- Рекомендации в режиме реального времени на основе метрик
- Перемещайтесь по хлебным крошкам
- Улучшения панели памяти
- Новый профиль «Отдельно стоящие элементы».
- Улучшено именование простых объектов JavaScript.
- Отключите динамическое оформление.
- Эксперимент Chrome: совместное использование процессов
- Маяк 12.2.1
- Различные важные моменты
- Программа записи экрана поддерживает экспорт в Puppeteer для Firefox.
- Улучшения производительности панели
- Наблюдения за показателями в реальном времени
- Поисковые запросы в разделе «Сеть»
- См. трассировку стека вызовов performance.mark и performance.measure.
- Используйте тестовые данные адреса в панели автозаполнения.
- Улучшения панели элементов
- Принудительное добавление состояний для конкретных элементов
- В разделе «Элементы > Стили» теперь автоматически заполняется больше свойств сетки.
- Маяк 12.2.0
- Различные важные моменты
- Аналитические функции консоли от Gemini становятся доступны в большинстве европейских стран.
- Обновления панели производительности
- Расширенная сетевая дорожка
- Настраивайте данные о производительности с помощью API расширяемости.
- Подробности в разделе «Время проведения».
- Скопируйте все перечисленные запросы в панели «Сеть».
- Более быстрые снимки состояния кучи с использованием именованных HTML-тегов и меньшим количеством лишнего контента.
- Откройте панель «Анимация», чтобы захватывать анимации и редактировать ключевые кадры в режиме реального времени.
- Маяк 12.1.0
- Улучшения доступности
- Различные важные моменты
- Проверьте позиционирование ссылок CSS в панели «Элементы».
- Улучшения панели источников
- Улучшенная версия "Никогда не делайте здесь паузу"
- Новые обработчики событий привязки прокрутки
- Улучшения сетевой панели
- Обновлены настройки регулирования сети.
- Информация о сотруднике службы поддержки в пользовательских полях формата HAR
- Отправляйте и получайте события WebSocket на панели «Производительность».
- Различные важные моменты
- Улучшения производительности панели
- Перемещайте и скрывайте рельсы с помощью обновленного режима настройки рельсов.
- Игнорировать скрипты на диаграмме пламени
- Снизить производительность процессора в 20 раз.
- Панель анализа производительности будет упразднена.
- Обнаружение чрезмерного использования памяти с помощью новых фильтров в снимках кучи.
- Проверьте разделы хранилища в разделе «Приложение» > «Хранилище».
- Отключите предупреждения о самоуязвимости XSS с помощью флага командной строки.
- Маяк 12.0.0
- Различные важные моменты
- С Gemini вы сможете лучше понимать ошибки и предупреждения в консоли.
- Поддержка правил @position-try в разделе «Элементы > Стили».
- Улучшения панели источников
- Настройте автоматическую форматированную печать и закрытие скобок.
- Обработанные отклоненные обещания помечаются как перехваченные.
- Причины ошибок в консоли
- Улучшения сетевой панели
- Проверьте заголовки Early Hints.
- Скрыть колонку «Водопад»
- Улучшения производительности панели
- Сбор статистики по CSS-селекторам
- Изменить порядок и скрыть следы
- Игнорировать элементы управления в панели «Память»
- Маяк 11.7.1
- Различные важные моменты
- Новая панель автозаполнения
- Улучшенное регулирование скорости сети для WebRTC.
- Поддержка анимаций, управляемых прокруткой, в панели «Анимации».
- Улучшена поддержка вложенности CSS в разделе «Элементы > Стили».
- Панель повышения производительности
- Скрыть функции и их дочерние элементы на диаграмме пламени.
- Стрелки от выбранных инициаторов к событиям, которые они инициировали.
- Маяк 11.6.0
- Всплывающие подсказки для специальных категорий в разделе Память > Снимки кучи
- Приложение > Обновления хранилища
- Байты, используемые для общего хранилища
- Web SQL полностью устарел.
- Улучшения в работе панели покрытия.
- Панель «Слои» может быть устаревшей.
- Прекращение поддержки JavaScript Profiler: четвертый этап, заключительный
- Различные важные моменты
- Найдите пасхальное яйцо
- Обновления панели элементов
- Имитация активной страницы в разделе «Элементы > Стили»
- Палитра цветов, часы углов и редактор сглаживания доступны в качестве резервных вариантов в функции
var() - Инструмент CSS length устарел.
- Всплывающее окно для выбранного результата поиска в разделе «Производительность > Основной трек»
- Обновления сетевой панели
- Кнопка «Очистить» и фильтр поиска на вкладке «Сеть» > «Поток событий»
- Всплывающие подсказки с указанием причин исключения сторонних файлов cookie в разделе «Сеть > Файлы cookie».
- Включать и отключать все точки останова в исходном коде.
- Просмотр загруженных скриптов в инструментах разработчика для Node.js
- Маяк 11.5.0
- Улучшения доступности
- Различные важные моменты
- Официальная коллекция расширений для Recorder уже доступна.
- Улучшения сети
- Причина сбоя указана в столбце «Статус».
- Улучшенное подменю «Копировать»
- Улучшения производительности
- Хлебные крошки на временной шкале
- Инициаторы мероприятий в основной сетке
- Меню выбора экземпляра виртуальной машины JavaScript для инструментов разработчика Node.js
- В разделе «Источники» появилась новая комбинация клавиш и команда.
- Улучшения элементов
- Псевдоэлемент ::view-transition теперь можно редактировать в стилях.
- Поддержка свойства align-content для блочных контейнеров
- Поддержка осанки для эмулируемых складных устройств
- Динамическое оформление тем
- Предупреждения о прекращении использования сторонних файлов cookie в панелях «Сеть» и «Приложения».
- Маяк 11.4.0
- Улучшения доступности
- Различные важные моменты
- Улучшения элементов
- Упрощенная панель фильтров в панели «Сеть».
-
@font-palette-valuesподдержка - Поддерживаемый случай: Использование пользовательского свойства в качестве резервного варианта для другого пользовательского свойства.
- Улучшена поддержка карт исходного кода.
- Улучшения производительности панели
- Расширенные возможности взаимодействия (трек)
- Расширенная фильтрация на вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий».
- Маркеры отступов на панели «Источники».
- Полезные всплывающие подсказки для переопределенных заголовков и содержимого на панели «Сеть».
- Новые параметры командного меню для добавления и удаления шаблонов блокировки запросов.
- Эксперимент с нарушениями CSP отменен.
- Маяк 11.3.0
- Улучшения доступности
- Различные важные моменты
- Поэтапное прекращение использования сторонних файлов cookie
- Проанализируйте файлы cookie вашего веб-сайта с помощью инструмента анализа конфиденциальности Privacy Sandbox.
- Расширенный список игнорируемых объектов
- Шаблон исключения по умолчанию для node_modules
- Теперь перехваченные исключения останавливают выполнение, если они перехвачены или проходят через неигнорируемый код.
- В исходных картах
x_google_ignoreListпереименована вignoreList - Новая функция переключения режима ввода во время удаленной отладки.
- На панели «Элементы» теперь отображаются URL-адреса для узлов #document.
- Эффективная политика безопасности контента в панели приложения
- Улучшена отладка анимации.
- Диалоговое окно «Вы доверяете этому коду?» в исходном коде и предупреждение о самоуязвимости XSS в консоли.
- Точки останова обработчиков событий в веб-воркерах и воллетах
- Новый значок для медиаконтента (
<audio>и<video>. - Предварительная загрузка переименована в Спекулятивную загрузку.
- Маяк 11.2.0
- Улучшения доступности
- Различные важные моменты
- Улучшен раздел @property в Elements > Styles.
- Редактируемое правило @свойства
- Сообщается о проблемах, связанных с некорректными правилами @property.
- Обновленный список устройств для эмуляции.
- Красивое форматирование JSON непосредственно в тегах <script> в исходном коде
- Автозаполнение закрытых полей в консоли
- Маяк 11.1.0
- Улучшения доступности
- Прекращение поддержки Web SQL
- Проверка соотношения сторон скриншота в разделе «Приложение > Манифест».
- Различные важные моменты
- Новый раздел для пользовательских свойств в Elements > Styles.
- Дополнительные улучшения в области локальных переопределений.
- Расширенный поиск
- Улучшенная панель «Источники»
- Упрощенное рабочее пространство на панели «Источники».
- Изменить порядок панелей в разделе «Источники»
- Подсветка синтаксиса и форматированный вывод для большего количества типов скриптов.
- Имитация функции воспроизведения медиаконтента с пониженной прозрачностью
- Маяк 11
- Улучшения доступности
- Различные важные моменты
- Улучшения сетевой панели
- Еще быстрее перезаписывайте веб-контент локально.
- Переопределяйте содержимое XHR-запросов и запросов на получение данных.
- Скрыть запросы на расширение Chrome
- Удобочитаемые коды состояния HTTP
Производительность: см. изменения в приоритете получения сетевых событий.
- В настройках источников по умолчанию включены: сворачивание кода и автоматическое отображение файлов.
- Улучшена отладка проблем, связанных с файлами cookie сторонних разработчиков.
- Новые цвета
- Маяк 10.4.0
- Предварительная загрузка отладки в панели приложения.
- Расширение для отладки C/C++ WebAssembly в DevTools теперь имеет открытый исходный код.
- Различные важные моменты
- (Экспериментальная) Новая эмуляция рендеринга: prefers-reduced-transparency
- (Экспериментальный) Усовершенствованный монитор протокола
- Улучшена отладка отсутствующих таблиц стилей.
- Поддержка линейного тайминга в разделе Элементы > Стили > Редактор сглаживания
- Поддержка сегментов хранилища и просмотр метаданных
- Маяк 10.3.0
- Доступность: сочетания клавиш и улучшенная функция чтения с экрана.
- Различные важные моменты
- Улучшения элементов
- Новый значок CSS-подсетки
- Специфичность селектора во всплывающих подсказках
- Значения пользовательских свойств CSS во всплывающих подсказках
- Улучшения источников
- Подсветка синтаксиса CSS
- Быстрый способ установки условных точек останова
- Приложение > Меры по предотвращению отказов при отслеживании посещений
- Маяк 10.2.0
- По умолчанию игнорировать скрипты содержимого.
- Сеть > Улучшения скорости отклика
- Различные важные моменты
- Поддержка отладки WebAssembly
- Улучшено пошаговое выполнение кода в приложениях Wasm.
- Отладка автозаполнения с помощью панели «Элементы» и вкладки «Проблемы».
- Утверждения в регистраторе
- Маяк 10.1.1
- Улучшения производительности
- Функция performance.mark() отображает время выполнения при наведении курсора в разделе «Производительность > Время выполнения».
- Команда profile() заполняет раздел «Производительность > Главная».
- Предупреждение о медленной реакции пользователя
- Обновления Web Vitals
- Прекращение поддержки JavaScript Profiler: третий этап
- Различные важные моменты
- Переопределение заголовков сетевого ответа
- Улучшения в отладке Nuxt, Vite и Rollup.
- Улучшения CSS в разделе «Элементы > Стили».
- Недопустимые свойства и значения CSS.
- Ссылки на ключевые кадры в сокращенном описании анимации
- Новая настройка консоли: автозаполнение при нажатии клавиши Enter.
- Меню команд акцентирует внимание на созданных файлах.
- Прекращение поддержки JavaScript Profiler: второй этап
- Различные важные моменты
- Обновления регистратора
- Расширения для воспроизведения записи
- Запись с использованием селекторов прокола
- Экспорт записей в виде скриптов Puppeteer с анализом в Lighthouse.
- Получите расширения для Recorder
- Элементы > Обновления стилей
- Документация по CSS находится в панели «Стили».
- Поддержка вложенности CSS
- Отметка точек логирования и условных точек останова в консоли.
- Во время отладки игнорируйте нерелевантные скрипты.
- Началось прекращение поддержки JavaScript Profiler.
- Имитация пониженного контраста
- Маяк 10
- Различные важные моменты
- Отладка цветопередачи в HD-качестве с помощью панели «Стили».
- Улучшен пользовательский интерфейс точек останова
- Настраиваемые ярлыки для записи экрана
- Улучшена подсветка синтаксиса для Angular.
- Настройте порядок кэша в панели приложений.
- Различные важные моменты
- Очистка панели производительности при перезагрузке
- Обновления регистратора
- Просмотрите и выделите код вашего пользовательского сценария в окне записи.
- Настройка типов селекторов записи
- Редактируйте сценарий взаимодействия пользователя во время записи.
- Автоматическая печать красивых изображений на месте
- Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других сервисов.
- Эргономичная и надежная функция автозаполнения в консоли.
- Различные важные моменты
- Запись: Копировать как параметры для шагов, воспроизведение на странице, контекстное меню шага.
- Отображение фактических названий функций в записях исполнения.
- Новые сочетания клавиш на панели «Консоль и источники».
- Улучшена отладка JavaScript.
- Различные важные моменты
- [Экспериментальная версия] Улучшен пользовательский интерфейс при управлении точками останова
- [Экспериментальная] Автоматическая печать изображений на месте
- Подсказки для неактивных свойств CSS
- Автоматическое определение XPath и текстовых селекторов на панели записи.
- Пошагово просматривайте выражения, разделённые запятыми.
- Улучшена настройка списка игнорирования.
- Различные важные моменты
- Настройка сочетаний клавиш в инструментах разработчика
- Переключайте светлую и темную темы с помощью сочетания клавиш.
- Выделение объектов C/C++ в инспекторе памяти.
- Поддержка полной информации об инициаторе для импорта HAR.
- Начать поиск в DOM после нажатия клавиши
Enter - Отображение
startиendзначков для свойства CSS flexboxalign-content - Различные важные моменты
- В панели «Источники» сгруппируйте файлы по дате создания/развертывания.
- Связанные трассировки стека для асинхронных операций
- Автоматически игнорировать известные сторонние скрипты
- Улучшен стек вызовов во время отладки.
- Скрытие источников, помеченных как игнорируемые, на панели «Источники».
- Скрытие файлов, внесенных в список игнорируемых, в командном меню.
- Новая ветка «Взаимодействия» на панели «Производительность».
- Анализ временных характеристик LCP на панели «Аналитика производительности»
- Автоматическое создание имени по умолчанию для записей на панели «Запись».
- Различные важные моменты
- Пошаговое воспроизведение в программе записи
- Поддержка события наведения мыши на панель записи экрана.
- Крупнейший объект Contentful Paint (LCP) на панели анализа производительности.
- Выявите кратковременные всплески текста (FOIT, FOUT) как потенциальные причины изменений в макете.
- Обработчики протоколов в панели «Манифест»
- Значок верхнего слоя на панели «Элементы».
- Подключайте отладочную информацию Wasm во время выполнения.
- Поддержка редактирования в режиме реального времени во время отладки.
- Просматривайте и редактируйте правила @scope в панели «Стили».
- Улучшения карты исходного кода
- Различные важные моменты
- Перезапуск кадра во время отладки
- Параметры замедленного воспроизведения на панели «Запись».
- Создайте расширение для панели записи экрана.
- В панели «Источники» сгруппируйте файлы по дате создания/развертывания.
- Отслеживание времени работы новых пользователей отображается на панели «Аналитика производительности».
- Отобразить назначенный слот элемента
- Имитация аппаратной параллельности для записи производительности
- Предварительный просмотр значений, не относящихся к цвету, при автозаполнении переменных CSS.
- Найдите блокирующие кадры в панели кэша "Назад/Вперед".
- Улучшены подсказки автозаполнения для объектов JavaScript.
- Улучшения карт исходного кода
- Различные важные моменты
- Записывайте события двойного щелчка и щелчка правой кнопкой мыши на панели «Рекордер».
- В панели Lighthouse появились новый временной интервал и режим моментального снимка.
- Улучшено управление масштабированием на панели «Аналитика производительности».
- Подтвердите удаление записи выступления.
- Изменяйте порядок панелей на панели «Элементы».
- Выбор цвета вне браузера
- Улучшен предварительный просмотр значений в режиме отладки.
- Поддержка больших блоков данных для виртуальных аутентификаторов
- Новые сочетания клавиш на панели «Источники».
- Улучшения карт исходного кода
- Функция предварительного просмотра: новая панель анализа производительности.
- Новые сочетания клавиш для имитации светлой и темной тем оформления.
- Улучшена безопасность на вкладке «Предварительный просмотр сети».
- Улучшена перезарядка в точке перелома.
- Обновления консоли
- Отменить запись пользовательского сценария в начале.
- Отображение унаследованных псевдоэлементов подсветки в панели «Стили».
- Различные важные моменты
- [Экспериментальная версия] Копирование изменений CSS
- [Экспериментальная версия] Выбор цвета вне браузера
- Импорт и экспорт записанных пользовательских сценариев в виде JSON-файла.
- Отображение каскадных слоев в панели «Стили».
- Поддержка цветовой функции
hwb() - Улучшена демонстрация частной собственности.
- Различные важные моменты
- [Экспериментальная версия] Новый временной интервал и режим моментального снимка в панели «Маяк».
- Просматривайте и редактируйте правила @supports в панели «Стили».
- Поддержка распространенных селекторов по умолчанию.
- Настройте селектор записи
- Переименовать запись
- Предварительный просмотр свойств класса/функции при наведении курсора
- Частично отображаемые кадры на панели «Производительность»
- Различные важные моменты
- Ограничение количества запросов WebSocket
- Новая панель API для создания отчетов в панели приложений.
- Поддержка: дождитесь, пока элемент станет видимым/кликабельным на панели записи.
- Улучшенное оформление, форматирование и фильтрация консоли.
- Расширение для отладки Chrome с файлами карты исходного кода
- Улучшена структура папок с исходными файлами на панели «Источники».
- Отображение исходных файлов рабочих процессов на панели «Источники».
- Обновления автоматической темной темы Chrome
- Удобная сенсорная панель выбора цвета и разделенное окно
- Различные важные моменты
- Функция предварительного просмотра: Полностраничное дерево доступности
- Более точные изменения доступны на вкладке «Изменения».
- Установите более длительный тайм-аут для записи пользовательского потока.
- Убедитесь, что ваши страницы кэшируются, используя вкладку «Кэширование» (Назад/Вперед)
- Новый фильтр панели свойств
- Имитация функции принудительного выбора цветов в CSS для работы с медиафайлами.
- Отображать линейки при наведении курсора
- Поддерживается
row-reverseиcolumn-reverseв редакторе Flexbox. - Новые сочетания клавиш для воспроизведения XHR-запросов и развертывания всех результатов поиска.
- Маяк № 9 на панели «Маяк»
- Улучшенная панель «Источники»
- Различные важные моменты
- [Экспериментальные] Конечные точки на панели API отчетов
- Предварительный просмотр функции: Новая панель записи
- Обновите список устройств в режиме устройства.
- Автозаполнение с возможностью редактирования в формате HTML
- Улучшена отладка кода.
- Синхронизация настроек инструментов разработчика между устройствами.
- Функция предварительного просмотра: новая панель обзора CSS.
- Восстановлен и улучшен интерфейс редактирования длины CSS и копирования текста.
- Имитация функции CSS prefers-contrast для работы с медиафайлами
- Имитация функции автоматической темной темы Chrome
- Скопируйте объявления как JavaScript в панели «Стили».
- В панели «Сеть» появилась новая вкладка «Полезная нагрузка».
- Улучшено отображение свойств в панели «Свойства».
- Возможность скрыть ошибки CORS в консоли.
- Предварительный просмотр и оценка
Intlобъектов в консоли. - Согласованные трассировки стека асинхронных операций
- Сохраните боковую панель «Консоль».
- Устаревшая панель кэширования приложений в панели приложений.
- [Экспериментальная версия] Новая панель API для создания отчетов в панели приложения.
- Новые инструменты для создания CSS-стилей с указанием длины
- Скрыть проблемы на вкладке «Проблемы»
- Улучшено отображение свойств.
- Маяк 8.4 на панели «Маяк»
- Сортируйте фрагменты текста на панели «Источники».
- Новые ссылки на переведённые примечания к выпуску и форму сообщения об ошибке перевода.
- Улучшен пользовательский интерфейс меню командных инструментов разработчика.
- Используйте инструменты разработчика на предпочитаемом вами языке.
- Новые устройства Nest Hub в списке устройств
- Исходные испытания отображаются в подробном представлении Frame.
- Новый значок запроса контейнера CSS
- Новый флажок для инвертирования сетевых фильтров.
- В ближайшее время боковая панель консоли будет упразднена.
- Отображение необработанных заголовков
Set-Cookiesна вкладке «Проблемы» и панели «Сеть». - Последовательное отображение собственных методов доступа в качестве отдельных свойств в консоли.
- Корректные трассировки стека ошибок для встроенных скриптов с использованием #sourceURL
- Измените формат цвета в панели «Вычисления».
- Замените пользовательские всплывающие подсказки на стандартные HTML-подсказки.
- [Экспериментальная функция] Скрытие проблем на вкладке «Проблемы»
- Редактируемые CSS-контейнерные запросы в панели «Стили».
- Предварительный просмотр веб-пакета на панели «Сеть».
- Отладка API для составления отчетов об атрибуции
- Улучшена обработка строк в консоли.
- Улучшена отладка CORS.
- Маяк 8.1
- Новый URL-адрес заметки в панели «Манифест».
- Исправлены селекторы соответствия CSS.
- Форматирование JSON-ответов на панели «Сеть»
- редактор CSS-сеток
- Поддержка повторного объявления
constв консоли - Просмотрщик порядка источников
- Новый ярлык для просмотра подробностей кадра.
- Расширенная поддержка отладки CORS
- Переименуйте метку XHR в Fetch/XHR.
- Отфильтруйте типы ресурсов Wasm на панели «Сеть».
- Подсказки клиента User-Agent для устройств на вкладке «Состояние сети»
- Сообщайте о проблемах в режиме "Особенности" на вкладке "Проблемы".
- Включите вычислительные пересечения на панели «Производительность».
- Маяк 7.5 на панели «Маяк»
- Устаревшее контекстное меню «Перезапуск кадра» в стеке вызовов.
- [Экспериментальный] Монитор протокола
- [Экспериментальный] диктофон для кукловодов
- Всплывающая информация Web Vitals
- Новый инспектор памяти
- Визуализация CSS-эффекта привязки к прокрутке
- Новая панель настроек значка
- Улучшенный предварительный просмотр изображения с информацией о соотношении сторон.
- Новая кнопка «Состояние сети» с параметрами для настройки
Content-Encoding. - ярлык для просмотра вычисленного значения
- ключевое слово
accent-color - Классифицируйте типы проблем с помощью цветов и значков.
- Удалить токены доверия
- Заблокированные функции в окне сведений о фрейме
- Фильтрация экспериментов в настройках «Эксперименты»
- В панели «Хранилище кэша» появился новый столбец
Vary Header - Поддержка проверки частной торговой марки на JavaScript
- Расширенная поддержка отладки с использованием точек останова.
- Поддержка предварительного просмотра при наведении курсора с использованием квадратных скобок
[] - Улучшена структура HTML-файлов.
- Корректные трассировки стека ошибок для отладки Wasm.
- Новые инструменты отладки CSS flexbox
- Новое наложение основных веб-функций
- Переместил счетчик проблем в строку состояния консоли.
- Сообщить о проблемах с доступом к доверенным веб-ресурсам
- Форматирование строк как (допустимых) строковых литералов JavaScript в консоли.
- В панели приложений появилась новая панель «Доверенные токены».
- Имитация функции CSS color-gamut media
- Улучшенные инструменты для прогрессивных веб-приложений
- В панели «Сеть» появился новый столбец
Remote Address Space. - Улучшения производительности
- Отображение разрешенных/запрещенных функций в окне сведений о раме.
- В панели «Cookies» появился новый столбец
SameParty. - Устаревшая нестандартная поддержка
fn.displayName - Отключена функция «
Don't show Chrome Data Saver warningв меню настроек. - [Экспериментальная функция] Автоматическое создание отчетов о проблемах с низким контрастом на вкладке «Проблемы».
- [Экспериментальная версия] Полное отображение дерева доступности на панели «Элементы»
- Поддержка отладки нарушений, связанных с доверенными типами.
- Сделать снимок экрана узла за пределами области просмотра.
- Новая вкладка «Доверенные токены» для сетевых запросов.
- Маяк №7 на панели «Маяк»
- Поддержка принудительного использования состояния CSS
:target - Новый ярлык для дублирования элемента
- Палитры цветов для пользовательских свойств CSS
- Новые сочетания клавиш для копирования свойств CSS.
- Новая опция для отображения файлов cookie, декодированных из URL-адреса.
- Удалять только видимые файлы cookie
- В разделе «Хранилище» появилась новая опция для удаления сторонних файлов cookie.
- Редактировать подсказки клиента User-Agent для пользовательских устройств
- Сохранить настройку "записывать сетевой журнал".
- Просмотр подключений WebTransport осуществляется на панели «Сеть».
- Терминал «Онлайн» переименован в «Без ограничения скорости».
- New copy options in the Console, Sources panel, and Styles pane
- New Service Workers information in the Frame details view
- Measure Memory information in the Frame details view
- Provide feedback from the Issues tab
- Dropped frames in the Performance panel
- Emulate foldable and dual-screen in Device Mode
- [Experimental] Automate browser testing with Puppeteer Recorder
- [Experimental] Font editor in the Styles pane
- [Experimental] CSS flexbox debugging tools
- [Experimental] New CSP Violations tab
- [Experimental] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
- Faster DevTools startup
- New CSS angle visualization tools
- Emulate unsupported image types
- Simulate storage quota size in the Storage pane
- New Web Vitals lane in the Performance panel
- Report CORS errors in the Network panel
- Cross-origin isolation information in the Frame details view
- New Web Workers information in the Frame details view
- Display opener frame details for opened windows
- Open Network panel from the Service Workers pane
- Copy property value
- Copy stacktrace for network initiator
- Preview Wasm variable value on mouseover
- Evaluate Wasm variable in the Console
- Consistent units of measurement for file/memory sizes
- Highlight pseudo elements in the Elements panel
- [Experimental] CSS Flexbox debugging tools
- [Experimental] Customize chords keyboard shortcuts
- New CSS Grid debugging tools
- New WebAuthn tab
- Move tools between top and bottom panel
- New Computed sidebar pane in the Styles pane
- Grouping CSS properties in the Computed pane
- Lighthouse 6.3 in the Lighthouse panel
-
performance.mark()events in the Timings section - New
resource-typeandurlfilters in the Network panel - Frame details view updates
- Deprecation of
Settingsin the More tools menu - [Experimental] View and fix color contrast issues in the CSS Overview panel
- [Experimental] Customize keyboard shortcuts in DevTools
- New Media panel
- Capture node screenshots using Elements panel context menu
- Issues tab updates
- Emulate missing local fonts
- Emulate inactive users
- Emulate
prefers-reduced-data - Support for new JavaScript features
- Lighthouse 6.2 in the Lighthouse panel
- Deprecation of "other origins" listing in the Service Workers pane
- Show coverage summary for filtered items
- New frame details view in Application panel
- Accessible color suggestion in the Styles pane
- Reinstate Properties pane in the Elements panel
- Human-readable
X-Client-Dataheader values in the Network panel - Auto-complete custom fonts in the Styles pane
- Consistently display resource type in Network panel
- Clear buttons in the Elements and Network panels
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- Support for new JavaScript features
- New app shortcut warnings in the Manifest pane
- Service worker
respondWithevents in the Timing tab - Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Console settings updates
- Performance panel updates
- New icons for breakpoints, conditional breakpoints, and logpoints
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- More accurate promise terminology in the Console
- Styles pane updates
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Emulate vision deficiencies
- Emulate locales
- Cross-Origin Embedder Policy (COEP) debugging
- New icons for breakpoints, conditional breakpoints, and logpoints
- View network requests that set a specific cookie
- Dock to left from the Command Menu
- The Settings option in the Main Menu has moved
- The Audits panel is now the Lighthouse panel
- Delete all Local Overrides in a folder
- Updated Long Tasks UI
- Maskable icon support in the Manifest pane
- Moto G4 support in Device Mode
- Cookie-related updates
- More accurate web app manifest icons
- Hover over CSS
contentproperties to see unescaped values - Source map errors in the Console
- Setting for disabling scrolling past the end of a file
- Support for
letandclassredeclarations in the Console - Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Точки логарифма
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- сворачивание кода
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()to log a node's fired events in the Console (video) - Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- Поддержка BigInt
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- JavaScript VM instances clearly listed in the Memory panel
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Локальные переопределения
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Несколько записей на панели «Исполнение».
- Надежное пошаговое выполнение кода с помощью воркеров в асинхронном коде
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- Монитор производительности
- Боковая панель консоли
- Сгруппировать похожие сообщения в консоли
- Bonus tip: Toggle hover pseudo-class (video)
- Поддержка удаленной отладки для нескольких клиентов
- Рабочие пространства 2.0
- 4 новых аудита
- Имитация push-уведомлений с использованием пользовательских данных
- Запускайте фоновые события синхронизации с помощью пользовательских тегов.
- Bonus tip: Event listener breakpoints (video)
- В консоли вас ждут первоклассные возможности.
- Новые рабочие процессы создания скриншотов
- Подсветка CSS Grid
- Новый консольный API для запроса объектов.
- Новые консольные фильтры
- Импорт HAR в панели «Сеть»
- Предварительный просмотр ресурсов кэша
- Более предсказуемая отладка кэша
- Покрытие кода на уровне блоков
- имитация регулирования скорости мобильного устройства
- Просмотр использования хранилища
- Просмотр времени кэширования ответов сервис-воркером.
- Включите индикатор FPS в командном меню.
- Настройте поведение колесика мыши на масштабирование или прокрутку.
- Поддержка отладки модулей ES6
- Новая аудиторская комиссия
- Значки сторонних производителей
- Новый жест для функции «Продолжить»
- Переходите на асинхронный режим.
- Более информативный предварительный просмотр объектов в консоли.
- Более информативный выбор контекста в консоли
- Обновления в режиме реального времени на вкладке «Покрытие».
- Более простые варианты регулирования скорости сети
- Асинхронные стеки включены по умолчанию
- Анализ покрытия кода CSS и JS
- Скриншоты на всю страницу
- Блокировка запросов
- Перейдите через asyncwait
- Единое командное меню