Sofia Emelianova
Jecelyn Yeen
Обновления регистратора
Поддержка расширений воспроизведения
Recorder поддерживает пользовательские параметры воспроизведения, которые можно встроить в DevTools с помощью расширения.
Попробуйте пример расширения . Выберите новый параметр пользовательского воспроизведения, чтобы открыть пользовательский интерфейс пользовательского воспроизведения.
Чтобы настроить Recorder в соответствии со своими потребностями и интегрировать его с вашими инструментами, рассмотрите возможность разработки собственного расширения: изучите API chrome.devtools.recorder и ознакомьтесь с другими примерами расширений .
Проблема с хромом: 1400243 .
Запись с селекторами проколов
В дополнение к пользовательским, CSS, ARIA, текстовым и XPath селекторам теперь можно записывать с использованием pierce селекторов . Эти селекторы ведут себя как селекторы CSS, но также могут пронзать теневые корни.
Начните новую запись на странице с теневым DOM и проверьте 
Проколите типы селекторов для записи . Запишите свое взаимодействие с элементами в теневом DOM и проверьте соответствующий шаг.
Проблема с хромом: 1411188 .
Экспортировать как сценарий Puppeteer с анализом Lighthouse
Recorder представляет новую опцию экспорта: Puppeteer (включая анализ Lighthouse) . С Puppeteer вы можете автоматизировать и контролировать Chrome. С Lighthouse вы можете захватывать и улучшать производительность вашего веб-сайта.
Откройте вашу запись, нажмите 
Экспортируйте , выберите новую опцию и сохраните файл .js .
Запустите скрипт Puppeteer , чтобы получить отчет Lighthouse в файле flow.report.html .
Получить расширения
Исследуйте возможности настройки вашего рекордера, например, с помощью пользовательских параметров экспорта. Получите расширения для рекордера , нажав на 
Экспорт > Получить расширения в записи.
Не стесняйтесь добавлять свои собственные расширения в список расширений для рекордеров . Мы с нетерпением ждем вашего расширения в списке!
Проблемы с Chromium: 1417104 , 1413168 .
Элементы > Обновления стилей
CSS-документация
Сколько раз в день вы просматриваете документацию по свойствам CSS? Панель Elements > Styles теперь показывает краткое описание при наведении курсора на свойство.
Подсказка также содержит ссылку «Узнать больше» , которая перенаправит вас на страницу MDN CSS Reference по этому свойству.
Если вы хорошо знаете CSS, подсказки могут показаться вам надоедливыми. Чтобы отключить их все, отметьте 
Не показывать .
Чтобы включить их снова, проверьте 
Настройки > Настройки > Элементы > 
Показать подсказку по документации CSS .
Проблема с хромом: 1401107 .
Поддержка вложенности CSS
Панель «Элементы > Стили» теперь распознает синтаксис вложенности CSS и применяет вложенные стили к нужным элементам.
Проблема с хромом: 1172985 .
Отметка точек входа и условных точек останова в консоли
Для дальнейшего улучшения расширенного UX точек останова , Консоль теперь отмечает сообщения, вызванные точками останова:
-
console.*вызывает условные точки останова с оранжевым вопросительным знаком? - Сообщения Logpoint с розовыми двумя точками
..
Консоль теперь предоставляет правильные ссылки на точки останова в исходных файлах вместо скриптов VM<number> , которые Chrome создает для запуска любого фрагмента Javascript в V8 .
Щелкните ссылку рядом с сообщением о точке останова, чтобы перейти непосредственно к редактору точек останова.
Проблема с хромом: 1027458 .
Игнорировать нерелевантные скрипты во время отладки
Чтобы помочь вам сосредоточиться на самых важных частях кода, теперь вы можете добавлять ненужные скрипты в список игнорирования прямо из дерева файлов на панели Источники > Страница .
Щелкните правой кнопкой мыши любой скрипт или папку и выберите один из параметров, связанных с игнорированием. Вы можете увидеть параметры для добавления или удаления скрипта или папки в список или из него. Отладчик игнорирует скрипты, добавленные в список, и пропускает их в стеке вызовов.
Все игнорируемые скрипты и папки отображаются в дереве файлов серым цветом.
Если вы выбрали игнорируемый сценарий, кнопка «Настроить» перенесет вас на страницу 
Настройки > Список игнорирования . Вы также можете скрыть игнорируемые источники из дерева файлов с помощью 
> Скрыть игнорируемые источники 
.
Проблема с хромом: 883325 .
Началось прекращение поддержки JavaScript Profiler
Еще в Chrome 58 команда DevTools планировала в конечном итоге прекратить поддержку JavaScript Profiler и предоставить разработчикам Node.js и Deno возможность использовать панель Performance для профилирования производительности процессора JavaScript.
Эта версия DevTools (112) запускает четырехфазное устаревание JavaScript Profiler . Панель JavaScript Profiler теперь показывает соответствующий предупреждающий баннер.
Вместо Профилировщика используйте панель «Производительность» для профилирования ЦП.
Узнайте больше и оставьте отзыв в соответствующем RFC и crbug.com/1354548 .
Проблема с хромом: 1417647 .
Эмулировать пониженную контрастность
Вкладка «Рендеринг» добавляет новую опцию в список «Эмуляция нарушений зрения» — «Сниженная контрастность» . С помощью этой опции вы можете узнать, как ваш веб-сайт выглядит для людей с пониженной чувствительностью к контрастности.
Обратите внимание, что параметры списка были обновлены, чтобы указать, какую цветовую нечувствительность представляют параметры.
С DevTools вы можете найти и исправить все проблемы с контрастом сразу. Для получения дополнительной информации см. Сделайте свой веб-сайт более читабельным .
Проблемы с Chromium: 1412719 , 1412721 .
Маяк 10
Панель Lighthouse теперь работает на Lighthouse 10.0.1 . Для получения более подробной информации см. Что нового в Lighthouse 10.0.1 .
Чтобы изучить основы использования панели Lighthouse в DevTools, см. раздел Lighthouse: Оптимизация скорости веб-сайта .
Маяк > 
> 
Устаревшая навигация теперь отключена по умолчанию. Эта опция использует устаревшую конфигурацию Lighthouse в режиме навигации.
Lighthouse 10 теперь использует Moto G Power как устройство эмуляции по умолчанию . DevTools добавил это устройство в 
Настройки > Устройства .
Проблема с хромом: 772558 .
Предупреждение консоли о необходимости удалить обработчик выборки неработающего сервисного работника
Chrome 112 пропускает обработчики выборки no-op (без операции) service worker, поскольку они могут замедлить навигацию, но не служат цели. Такие обработчики больше не требуются для того, чтобы ваш веб-сайт квалифицировался как Progressive Web App .
Консоль теперь показывает предупреждение, если находит обработчик выборки без операции на вашем сайте. Рассмотрите возможность его удаления.
Проблема с хромом: 1347319 .
Разные моменты
Вот некоторые важные исправления в этом выпуске:
- На панели «Источники» > «Точки останова» теперь отображаются различные пути к файлам рядом с неоднозначными именами файлов ( 1403924 ).
- В разделе Main на диаграмме пламени панели «Производительность» теперь
CpuProfiler::StartProfilingобозначен какProfiler Overhead( 1358602 ). - DevTools улучшил автодополнение:
- DevTools добавил точку останова прослушивателя событий , позволяющую сделать паузу при открытии окна «картинка в картинке» документа ( 1315352 ).
- DevTools разработали обходной путь, который правильно отображает артефакты Vue2 Webpack как JavaScript ( 1416562 ).
- Параметр консоли получает лучшее название: Автоматически разворачивать сообщения console.trace(). ( 1139616 ).
Загрузите каналы предварительного просмотра
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!
Свяжитесь с командой Chrome DevTools
Используйте следующие варианты для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.
- Отправляйте нам отзывы и запросы на новые функции на crbug.com .
- Сообщить о проблеме DevTools можно с помощью функции Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
- Твитните @ChromeDevTools .
- Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .
Что нового в DevTools
Список всего, что было рассмотрено в серии «Что нового в DevTools» .
- Улучшения панели производительности
- Предварительно подключенные источники в представлении «Дерево сетевых зависимостей»
- Время ответа сервера и перенаправления в отчете «Задержка запроса документа»
- Перенаправления в сводке сетевых запросов
- Уменьшение шума в трассировке производительности
- Устаревшее «Отключить примеры JavaScript»
- Параметр точности геолокации в датчиках
- Улучшения панели элементов
- Упрощенная отладка сложных значений CSS
- Поддержка @function в Элементах > Стили
- Улучшения сетевой панели
- фильтр has-request-header
- Прямые сокеты в изолированных веб-приложениях
- Разные моменты
- Доступность
- Google I/O 2025 выпуск
- Изменяйте и сохраняйте изменения CSS в своем рабочем пространстве с помощью Gemini
- Подключите папку рабочей области и сохраните изменения в исходных файлах.
- Спросите Gemini о показателях производительности
- Аннотируйте результаты производительности с помощью Gemini
- Добавляйте скриншоты в ваши чаты с Gemini
- Новые идеи на панели «Производительность»
- Дублированный JavaScript
- Устаревший JavaScript
- Спекуляции теперь поддерживают теги правил
- Маяк 12.6.0
- Разные моменты
- Доступность
- Улучшения панели производительности
- Новые данные о производительности
- Нажмите, чтобы выделить
- Тайминги сервера в сводке сетевых запросов
- Фильтрация файлов cookie в разделе «Конфиденциальность и безопасность»
- Размеры в единицах кБ в таблицах по панелям
- Автозаполнение поддерживает corner-shape и corner-*-shape в Элементах > Стили
- Экспериментально: выделение проблем с элементами и атрибутами в DOM
- Маяк 12.5.0
- Разные моменты
- Улучшения панели производительности
- Ссылки на источники и скрипты для вызовов профилей и функций в Performance
- Поддержка данных LCP по фазовому полю
- Анализ дерева сетевых зависимостей
- Продолжительность вместо общего и собственного времени в Резюме
- Самая тяжелая подсветка стека
- Улучшены пустые состояния для различных панелей.
- Древовидное представление доступности в Elements
- Маяк 12.4.0
- Разные моменты
- Панель конфиденциальности и безопасности
- Улучшения панели производительности
- Откалиброванные предустановки троттлинга ЦП
- Выбирайте различные события производительности в одном чате ИИ
- Подсветка первой и третьей стороны в Performance
- Полевые данные в подсказках и аналитике маркеров
- Инсайт принудительной перекомпоновки
- Инсайт «Оптимизация размера DOM»
- Расширьте трассировку производительности с помощью console.timeStamp
- Улучшения панели элементов
- Значения анимированных стилей в реальном времени
- Поддержка псевдокласса :open и различных псевдоэлементов
- Копировать все сообщения консоли
- Байтовые единицы на панели «Память»
- Разные моменты
- Постоянная история чата ИИ
- Улучшения панели производительности
- Понимание доставки изображений
- Классическая и современная навигация с помощью клавиатуры
- Игнорировать нерелевантные скрипты в диаграмме пламени
- Маркер временной шкалы и выделение диапазона при наведении курсора
- Рекомендуемые настройки регулирования
- Маркеры времени в наложении
- Стек трассировки вызовов JS в Резюме
- Настройки значка перемещены в меню Elements
- Новая панель «Что нового»
- Маяк 12.3.0
- Разные моменты
- Отладка сетевых запросов, исходных файлов и трассировка производительности с помощью Gemini
- Просмотр истории чата ИИ
- Управляйте хранилищем расширений в разделе «Приложение» > «Хранилище».
- Улучшения производительности
- Фазы взаимодействия в метриках в реальном времени
- Отображать информацию о блокировках на вкладке «Сводка»
- Поддержка событий scheduler.postTask и их стрелок-инициаторов
- Улучшения панели «Анимации» и вкладки «Элементы» > «Стили»
- Перейти от Элементы > Стили к Анимации
- Обновления в режиме реального времени на вкладке «Вычисления»
- Эмуляция вычислительного давления в датчиках
- Объекты JS с одинаковыми именами, сгруппированные по источнику на панели «Память»
- Новый вид настроек
- Панель анализа производительности устарела и удалена из DevTools.
- Разные моменты
- Отладка CSS с помощью Gemini
- Управляйте функциями ИИ на специальной вкладке настроек
- Улучшения панели производительности
- Комментируйте и делитесь результатами оценки эффективности
- Получайте данные о производительности прямо на панели «Производительность»
- Легче обнаружить чрезмерные изменения макета
- Найдите некомпозированные анимации
- Аппаратный параллелизм переходит на датчики
- Игнорируйте анонимные скрипты и сосредоточьтесь на своем коде в трассировках стека
- Элементы > Стили: Поддержка режимов написания sideways-* для наложений сетки и ключевых слов CSS-wide
- Аудиты Lighthouse для страниц, не являющихся HTTP, в режимах временного интервала и моментального снимка
- Улучшения доступности
- Разные моменты
- Улучшения сетевой панели
- Переосмысление сетевых фильтров
- Экспорт HAR теперь по умолчанию исключает конфиденциальные данные.
- Улучшения панели элементов
- Автозаполнение значений для свойств text-emphasis-*
- Переполнение прокрутки отмечено значком
- Улучшения панели производительности
- Рекомендации в живых метриках
- Навигация по хлебным крошкам
- Улучшения панели памяти
- Новый профиль «Отдельные элементы»
- Улучшенное именование простых объектов JS
- Отключить динамическую тему
- Эксперимент Chrome: совместное использование процессов
- Маяк 12.2.1
- Разные моменты
- Recorder поддерживает экспорт в Puppeteer для Firefox
- Улучшения панели производительности
- Наблюдения за текущими показателями
- Поисковые запросы в сетевом треке
- Посмотрите трассировки стека вызовов performance.mark и performance.measure
- Используйте тестовые адресные данные на панели автозаполнения
- Улучшения панели элементов
- Принудительно устанавливать больше состояний для определенных элементов
- Элементы > Стили теперь автоматически заполняют больше свойств сетки
- Маяк 12.2.0
- Разные моменты
- Консольные аналитики Gemini доступны в большинстве европейских стран
- Обновления панели производительности
- Расширенный сетевой трек
- Настройте данные о производительности с помощью API-интерфейса расширения
- Подробности в разделе «Тайминги»
- Копировать все перечисленные запросы на панели «Сеть»
- Более быстрые снимки кучи с именованными тегами HTML и меньшим беспорядком
- Откройте панель «Анимации», чтобы захватить анимацию и редактировать @keyframes в реальном времени
- Маяк 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 устарел
- Всплывающее окно для выбранного результата поиска в Performance > Main track
- Обновления сетевой панели
- Кнопка «Очистить» и фильтр поиска на вкладке «Сеть» > «EventStream»
- Подсказки с причинами исключения сторонних файлов cookie в разделе «Сеть» > «Файлы cookie»
- Включить и отключить все точки останова в источниках
- Просмотр загруженных скриптов в DevTools для Node.js
- Маяк 11.5.0
- Улучшения доступности
- Разные моменты
- Официальная коллекция расширений Recorder уже доступна
- Улучшения сети
- Причина сбоя в столбце «Статус»
- Улучшенное подменю «Копировать»
- Улучшения производительности
- Навигационная цепочка на временной шкале
- Организаторы мероприятия на Главном треке
- Меню выбора экземпляра виртуальной машины JavaScript для Node.js DevTools
- Новые сочетания клавиш и команды в Sources
- Улучшения элементов
- Псевдоэлемент ::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 в Элементах > Стили
- Редактируемое правило @property
- Сообщается о проблемах с недействительными правилами @property
- Обновлен список устройств для эмуляции
- Красиво распечатать встроенный JSON в тегах скрипта в Источниках
- Автозаполнение приватных полей в консоли
- Маяк 11.1.0
- Улучшения доступности
- Устаревание Web SQL
- Проверка соотношения сторон скриншота в приложении > Манифест
- Разные моменты
- Новый раздел для пользовательских свойств в Элементах > Стили
- Больше улучшений локального переопределения
- Расширенный поиск
- Улучшенная панель «Источники»
- Оптимизированное рабочее пространство на панели «Источники»
- Изменение порядка панелей в источниках
- Подсветка синтаксиса и удобная печать для большего количества типов сценариев
- Эмулировать функцию медиа-предпочтений с пониженной прозрачностью
- Маяк 11
- Улучшения доступности
- Разные моменты
- Улучшения сетевой панели
- Переопределяйте веб-контент локально еще быстрее
- Переопределить содержимое XHR и запросы на выборку
- Скрыть запросы на расширение Chrome
- Коды статуса HTTP, понятные человеку
Производительность: посмотрите изменения в приоритете выборки сетевых событий.
- Настройки источников включены по умолчанию: сворачивание кода и автоматическое раскрытие файлов
- Улучшена отладка проблем со сторонними файлами cookie.
- Новые цвета
- Маяк 10.4.0
- Предварительная отладка на панели приложений
- Расширение отладки C/C++ WebAssembly для DevTools теперь имеет открытый исходный код
- Разные моменты
- (Экспериментально) Новая эмуляция рендеринга: favors-reduced-transparency
- (Экспериментальный) Улучшенный монитор протокола
- Улучшена отладка отсутствующих таблиц стилей.
- Поддержка линейного тайминга в Элементах > Стили > Редакторе замедления
- Поддержка сегментов хранения и просмотр метаданных
- Маяк 10.3.0
- Доступность: команды с клавиатуры и улучшенное чтение с экрана
- Разные моменты
- Улучшения элементов
- Новый значок CSS subgrid
- Специфичность селектора в подсказках
- Значения пользовательских свойств CSS в подсказках
- Улучшения источников
- Подсветка синтаксиса CSS
- Сочетание клавиш для установки условных точек останова
- Приложение > Смягчение последствий отслеживания отказов
- Маяк 10.2.0
- Игнорировать скрипты контента по умолчанию
- Сеть > Улучшения реагирования
- Разные моменты
- Поддержка отладки WebAssembly
- Улучшенное поведение при шагах в приложениях Wasm
- Отладка автозаполнения с помощью панели «Элементы» и вкладки «Проблемы»
- Утверждения в регистраторе
- Маяк 10.1.1
- Улучшения производительности
- performance.mark() показывает время при наведении курсора в разделе «Производительность» > «Время»
- Команда profile() заполняет Performance > Main
- Предупреждение о медленном взаимодействии с пользователем
- Обновления Web Vitals
- Устаревание JavaScript Profiler: третий этап
- Разные моменты
- Переопределить заголовки сетевого ответа
- Улучшения отладки Nuxt, Vite и Rollup
- Улучшения CSS в Элементах > Стили
- Недопустимые свойства и значения CSS
- Ссылки на ключевые кадры в свойстве сокращенной записи анимации
- Новая настройка консоли: Автозаполнение при вводе
- Меню команд выделяет созданные файлы
- Устаревание JavaScript Profiler: второй этап
- Разные моменты
- Обновления регистратора
- Расширения для воспроизведения рекордера
- Запись с селекторами проколов
- Экспорт записей в виде сценариев Puppeteer с анализом Lighthouse
- Получить расширения для Recorder
- Элементы > Обновления стилей
- Документация CSS на панели «Стили»
- Поддержка вложенности CSS
- Отметка точек входа и условных точек останова в консоли
- Игнорировать нерелевантные скрипты во время отладки
- Началось прекращение поддержки JavaScript Profiler
- Эмулировать пониженную контрастность
- Маяк 10
- Разные моменты
- Отладка HD-цвета с помощью панели «Стили»
- Улучшенный UX точки останова
- Настраиваемые сочетания клавиш для диктофона
- Лучшая подсветка синтаксиса для Angular
- Реорганизация кэшей на панели приложений
- Разные моменты
- Очистка панели производительности при перезагрузке
- Обновления регистратора
- Просмотрите и выделите код вашего пользовательского потока в Recorder
- Настройте типы селекторов записи
- Редактировать пользовательский поток во время записи
- Автоматическая печать на месте
- Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других
- Эргономичное и последовательное автозаполнение в консоли
- Разные моменты
- Регистратор: копирование в качестве параметров для шагов, воспроизведение на странице, контекстное меню шагов
- Показывать реальные названия функций в записях выступлений
- Новые сочетания клавиш на панели «Консоль и источники»
- Улучшенная отладка JavaScript
- Разные моменты
- [Экспериментально] Улучшенный UX при управлении контрольными точками
- [Экспериментальная] Автоматическая печать на месте
- Подсказки для неактивных свойств CSS
- Автоматическое определение XPath и селекторов текста на панели Recorder
- Пошаговое выполнение выражений, разделенных запятыми
- Улучшена настройка списка игнорирования
- Разные моменты
- Настройка сочетаний клавиш в DevTools
- Переключение между светлой и темной темами с помощью сочетания клавиш
- Выделение объектов C/C++ в инспекторе памяти
- Поддержка полной информации об инициаторе для импорта HAR
- Начать поиск DOM после нажатия
Enter - Отображение
startиendзначков для свойств CSS flexboxalign-content - Разные моменты
- Группировка файлов по авторству/развертыванию на панели «Источники»
- Связанные трассировки стека для асинхронных операций
- Автоматически игнорировать известные сторонние скрипты
- Улучшен стек вызовов во время отладки
- Скрытие игнорируемых источников на панели «Источники»
- Скрытие игнорируемых файлов в меню команд
- Новый трек «Взаимодействия» на панели «Производительность»
- Разбивка таймингов LCP на панели Performance Insights
- Автоматически генерировать имя по умолчанию для записей на панели «Рекордер»
- Разные моменты
- Пошаговое воспроизведение в диктофоне
- Поддержка событий при наведении мыши на панель Recorder
- Самая большая отрисовка содержимого (LCP) на панели аналитики производительности
- Определите вспышки текста (FOIT, FOUT) как потенциальные основные причины смещений макета
- Обработчики протоколов на панели «Манифест»
- Значок верхнего слоя на панели «Элементы»
- Прикрепите отладочную информацию Wasm во время выполнения
- Поддержка редактирования в реальном времени во время отладки
- Просмотр и редактирование @scope в правилах на панели «Стили»
- Улучшения исходной карты
- Разные моменты
- Перезапустить фрейм во время отладки
- Параметры медленного воспроизведения на панели «Рекордер»
- Создайте расширение для панели Recorder
- Группировка файлов по авторству/развертыванию на панели «Источники»
- Новый трек времени пользователя на панели аналитики производительности
- Показать назначенный слот элемента
- Моделирование аппаратного параллелизма для записи производительности
- Предварительный просмотр нецветового значения при автозаполнении переменных CSS
- Определите блокирующие кадры на панели кэша «Назад/вперед»
- Улучшенные предложения автозаполнения для объектов JavaScript
- Улучшения исходных карт
- Разные моменты
- Захват событий двойного и правого щелчка на панели «Рекордер»
- Новый временной диапазон и режим моментального снимка на панели Lighthouse
- Улучшенный контроль масштабирования на панели Performance Insights
- Подтвердите удаление записи выступления
- Изменение порядка панелей на панели «Элементы»
- Выбор цвета вне браузера
- Улучшен предварительный просмотр встроенных значений во время отладки
- Поддержка больших объемов данных для виртуальных аутентификаторов
- Новые сочетания клавиш на панели «Источники»
- Улучшения исходных карт
- Функция предварительного просмотра: новая панель аналитики производительности
- Новые сочетания клавиш для эмуляции светлых и темных тем
- Улучшена безопасность на вкладке «Просмотр сети»
- Улучшена перезагрузка в точке останова
- Обновления консоли
- Отменить запись потока пользователя в начале
- Отображение унаследованных псевдоэлементов подсветки на панели «Стили»
- Разные моменты
- [Экспериментально] Копировать изменения CSS
- [Экспериментально] Выбор цвета вне браузера
- Импорт и экспорт записанных пользовательских потоков в виде файла JSON
- Просмотр каскадных слоев на панели «Стили»
- Поддержка цветовой функции
hwb() - Улучшено отображение частной собственности
- Разные моменты
- [Экспериментально] Новый временной диапазон и режим моментального снимка на панели Lighthouse
- Просмотр и редактирование @supports в правилах на панели «Стили»
- Поддержка общих селекторов по умолчанию
- Настройте селектор записи
- Переименовать запись
- Предварительный просмотр свойств класса/функции при наведении курсора
- Частично представленные кадры на панели «Производительность»
- Разные моменты
- Регулирование запросов WebSocket
- Новая панель API отчетов на панели приложений
- Поддержка ожидания, пока элемент не станет видимым/кликабельным на панели Recorder
- Улучшенный стиль, форматирование и фильтрация консоли
- Отладка расширения Chrome с помощью исходных файлов карты
- Улучшенное дерево исходных папок на панели «Источники»
- Отображение исходных файлов рабочих файлов на панели «Источники»
- Обновления автоматической темной темы Chrome
- Сенсорный выбор цвета и разделенная панель
- Разные моменты
- Функция предварительного просмотра: дерево доступности на всю страницу
- Более точные изменения на вкладке «Изменения»
- Установите более длительный тайм-аут для записи пользовательского потока
- Убедитесь, что ваши страницы кэшируются с помощью вкладки «Кэш назад/вперед»
- Новый фильтр панели «Свойства»
- Эмулировать медиа-функцию CSS с принудительным выбором цветов
- Показывать линейки при наведении курсора
- Поддержка
row-reverseиcolumn-reverseв редакторе Flexbox - Новые сочетания клавиш для воспроизведения XHR и раскрытия всех результатов поиска
- Маяк 9 на панели «Маяк»
- Улучшенная панель «Источники»
- Разные моменты
- [Экспериментально] Конечные точки на панели API отчетов
- Функция предварительного просмотра: новая панель Recorder
- Обновить список устройств в режиме устройства
- Автозаполнение с помощью функции «Изменить как HTML»
- Улучшенный опыт отладки кода
- Синхронизация настроек DevTools на разных устройствах
- Функция предварительного просмотра: Новая панель обзора CSS
- Восстановлен и улучшен процесс редактирования и копирования длины CSS.
- Эмулировать CSS-функцию предпочтений-контрастных медиа
- Эмулируйте функцию Chrome Auto Dark Theme
- Копировать объявления как JavaScript на панели «Стили»
- Новая вкладка «Полезная нагрузка» на панели «Сеть»
- Улучшено отображение свойств на панели «Свойства».
- Возможность скрыть ошибки CORS в консоли
- Правильный предварительный просмотр и оценка объектов
Intlв консоли - Последовательные асинхронные трассировки стека
- Сохраните боковую панель консоли
- Устаревшая панель кэша приложений на панели приложений
- [Экспериментальная] Новая панель API отчетов на панели приложений
- Новые инструменты для разработки длины CSS
- Скрыть проблемы на вкладке «Проблемы»
- Улучшено отображение свойств
- Маяк 8.4 на панели Маяк
- Сортировка фрагментов на панели «Источники»
- Новые ссылки на переведенные заметки о выпуске и сообщения об ошибках перевода
- Улучшенный пользовательский интерфейс для меню команд DevTools
- Используйте DevTools на предпочитаемом вами языке
- Новые устройства Nest Hub в списке устройств
- Испытания оригинала в представлении сведений о раме
- Значок новых запросов контейнера CSS
- Новый флажок для инвертирования сетевых фильтров
- Предстоящее прекращение поддержки боковой панели консоли
- Отображение необработанных заголовков
Set-Cookiesна вкладке «Проблемы» и панели «Сеть» - Последовательное отображение собственных методов доступа в качестве собственных свойств в консоли
- Правильные трассировки стека ошибок для встроенных скриптов с #sourceURL
- Изменить формат цвета на панели «Вычисления»
- Замените пользовательские подсказки на собственные подсказки HTML
- [Экспериментально] Скрыть проблемы на вкладке «Проблемы»
- Редактируемые запросы контейнера CSS на панели «Стили»
- Предварительный просмотр веб-пакета на панели «Сеть»
- Отладка API отчетов об атрибуции
- Лучшая обработка строк в консоли
- Улучшенная отладка CORS
- Маяк 8.1
- Новый URL-адрес заметки на панели «Манифест»
- Исправлены селекторы соответствия CSS
- Красивая печать ответов JSON на панели «Сеть»
- Редактор сетки CSS
- Поддержка повторных деклараций
constв консоли - Просмотрщик исходного заказа
- Новый ярлык для просмотра сведений о кадре
- Расширенная поддержка отладки CORS
- Переименовать метку XHR в Fetch/XHR
- Фильтровать тип ресурса Wasm на панели «Сеть»
- Подсказки User-Agent Client для устройств на вкладке «Состояния сети»
- Сообщить о проблемах в режиме Quirks на вкладке «Проблемы»
- Включить вычисление пересечений на панели производительности
- Маяк 7.5 на панели Маяк
- Устаревшее контекстное меню «Перезапустить кадр» в стеке вызовов
- [Экспериментальный] Монитор протокола
- [Экспериментальный] Кукольный рекордер
- Всплывающее окно с информацией Web Vitals
- Новый инспектор памяти
- Визуализация CSS scroll-nap
- Новая панель настроек значка
- Улучшенный предварительный просмотр изображения с информацией о соотношении сторон
- Кнопка «Новые сетевые условия» с опциями для настройки
Content-Encoding - ярлык для просмотра вычисленного значения
- ключевое слово
accent-color - Категоризируйте типы проблем с помощью цветов и значков
- Удалить токены доверия
- Заблокированные функции в представлении сведений о кадре
- Фильтр экспериментов в настройках «Эксперименты»
- Новый столбец
Vary Headerна панели хранилища кэша - Поддержка JavaScript проверка частной торговой марки
- Расширенная поддержка отладки точек останова
- Поддержка предварительного просмотра при наведении с помощью нотации
[] - Улучшенная структура HTML-файлов
- Правильные трассировки стека ошибок для отладки Wasm
- Новые инструменты отладки CSS flexbox
- Новый оверлей Core Web Vitals
- Количество проблем перемещено в строку состояния консоли.
- Сообщить о проблемах Trusted Web Activity
- Форматировать строки как (допустимые) строковые литералы JavaScript в консоли
- Новая панель «Токены доверия» на панели приложений
- Эмулировать медиа-функцию CSS-цветовой гаммы
- Улучшенный инструментарий Progressive Web Apps
- Новый столбец
Remote Address Spaceна панели «Сеть» - Улучшения производительности
- Отображение разрешенных/запрещенных функций в представлении сведений о кадре
- Новый столбец
SamePartyна панели «Файлы cookie» - Устаревшая нестандартная поддержка
fn.displayName - Прекращение поддержки функции
Don't show Chrome Data Saver warningв меню «Настройки» - [Экспериментальная функция] Автоматическое сообщение о проблемах с низкой контрастностью на вкладке «Проблемы»
- [Экспериментальная функция] Полное представление дерева доступности на панели «Элементы»
- Поддержка отладки нарушений доверенных типов
- Сделать снимок экрана узла за пределами области просмотра
- Новая вкладка «Токены доверия» для сетевых запросов
- Маяк 7 на панели «Маяк»
- Поддержка принудительного применения состояния CSS
:target - Новый ярлык для дублирования элемента
- Палитры цветов для пользовательских свойств CSS
- Новые сочетания клавиш для копирования свойств CSS
- Новая опция для отображения файлов cookie, декодированных по URL
- Очистить только видимые файлы cookie
- Новая опция для очистки сторонних файлов cookie на панели «Хранилище»
- Редактировать клиентские подсказки User-Agent для пользовательских устройств
- Сохраните настройку «запись сетевого журнала»
- Просмотр подключений WebTransport на панели «Сеть»
- «Онлайн» переименовано в «Без регулирования»
- Новые параметры копирования на панели «Консоль», «Источники» и «Стили»
- Новая информация о Service Workers в представлении сведений о кадре
- Информация об измерении памяти в представлении сведений о кадре
- Оставьте отзыв на вкладке «Проблемы»
- Пропущенные кадры на панели «Производительность»
- Эмуляция складного и двухэкранного режима в режиме устройства
- [Экспериментальная функция] Автоматизируйте тестирование браузера с помощью Puppeteer Recorder
- [Экспериментальный] Редактор шрифтов на панели «Стили»
- [Экспериментальные] Инструменты отладки CSS flexbox
- [Экспериментальная] Новая вкладка «Нарушения CSP»
- [Экспериментально] Новый расчет цветового контраста — Advanced Perceptual Contrast Algorithm (APCA)
- Более быстрый запуск DevTools
- Новые инструменты визуализации углов CSS
- Эмулировать неподдерживаемые типы изображений
- Имитация размера квоты хранилища на панели «Хранилище»
- Новая полоса Web Vitals на панели Performance
- Сообщить об ошибках CORS на панели «Сеть»
- Информация о кросс-источниковой изоляции в представлении сведений о кадре
- Новая информация о Web Workers в представлении сведений о кадре
- Отображение сведений о раме открывателя для открытых окон
- Откройте панель «Сеть» из панели «Service Workers»
- Копировать стоимость недвижимости
- Копировать трассировку стека для сетевого инициатора
- Предварительный просмотр значения переменной Wasm при наведении курсора
- Оценить переменную Wasm в консоли
- Единые единицы измерения размеров файлов/памяти
- Выделите псевдоэлементы на панели «Элементы»
- [Экспериментальные] Инструменты отладки CSS Flexbox
- [Экспериментально] Настройка сочетаний клавиш для аккордов
- Новые инструменты отладки CSS Grid
- Новая вкладка WebAuthn
- Перемещать инструменты между верхней и нижней панелями
- Новая вычисляемая боковая панель на панели «Стили»
- Группировка свойств CSS на панели «Вычисляемые»
- Маяк 6.3 на панели Маяк
- события
performance.mark()в разделе «Время выполнения» - Новые фильтры
resource-typeиurlна панели «Сеть» - Обновления просмотра деталей рамы
- Устаревание
Settingsв меню «Дополнительные инструменты» - [Экспериментальная функция] Просмотр и исправление проблем с цветовым контрастом на панели обзора CSS
- [Экспериментально] Настройка сочетаний клавиш в DevTools
- Новая медиа панель
- Создавайте снимки экрана узлов с помощью контекстного меню панели «Элементы»
- Обновления вкладки «Проблемы»
- Эмулировать отсутствующие локальные шрифты
- Эмулировать неактивных пользователей
- Эмуляция
prefers-reduced-data - Поддержка новых функций JavaScript
- Маяк 6.2 на панели Маяк
- Прекращение использования списка «другие источники» на панели Service Workers
- Показать сводку покрытия для отфильтрованных элементов
- Новый вид сведений о кадре на панели приложений
- Доступные цветовые рекомендации на панели «Стили»
- Восстановите панель «Свойства» на панели «Элементы»
- Понятные для человека значения заголовков
X-Client-Dataна панели «Сеть» - Автоматическое заполнение пользовательских шрифтов на панели «Стили»
- Постоянно отображать тип ресурса на панели «Сеть»
- Кнопки очистки на панелях «Элементы» и «Сеть»
- Редактирование стилей для фреймворков CSS-in-JS
- Маяк 6 на панели «Маяк»
- Устаревание First Meaningful Paint (FMP)
- Поддержка новых функций JavaScript
- Предупреждения о новых ярлыках приложений на панели манифеста
- Service Worker
respondWithсобытия на вкладке «Время» - Последовательное отображение вычисляемой панели
- Смещения байт-кода для файлов WebAssembly
- Копирование и вырезание построчно на панели «Источники»
- Обновления настроек консоли
- Обновления панели производительности
- Новые значки для точек останова, условных точек останова и точек регистрации
- Устраните неполадки сайта с помощью новой вкладки «Проблемы»
- Просмотр информации о доступности во всплывающей подсказке режима проверки
- Обновления панели производительности
- Более точная терминология обещаний в Консоли
- Обновления панели стилей
- Прекращение поддержки панели «Свойства» на панели «Элементы»
- Поддержка ярлыков приложений на панели манифеста
- Имитировать дефекты зрения
- Эмулировать локали
- Отладка политики Cross-Origin Embedder (COEP)
- Новые значки для точек останова, условных точек останова и точек регистрации
- Просмотр сетевых запросов, устанавливающих определенный файл cookie
- Закрепить слева от меню команд
- Пункт «Настройки» в главном меню перемещен
- Панель аудита теперь называется панелью Lighthouse.
- Удалить все локальные переопределения в папке
- Обновленный интерфейс длинных задач
- Поддержка маскируемых значков на панели манифеста
- Поддержка Moto G4 в режиме устройства
- Обновления, связанные с файлами cookie
- Более точные значки манифеста веб-приложений
- Наведите указатель мыши на свойства
contentCSS, чтобы увидеть неэкранированные значения. - Ошибки исходной карты в консоли
- Настройка отключения прокрутки за пределами конца файла
- Поддержка повторных деклараций
letиclassв консоли - Улучшенная отладка WebAssembly
- Запросить цепочки инициаторов на вкладке «Инициатор»
- Выделите выбранный сетевой запрос в обзоре.
- Столбцы URL и пути на панели «Сеть»
- Обновленные строки User-Agent
- Новый пользовательский интерфейс конфигурации панели аудита
- Режимы покрытия кода по функциям или по блокам
- Теперь покрытие кода должно инициироваться перезагрузкой страницы.
- Устранение причины блокировки cookie-файла
- Просмотр значений cookie-файлов
- Имитация различных предпочтений предпочитаемой цветовой схемы и предпочитаемого уменьшенного движения
- Обновления покрытия кода
- Устранение причины запроса сетевого ресурса
- Панели «Консоль» и «Источники» снова учитывают настройки отступов.
- Новые сочетания клавиш для навигации курсора
- Поддержка нескольких клиентов на панели аудита
- Отладка обработчика платежей
- Lighthouse 5.2 на панели аудита
- Самая большая контентная отрисовка на панели «Производительность»
- Проблемы с файлами DevTools из главного меню
- Копировать стили элементов
- Визуализируйте изменения макета
- Lighthouse 5.1 на панели аудита
- Синхронизация тем ОС
- Сочетание клавиш для открытия редактора точек останова
- Кэш предварительной выборки на панели «Сеть»
- Частные свойства при просмотре объектов
- Уведомления и push-сообщения в панели приложений
- Автозаполнение с помощью значений CSS
- Новый пользовательский интерфейс для сетевых настроек
- Сообщения WebSocket в экспорте HAR
- Кнопки импорта и экспорта HAR
- Использование памяти в реальном времени
- Номера портов регистрации сервисных работников
- Проверка событий фоновой загрузки и фоновой синхронизации
- Кукловод для Firefox
- Полезные предустановки при автодополнении функций CSS
- Очистить данные сайта из меню команд
- Просмотреть все базы данных IndexedDB
- Просмотр несжатого размера ресурса при наведении курсора
- Встроенные точки останова на панели «Точки останова»
- Количество ресурсов IndexedDB и Cache
- Настройка отключения подробной подсказки Inspect
- Настройка переключения отступа табуляции в редакторе
- Выделить все узлы, затронутые свойством CSS
- Lighthouse v4 на панели аудита
- Просмотрщик двоичных сообщений WebSocket
- Сделать снимок экрана области в меню команд
- Фильтры Service Worker на панели «Сеть»
- Обновления панели производительности
- Длинные задачи в записях панели производительности
- Первая краска в разделе «Время»
- Бонусный совет: сочетание клавиш для просмотра цветовых кодов RGB и HSL (видео)
- Точки логирования
- Подробные подсказки в режиме проверки
- Экспорт данных о покрытии кода
- Навигация по консоли с помощью клавиатуры
- Линия контрастности AAA в палитре цветов
- Сохраните пользовательские переопределения геолокации
- Сворачивание кода
- Вкладка «Фреймы» переименована во вкладку «Сообщения».
- Бонусный совет: Фильтрация сетевой панели по свойству (видео)
- Визуализируйте показатели производительности на панели «Производительность»
- Выделение текстовых узлов в дереве DOM
- Скопируйте путь JS в узел DOM
- Обновления панели аудита , включая новый аудит, который обнаруживает библиотеки JS и новые ключевые слова для доступа к панели аудита из меню команд
- Бонусный совет: используйте режим устройства для проверки медиазапросов (видео)
- Наведите указатель мыши на результат Live Expression , чтобы выделить узел DOM.
- Сохраняйте узлы DOM как глобальные переменные
- Информация об инициаторе и приоритете теперь в импорте и экспорте HAR
- Доступ к меню команд из главного меню
- Точки останова «картинка в картинке»
- Бонусный совет: используйте
monitorEvents()для регистрации событий, запущенных узлом, в консоли (видео) - Живые выражения в консоли
- Выделение узлов DOM во время Eager Evaluation
- Оптимизация панели производительности
- Более надежная отладка
- Включить регулирование сети из меню команд
- Автозаполнение условных точек останова
- Перерыв на событиях AudioContext
- Отладка приложений Node.js с помощью ndb
- Дополнительный совет: измеряйте реальные взаимодействия пользователей с помощью API User Timing
- Жадная оценка
- Аргументы-подсказки
- Автодополнение функций
- Ключевые слова ES2017
- Lighthouse 3.0 на панели аудита
- Поддержка BigInt
- Добавление путей свойств на панель Watch
- «Показывать временные метки» перемещено в «Настройки»
- Бонусный совет: Менее известные методы работы с консолью (видео)
- Поиск по всем заголовкам сети
- Предварительный просмотр значений переменных CSS
- Копировать как получить
- Новые аудиты, параметры конфигурации рабочего стола и просмотр трассировок
- Остановить бесконечные циклы
- Пользовательское время на вкладках «Производительность»
- Экземпляры JavaScript VM четко указаны на панели «Память»
- Вкладка «Сеть» переименована во вкладку «Страница»
- Обновления темной темы
- Информация о прозрачности сертификата на панели «Безопасность»
- Функции изоляции сайта на панели «Производительность»
- Бонусный совет: Панель слоев + Инспектор анимации (видео)
- Черный ящик на панели «Сеть»
- Автоматическая настройка масштабирования в режиме устройства
- Красивая печать на вкладках «Предварительный просмотр» и «Ответ»
- Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр»
- Поддержка локальных переопределений стилей внутри HTML
- Бонусный совет: скрипты фреймворка Blackbox, которые сделают точки останова прослушивателя событий более полезными
- Локальные переопределения
- Новые инструменты доступности
- Вкладка «Изменения»
- Новые SEO и аудиты производительности
- Несколько записей на панели «Исполнение»
- Надежное выполнение кода с рабочими процессами в асинхронном коде
- Бонусный совет: автоматизируйте действия DevTools с помощью Puppeteer (видео)
- Монитор производительности
- Боковая панель консоли
- Группировать похожие сообщения консоли
- Бонусный совет: Переключение псевдокласса наведения (видео)
- Поддержка удаленной отладки нескольких клиентов
- Рабочие пространства 2.0
- 4 новых аудита
- Имитация push-уведомлений с пользовательскими данными
- Запуск событий фоновой синхронизации с помощью пользовательских тегов
- Бонусный совет: контрольные точки прослушивателя событий (видео)
- Ожидание высшего уровня в консоли
- Новые рабочие процессы создания снимков экрана
- Подсветка сетки CSS
- Новый API консоли для запроса объектов
- Новые фильтры консоли
- Импорт HAR на панели «Сеть»
- Предварительно просматриваемые ресурсы кэша
- Более предсказуемая отладка кэша
- Покрытие кода на уровне блоков
- Моделирование ограничения скорости мобильного устройства
- Просмотр использования хранилища
- Просмотр кэширования ответов сервисного работника
- Включить счетчик FPS из меню команд
- Установить поведение колесика мыши для масштабирования или прокрутки
- Поддержка отладки для модулей ES6
- Новая панель аудита
- Значки третьих лиц
- Новый жест для «Продолжить здесь»
- Шаг в асинхронность
- Более информативные предварительные просмотры объектов в консоли
- Более информативный выбор контекста в консоли
- Обновления в режиме реального времени на вкладке «Покрытие»
- Более простые варианты регулирования сети
- Асинхронные стеки включены по умолчанию
- Покрытие кода CSS и JS
- Скриншоты на всю страницу
- Блокировать запросы
- Перешагнуть через асинхронное ожидание
- Единое меню команд