Kayce Basques
В Chrome 66 появятся новые функции и существенные изменения в инструментах разработчика, в том числе:
- Игнорировать скрипт на панели «Сеть»
- Автоматическая настройка масштабирования в режиме устройства.
- Красивое форматирование текста на вкладках «Предварительный просмотр» и «Ответ» .
- Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр» .
- Локальное переопределение стилей внутри HTML
Читайте дальше или посмотрите видеоверсию примечаний к выпуску ниже.
Игнорировать скрипт на панели «Сеть»
В столбце «Инициатор» на панели «Сеть» отображается причина запроса ресурса. Например, если загрузка изображения осуществляется с помощью JavaScript, в столбце «Инициатор» будет показана строка кода JavaScript, вызвавшая запрос.
Ранее, если ваш фреймворк оборачивал сетевые запросы в обертку, столбец «Инициатор» был малополезен. Все сетевые запросы указывали на одну и ту же строку кода обертки.
В этой ситуации вам действительно нужно увидеть код приложения, который вызывает запрос. Теперь это возможно:
- Наведите курсор на столбец «Инициатор» . Во всплывающем окне отобразится стек вызовов, вызвавший запрос.
- Щелкните правой кнопкой мыши по вызову, который вы хотите скрыть от результатов инициации.
- Выберите «Добавить скрипт в список игнорирования» . Теперь в столбце «Инициатор» скрыты все вызовы из скрипта, которые вы игнорировали.
Рисунок 1. Игнорирование requests.js
Управляйте игнорируемыми скриптами на вкладке «Список игнорируемых» в настройках .
Подробнее об игнорировании скриптов см. в разделе «Игнорирование скрипта или шаблона скриптов» .
Красивое форматирование текста на вкладках «Предварительный просмотр» и «Ответ».
Теперь вкладка «Предварительный просмотр» на панели «Сеть» по умолчанию форматирует ресурсы, если обнаруживает, что они были сжаты.
Рисунок 2. Вкладка « Предварительный просмотр» по умолчанию отображает содержимое файла analytics.js в отформатированном виде.
Чтобы просмотреть неминифицированную версию ресурса, используйте вкладку «Ответ» . Вы также можете вручную форматировать ресурсы с помощью новой кнопки «Формат» на вкладке «Ответ» .
Рисунок 3. Ручная форматированная печать содержимого analytics.js с помощью кнопки «Формат» .
Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр».
Ранее вкладка «Предварительный просмотр» на панели «Сеть» в определенных ситуациях отображала код HTML-ресурса, а в других — предварительный просмотр самого HTML-кода. Теперь вкладка «Предварительный просмотр» всегда отображает базовый HTML-код. Она не предназначена для полноценной работы в браузере, поэтому может отображать HTML не совсем так, как вы ожидаете. Чтобы увидеть HTML-код, щелкните вкладку «Ответ» или щелкните правой кнопкой мыши ресурс и выберите «Открыть в панели «Источники»» .
Рисунок 4. Предварительный просмотр HTML на вкладке «Предварительный просмотр» .
Автоматическая настройка масштабирования в режиме устройства.
В режиме устройства откройте выпадающее меню «Масштабирование» и выберите «Автоматическая настройка масштаба» , чтобы автоматически изменять размер области просмотра при изменении ориентации устройства.
Функция «Локальное переопределение» теперь работает с некоторыми стилями, определенными в HTML.
Когда в Chrome 65 появилась функция «Локальные переопределения» в инструментах разработчика, одним из ограничений было то, что она не могла отслеживать изменения стилей, определенных внутри HTML. Например, на рисунке 7 в head документа есть правило стиля, которое объявляет font-weight: bold для элементов h1 .
Рисунок 5. Пример стилей, определенных в HTML.
В Chrome 65, если вы изменяли параметр font-weight через панель « Стили » в инструментах разработчика, локальные переопределения не отслеживали это изменение. Другими словами, при следующей перезагрузке стиль возвращался к font-weight: bold . Но в Chrome 66 подобные изменения сохраняются при каждой загрузке страницы.
Дополнительный совет: игнорируйте скрипты фреймворка, чтобы сделать точки останова обработчика событий более полезными.
Когда я создавал видео «Начало отладки JavaScript» , некоторые зрители отметили, что точки останова для обработчиков событий бесполезны для приложений, построенных на основе фреймворков, поскольку обработчики событий часто обернуты в код фреймворка. Например, на рисунке 8 я установил точку останова click в DevTools. Когда я нажимаю кнопку в демонстрации, DevTools автоматически приостанавливается на первой строке кода обработчика событий. В данном случае приостановка происходит в коде-обертке Vue.js на строке 1802, что не очень полезно.
Рисунок 6. Точка останова click в коде-обертке Vue.js.
Поскольку скрипт Vue.js находится в отдельном файле, я могу игнорировать его в панели «Стек вызовов» , чтобы сделать этот click пункт более полезным.
Рисунок 7. Игнорирование скрипта Vue.js на панели «Стек вызовов» .
В следующий раз, когда я нажму кнопку и сработает точка останова click , код Vue.js выполнится без паузы, а затем остановится на первой строке кода в обработчике событий моего приложения, именно там, где я и хотел сделать паузу.
Рисунок 8. Точка останова click теперь приостанавливается на коде обработчика событий приложения.
Загрузите предварительные каналы
Рекомендуем использовать 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 осуществляется на панели «Сеть».
- Терминал «Онлайн» переименован в «Без ограничения скорости».
- Новые параметры копирования в консоли, панели «Источники» и панели «Стили».
- Информация о новых работниках сферы услуг в подробном представлении структуры.
- Информация об объеме памяти отображается в окне сведений о кадре.
- Оставьте свой отзыв во вкладке "Проблемы".
- В панели «Производительность» наблюдается выпадение кадров.
- Эмуляция складных устройств и двухэкранных режимов в режиме устройства.
- [Экспериментальная версия] Автоматизация тестирования браузера с помощью Puppeteer Recorder
- [Экспериментальная] Редактор шрифтов в панели «Стили»
- [Экспериментальные] Инструменты отладки CSS flexbox
- [Экспериментальная] Новая вкладка «Нарушения CSP»
- [Экспериментальная версия] Новый алгоритм расчета цветового контраста — Усовершенствованный алгоритм перцептивного контраста (APCA)
- Быстрый старт с использованием DevTools
- Новые инструменты визуализации углов CSS
- Эмуляция неподдерживаемых типов изображений
- Имитируйте размер квоты хранения на панели «Хранилище».
- В панели «Производительность» появилась новая полоса «Web Vitals».
- Сообщайте об ошибках CORS в панели «Сеть».
- Информация о междоменной изоляции в представлении сведений о кадре.
- Информация о новых веб-воркерах отображается в подробном представлении фрейма.
- Отображение сведений о рамке открывающегося окна.
- Откройте панель «Сеть» из панели «Сервисные работники».
- Скопировать значение свойства
- Скопировать трассировку стека для сетевого инициатора
- Предварительный просмотр значения переменной Wasm при наведении курсора мыши
- Оцените переменную Wasm в консоли.
- Единые единицы измерения для размеров файлов/памяти
- Выделите псевдоэлементы на панели «Элементы».
- [Экспериментальные] инструменты отладки CSS Flexbox
- [Экспериментальная версия] Настройка сочетаний клавиш для аккордов
- Новые инструменты отладки CSS Grid
- Новая вкладка WebAuthn
- Перемещайте инструменты между верхней и нижней панелями.
- В панели «Стили» появилась новая боковая панель «Вычисляемые элементы».
- Группировка свойств CSS на панели «Вычисляемые»
- Маяк 6.3 на панели «Маяк»
- События
performance.mark()в разделе Timings - В панели «Сеть» появились новые фильтры
resource-typeиurl. - Обновления отображения подробной информации о кадре
- Прекращение поддержки
Settingsв меню «Дополнительные инструменты». - [Экспериментальная функция] Просмотр и исправление проблем с цветовым контрастом на панели «Обзор CSS».
- [Экспериментальная функция] Настройка сочетаний клавиш в инструментах разработчика
- Панельная дискуссия по новым медиа
- Создавайте снимки экрана узлов с помощью контекстного меню панели «Элементы».
- Обновления вкладки «Проблемы»
- Имитация отсутствующих локальных шрифтов
- Имитация неактивных пользователей
- Emulate
prefers-reduced-data - Поддержка новых функций JavaScript
- Маяк 6.2 на панели «Маяк»
- Удалена возможность отображения раздела «другие источники происхождения» в панели «Работники сферы услуг».
- Показать сводку покрытия для отфильтрованных элементов
- Новый режим просмотра сведений о фрейме в панели приложений.
- Доступные варианты цветовых решений в панели «Стили».
- Восстановить свойства (панель «Элементы»)
- Удобочитаемые значения заголовка
X-Client-Dataна панели «Сеть». - Автозаполнение пользовательских шрифтов в панели «Стили».
- Единообразное отображение типа ресурса на панели «Сеть»
- Кнопки очистки на панелях «Элементы» и «Сеть»
- Редактирование стилей для CSS-in-JS фреймворков
- Маяк №6 на панели «Маяк»
- Первая значимая амортизация краски (FMP)
- Поддержка новых функций JavaScript
- В панели «Манифест» появились предупреждения о новых ярлыках приложений.
- События Service Worker
respondWithотображаются на вкладке «Время». - Единообразное отображение панели «Вычисления»
- Смещения байт-кода для файлов WebAssembly
- Построчное копирование и вырезание в панели «Источники».
- Обновления настроек консоли
- Обновления панели производительности
- Новые значки для точек останова, условных точек останова и точек логирования.
- Исправляйте ошибки на сайте с помощью новой вкладки «Проблемы».
- Информация о доступности отображается во всплывающей подсказке в режиме «Проверить элемент».
- Обновления панели производительности
- Более точная терминология обещаний в консоли.
- Обновления панели стилей
- Прекращение поддержки панели «Свойства» в панели «Элементы».
- Поддержка ярлыков приложений в панели «Манифест».
- Имитация нарушений зрения
- Имитация локаций
- Отладка политики встраивания из разных источников (COEP)
- Новые значки для точек останова, условных точек останова и точек логирования.
- Просмотрите сетевые запросы, которые устанавливают определенный cookie-файл.
- Прикрепите панель слева из командного меню.
- Пункт «Настройки» в главном меню перемещен.
- Комитет по аудиту теперь называется «Комитет маяка».
- Удалите все локальные переопределения в папке.
- Обновлен пользовательский интерфейс для длительных задач.
- Поддержка маскируемых значков в панели «Манифест».
- Поддержка Moto G4 в режиме устройства
- Обновления, касающиеся файлов cookie.
- Более точные значки манифеста веб-приложения
- Наведите курсор на свойства
contentCSS, чтобы увидеть значения без экранирования. - Ошибки карты исходного кода в консоли
- Настройка для отключения прокрутки за конец файла.
- Поддержка повторного объявления операторов
letиclassв консоли. - Улучшена отладка WebAssembly.
- Запросите цепочки инициаторов на вкладке «Инициатор».
- Выделите выбранный сетевой запрос в разделе «Обзор».
- Столбцы URL и пути на панели «Сеть»
- Обновлены строки User-Agent.
- Новый пользовательский интерфейс настройки панели аудита.
- Режимы покрытия кода для каждой функции или для каждого блока
- Теперь анализ покрытия кода должен запускаться при перезагрузке страницы.
- Выясните причину блокировки cookie.
- Просмотреть значения файлов cookie
- Имитация различных предпочтений в отношении цветовой схемы и уменьшения интенсивности движения.
- Обновления покрытия кода
- Выясните причину запроса сетевого ресурса.
- Панели «Консоль» и «Источники» снова учитывают настройки отступов.
- Новые сочетания клавиш для навигации курсором
- Поддержка нескольких клиентов в панели аудита.
- Отладка обработчика платежей
- Lighthouse 5.2 в панели «Аудиты»
- Самый большой и информативный элемент оформления в панели «Производительность».
- Сообщайте о проблемах в инструментах разработчика из главного меню.
- Скопировать стили элемента
- Визуализация изменений компоновки
- Lighthouse 5.1 в панели «Аудиты»
- синхронизация тем ОС
- Сочетание клавиш для открытия редактора точек останова
- Предварительная загрузка кэша в панели «Сеть»
- Частная собственность при осмотре объектов
- Уведомления и push-уведомления в панели приложения.
- Автозаполнение с использованием значений CSS
- Новый пользовательский интерфейс для сетевых настроек.
- Сообщения WebSocket в экспорте HAR
- Кнопки импорта и экспорта HAR
- Использование памяти в реальном времени
- номера портов регистрации работников сферы услуг
- Просмотрите события фоновой выборки и фоновой синхронизации.
- Puppeteer для Firefox
- Полезные предустановки при автозаполнении функций CSS
- Очистка данных сайта через меню команд.
- Просмотреть все базы данных IndexedDB
- При наведении курсора мыши отображается несжатый размер ресурса.
- Встроенные точки останова в панели «Точки останова»
- Количество ресурсов IndexedDB и Cache
- Настройка для отключения подробной всплывающей подсказки «Проверить».
- Настройка для переключения отступов табуляции в редакторе
- Выделите все узлы, затронутые свойством CSS.
- Lighthouse v4 в панели «Аудиты»
- средство просмотра двоичных сообщений WebSocket
- Снимок области захвата экрана в меню команд.
- Фильтры Service Worker на панели «Сеть».
- Обновления панели производительности
- Длительные задания в записи панельных дискуссий о производительности
- Первая покраска в разделе «Время»
- Дополнительный совет: Быстрый способ просмотра цветовых кодов RGB и HSL (видео)
- Точки логарифма
- Подробные всплывающие подсказки в режиме просмотра.
- Экспорт данных о покрытии кода
- Управляйте консолью с помощью клавиатуры.
- Линия коэффициента контрастности AAA в палитре цветов
- Сохранение пользовательских настроек геолокации
- сворачивание кода
- Вкладка «Фреймы» переименована во вкладку «Сообщения».
- Дополнительный совет: Фильтрация по объектам недвижимости в сетевой панели (видео)
- Визуализируйте показатели производительности на панели «Производительность».
- Выделение текстовых узлов в DOM-дереве
- Скопируйте путь к файлу JavaScript в узел DOM.
- Обновления панели аудита , включая новый аудит, который обнаруживает библиотеки JavaScript, и новые ключевые слова для доступа к панели аудита из командного меню.
- Дополнительный совет: используйте режим устройства для проверки медиазапросов (видео).
- Наведите курсор на результат выполнения выражения в реальном времени , чтобы выделить узел DOM.
- Сохраняйте узлы DOM в качестве глобальных переменных.
- Информация об инициаторе и приоритете теперь доступна в импорте и экспорте HAR.
- Доступ к меню команд осуществляется из главного меню.
- Точки переключения «Картинка в картинке»
- Дополнительный совет: используйте
monitorEvents()для записи событий, срабатывающих на узле, в консоль (видео). - Выражения в реальном времени в консоли
- Выделение узлов DOM во время предварительной оценки
- Оптимизация производительности панели
- Более надежная отладка
- Включите ограничение скорости сети через командное меню.
- Условные точки останова автозаполнения
- Прерывание обработки событий AudioContext
- Отладка приложений Node.js с помощью ndb
- Дополнительный совет: измеряйте реальное взаимодействие пользователей с помощью API User Timing.
- Нетерпеливая оценка
- Подсказки для аргументации
- Автозавершение функций
- ключевые слова ES2017
- Lighthouse 3.0 в панели «Аудиты»
- Поддержка BigInt
- Добавление путей к свойствам в панель «Отслеживание».
- Функция «Показывать временные метки» перемещена в «Настройки».
- Дополнительный совет: Малоизвестные методы работы с консолью (видео)
- Поиск по всем заголовкам сети
- Предварительный просмотр значений переменных CSS
- Скопировать как получить
- Новые функции аудита, параметры конфигурации рабочего стола и просмотр трассировок.
- Остановить бесконечные циклы
- Время, затраченное пользователем, отображается на вкладке «Производительность».
- Экземпляры виртуальных машин JavaScript четко отображаются на панели «Память».
- Вкладка «Сеть» переименована во вкладку «Страница».
- Обновления темной темы
- Информация о прозрачности сертификатов в панели «Безопасность».
- Функции изоляции сайта на панели «Производительность»
- Дополнительный совет: Панель слоев + Инспектор анимации (видео)
- «Черный ящик» в панели «Сеть»
- Автоматическая настройка масштабирования в режиме устройства.
- Красивое форматирование текста на вкладках «Предварительный просмотр» и «Ответ».
- Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр».
- Поддержка локальных переопределений стилей внутри HTML.
- Дополнительный совет: скрипты фреймворка Blackbox для повышения эффективности точек останова в обработчиках событий.
- Локальные переопределения
- Новые инструменты обеспечения доступности
- Вкладка «Изменения»
- Новые SEO-аудиты и аудиты производительности.
- Несколько записей на панели «Исполнение».
- Надежное пошаговое выполнение кода с помощью воркеров в асинхронном коде
- Дополнительный совет: Автоматизируйте действия в инструментах разработчика с помощью Puppeteer (видео)
- Монитор производительности
- Боковая панель консоли
- Сгруппировать похожие сообщения в консоли
- Дополнительный совет: используйте псевдокласс при наведении курсора (видео)
- Поддержка удаленной отладки для нескольких клиентов
- Рабочие пространства 2.0
- 4 новых аудита
- Имитация push-уведомлений с использованием пользовательских данных
- Запускайте фоновые события синхронизации с помощью пользовательских тегов.
- Дополнительный совет: Точки останова обработчика событий (видео)
- В консоли вас ждут первоклассные возможности.
- Новые рабочие процессы создания скриншотов
- Подсветка CSS Grid
- Новый консольный API для запроса объектов.
- Новые консольные фильтры
- Импорт HAR в панели «Сеть»
- Предварительный просмотр ресурсов кэша
- Более предсказуемая отладка кэша
- Покрытие кода на уровне блоков
- имитация регулирования скорости мобильного устройства
- Просмотр использования хранилища
- Просмотр времени кэширования ответов сервис-воркером.
- Включите индикатор FPS в командном меню.
- Настройте поведение колесика мыши на масштабирование или прокрутку.
- Поддержка отладки модулей ES6
- Новая аудиторская комиссия
- Значки сторонних производителей
- Новый жест для функции «Продолжить»
- Переходите на асинхронный режим.
- Более информативный предварительный просмотр объектов в консоли.
- Более информативный выбор контекста в консоли
- Обновления в режиме реального времени на вкладке «Покрытие».
- Более простые варианты регулирования скорости сети
- Асинхронные стеки включены по умолчанию
- Анализ покрытия кода CSS и JS
- Скриншоты на всю страницу
- Блокировка запросов
- Перейдите через asyncwait
- Единое командное меню
Хром 143
Хром 142
Хром 141
Хром 140
Хром 139
Хром 138
Хром 137
Хром 136
Хром 135
Хром 134
Хром 133
Хром 132
Хром 131
Хром 130
Хром 129
Хром 128
Хром 127
Хром 126
Хром 125
Хром 124
Хром 123
Хром 122
Хром 121
Хром 120
Хром 119
Хром 118
Хром 117
Хром 116
Хром 115
Хром 114
Хром 113
Хром 112
Хром 111
Хром 110
Хром 109
Хром 108
Хром 107
Хром 106
Хром 105
Хром 104
Хром 103
Хром 102
Хром 101
Хром 100
Хром 99
Хром 98
Хром 97
Хром 96
Хром 95
Хром 94
Хром 93
Хром 92
Хром 91
Хром 90
Хром 89
Хром 88
Хром 87
Хром 86
Хром 85
Хром 84
Хром 83
Хром 82
Выпуск Chrome 82 был отменен .