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

Jecelyn Yeen

Примечание: Хотите помочь улучшить DevTools? Зарегистрируйтесь для участия в исследовании пользовательского опыта Google здесь .

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

Точка останова при нарушениях доверенного типа.

Теперь в панели «Источники» можно устанавливать точки останова и перехватывать исключения при нарушениях доверенных типов.

API Trusted Types помогает предотвратить уязвимости межсайтового скриптинга (XSS) на основе DOM. Узнайте, как писать, проверять и поддерживать приложения, защищенные от уязвимостей DOM XSS, с помощью Trusted Types здесь .

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

Проблема с Chromium: 1142804

В панели «Источники» свяжите задачу со вкладкой «Задачи».

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

Проблема Chromium: 1150883

Сделать снимок экрана узла за пределами области просмотра.

Теперь вы можете делать снимки экрана всего узла, включая контент, расположенный ниже видимой области. Ранее снимок экрана обрезался, если контент не был виден в области просмотра. Снимки экрана всей страницы теперь также более точные.

На панели «Элементы» щелкните правой кнопкой мыши по элементу и выберите «Сделать снимок экрана узла» .

Проблема Chromium: 1003629

Новая вкладка «Доверенные токены» для сетевых запросов.

Просмотрите запросы к сети Trust Token с помощью новой вкладки Trust Tokens .

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

Дополнительная поддержка отладки появится в следующих релизах.

Номер выпуска Chromium: 1126824

Маяк №7 на панели «Маяк»

В панели Lighthouse теперь используется Lighthouse 7. Полный список изменений смотрите в примечаниях к выпуску .

В Lighthouse 7 проведены новые проверки:

• Предварительная загрузка изображения для отображения максимального объема контента (LCP) . Проверяет, предварительно ли загружено изображение, используемое элементом LCP, чтобы улучшить время выполнения LCP.
• Записи о проблемах в панели Issues . Отображает список нерешенных проблем в панели Issues .
• Прогрессивные веб-приложения (PWA) . Категория PWA претерпела довольно значительные изменения.

• Теперь группа «Установимые» полностью управляется проверками возможностей, которые обеспечивают соответствие критериям устанавливаемых приложений в Chrome. Это те же самые сигналы, которые отображаются в панели «Манифест» .

  • Проверка "Регистрирует сервис-воркер…" перенесена в группу "Оптимизировано для PWA" , а проверка "Использует HTTPS" теперь включена в ключевую проверку "требования к установке".
  • Группа « Быстрая и надежная работа » удалена. Поскольку в обновленный аудит «Требования к установке» включена проверка возможности работы в автономном режиме, аудит «Текущая страница и start_url отвечают кодом 200 при работе в автономном режиме» был удален. Аудит «Загрузка страницы достаточно быстрая в мобильной сети» также был удален.

Номер выпуска Chromium: 772558

Обновления панели элементов

Поддержка принудительного использования состояния CSS :target

Теперь вы можете использовать инструменты разработчика для принудительного изменения и проверки состояния CSS :target .

На панели «Элементы» выберите элемент и измените его состояние. Установите флажок :target , чтобы принудительно применить и проверить стили.

Используйте псевдокласс :target для стилизации элемента, когда хеш в URL и идентификатор элемента совпадают. Посмотрите это демонстрационное видео , чтобы попробовать это самостоятельно. Эта новая функция инструментов разработчика позволяет тестировать такие стили без необходимости постоянно вручную изменять URL.

Проблема с Chromium: 1156628

Новый ярлык для дублирования элемента

Воспользуйтесь новым сочетанием клавиш «Дублировать элемент» , чтобы мгновенно клонировать элемент.

Щелкните правой кнопкой мыши по элементу на панели «Элементы» и выберите «Дублировать элемент» . Под ним будет создан новый элемент.

В качестве альтернативы, вы можете дублировать элемент с помощью сочетаний клавиш:

• Mac: Shift + Option + ⬇️
• Windows/Linux: Shift + Alt + ⬇️

Проблемы Chromium: 1150797 , 1150797

Палитры цветов для пользовательских свойств CSS

В панели «Стили» теперь отображаются палитры цветов для пользовательских свойств CSS.

Кроме того, вы можете удерживать клавишу Shift и щелкать по палитре цветов, чтобы переключаться между представлениями значения цвета в форматах RGBA, HSLA и Hex.

Проблема Chromium: 1147016

Новые сочетания клавиш для копирования свойств CSS.

Теперь вы можете быстрее копировать свойства CSS с помощью нескольких новых сочетаний клавиш.

В панели «Элементы» выберите элемент. Затем щелкните правой кнопкой мыши по классу CSS или свойству CSS в панели «Стили» , чтобы скопировать значение.

Параметры копирования для CSS-класса:

• Скопировать селектор . Скопировать имя текущего селектора.
• Скопировать правило . Скопировать правило текущего селектора.
• Скопировать все объявления : Скопировать все объявления, соответствующие текущему правилу, включая недопустимые и префиксные свойства.

Параметры копирования для свойства CSS:

• Скопировать объявление . Скопировать объявление текущей строки.
• Скопировать свойство . Скопировать свойство текущей строки.
• Скопировать значение : Копирует значение текущей строки.

Проблема с Chromium: 1152391

Обновления файлов cookie

Новая опция для отображения файлов cookie, декодированных из URL-адреса.

Теперь вы можете просмотреть значение файлов cookie, декодированных из URL-адреса, в панели «Cookies» .

Перейдите в панель «Приложения» и выберите раздел «Cookies» . Выберите любой cookie-файл из списка. Установите флажок «Показать декодированный URL-адрес», чтобы просмотреть декодированный cookie-файл.

Проблема с Chromium: 997625

Удалять только видимые файлы cookie

Кнопка «Очистить все файлы cookie» в панели «Cookies» теперь заменена кнопкой «Очистить отфильтрованные файлы cookie» .

В панели «Приложение» > «Cookies» введите текст в текстовое поле для фильтрации файлов cookie. В нашем примере мы фильтруем список по "PREF". Нажмите кнопку «Очистить отфильтрованные файлы cookie» , чтобы удалить видимые файлы cookie. После очистки текста фильтра вы увидите, что остальные файлы cookie остались в списке. Ранее была доступна только возможность очистить все файлы cookie.

Проблема с Chromium: 978059

В разделе «Хранилище» появилась новая опция для удаления сторонних файлов cookie.

При очистке данных сайта в панели «Хранилище» в инструментах разработчика по умолчанию удаляются только собственные файлы cookie. Включите параметр « Включая сторонние файлы cookie» , чтобы удалить и сторонние файлы cookie.

Проблема с Chromium: 1012337

Редактировать подсказки клиента User-Agent для пользовательских устройств

Теперь вы можете редактировать подсказки клиента User-Agent для пользовательских устройств.

Перейдите в «Настройки» > «Устройства» и нажмите «Добавить пользовательское устройство...» . Разверните раздел «Подсказки клиента агента пользователя» , чтобы отредактировать подсказки клиента.

Подсказки клиента User-Agent — это альтернатива строке User-Agent, позволяющая разработчикам получать доступ к информации о браузере пользователя конфиденциальным и эргономичным способом. Подробнее о подсказках клиента User-Agent можно узнать на сайте web.dev/user-agent-client-hints/ .

Проблема с Chromium: 1073909

Обновления сетевой панели

Сохранить настройку "записывать сетевой журнал".

В инструментах разработчика теперь сохраняется настройка "Записывать сетевой журнал". Ранее выбор пользователя сбрасывался при каждой перезагрузке страницы.

Проблема с Chromium: 1122580

Просмотр подключений WebTransport осуществляется на панели «Сеть».

В панели «Сеть» теперь отображаются соединения WebTransport.

WebTransport — это новый API, предлагающий двунаправленный обмен сообщениями между клиентом и сервером с низкой задержкой. Узнайте больше о вариантах его использования и о том, как оставить отзыв о будущем развитии проекта, на web.dev/webtransport/ .

Проблема с Chromium: 1152290

Терминал «Онлайн» переименован в «Без ограничения скорости».

Параметр эмуляции сети "Онлайн" теперь переименован в "Без ограничения скорости".

Проблема Chromium: 1028078

Новые параметры копирования в консоли, панели «Источники» и панели «Стили».

Новые сочетания клавиш для копирования объектов на панели «Консоль и источники».

Теперь вы можете копировать значения объектов с помощью новых сочетаний клавиш на панели «Консоль и источники». Это особенно удобно, когда вам нужно скопировать большой объект (например, длинный массив).

Проблемы Chromium: 1149859 , 1148353

Новые сочетания клавиш для копирования имени файла на панели «Источники» и панели «Стили».

Теперь вы можете скопировать имя файла, щелкнув правой кнопкой мыши по:

• файл на панели «Источники» или
• имя файла в панели «Стили» на панели «Элементы»

Чтобы скопировать имя файла , выберите пункт «Скопировать имя файла» в контекстном меню.

Проблема с Chromium: 1155120

Обновления отображения подробной информации о кадре

Информация о новых работниках сферы услуг в подробном представлении структуры.

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

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

Проблема с Chromium: 1122507

Информация об объеме памяти отображается в окне сведений о кадре.

Статус API performance.measureMemory() теперь отображается в разделе «Доступность API» .

Новый API performance.measureMemory() оценивает использование памяти всей веб-страницей. Узнайте, как отслеживать общее использование памяти вашей веб-страницей с помощью этого нового API, в этой статье .

Номер выпуска Chromium: 1139899

Оставьте свой отзыв во вкладке "Проблемы".

Если вы хотите улучшить сообщение об ошибке, перейдите на вкладку «Ошибки» в консоли или в раздел «Дополнительные параметры» > «Дополнительные инструменты» > «Ошибки» , чтобы открыть вкладку «Ошибки» . Разверните сообщение об ошибке и нажмите « Полезно ли вам это сообщение?» , после чего вы сможете оставить отзыв во всплывающем окне.

В панели «Производительность» наблюдается выпадение кадров.

При анализе производительности под нагрузкой на панели «Производительность» в разделе «Кадры» теперь пропущенные кадры помечаются красным цветом. Наведите на него курсор, чтобы узнать частоту кадров.

Проблема с Chromium: 1075865

Эмуляция складных устройств и двухэкранных режимов в режиме устройства.

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

После включения панели инструментов устройства выберите одно из следующих устройств: Surface Duo или Samsung Galaxy Fold .

Нажмите на новый значок span, чтобы переключаться между одноэкранным (в сложенном) и двухэкранным (в развернутом) режимами.

Вы также можете включить экспериментальные функции веб-платформы , чтобы получить доступ к новой функции CSS media screen-spanning и API JavaScript getWindowSegments . Экспериментальный значок отображает состояние флага экспериментальных функций веб-платформы . Значок подсвечивается, когда флаг включен. Перейдите по адресу chrome://flags и переключите флаг.

Номер выпуска Chromium: 1054281

Экспериментальные особенности

Автоматизируйте тестирование браузеров с помощью Puppeteer Recorder.

Примечание: Чтобы включить эксперимент, установите флажок «Рекордер» в разделе «Настройки» > «Эксперименты» .

Теперь DevTools может генерировать скрипты Puppeteer на основе вашего взаимодействия с браузером, что упрощает автоматизацию тестирования браузеров. Puppeteer — это библиотека Node.js, предоставляющая высокоуровневый API для управления Chrome или Chromium по протоколу DevTools .

Перейдите на эту демонстрационную страницу . Откройте панель «Источники» в инструментах разработчика. Выберите вкладку «Запись» в левой панели. Добавьте новую запись и назовите файл (например, test01.js).

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

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

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

Номер выпуска Chromium: 1144127

Редактор шрифтов в панели «Стили»

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

Новый редактор шрифтов — это всплывающий редактор в панели «Стили» , отображающий свойства шрифтов и помогающий подобрать идеальный типографический стиль для вашей веб-страницы.

Всплывающее окно предоставляет удобный пользовательский интерфейс для динамического управления типографикой с помощью ряда интуитивно понятных типов полей ввода.

Номер выпуска Chromium: 1093229

инструменты отладки CSS flexbox

Примечание: Чтобы включить эксперимент, установите флажок « Включить функции отладки CSS Flexbox» в разделе «Настройки» > «Эксперименты» .

В инструментах разработчика с момента последнего релиза добавлена ​​экспериментальная поддержка отладки с использованием flexbox .

В инструментах разработчика теперь отображается направляющая линия, которая помогает лучше визуализировать свойство CSS ` align-items . Поддерживается также свойство CSS ` gap . В нашем примере используется `CSS gap: 12px; `. Обратите внимание на штриховку каждого элемента `gap`.

Номер выпуска Chromium: 1139949

Новая вкладка "Нарушения CSP"

Примечание: Этот эксперимент был удален в версии 121. Вместо него см. раздел «Приложение > Фреймы > Политика безопасности контента (CSP)» и панель «Проблемы» .

В новой вкладке «Нарушения CSP» вы можете быстро просмотреть все нарушения политики безопасности контента (CSP) . Эта новая вкладка является экспериментальной и призвана упростить работу с веб-страницами, содержащими большое количество нарушений CSP и требований к доверенным типам.

Номер выпуска Chromium: 1137837

Новый алгоритм расчета цветового контраста — Усовершенствованный алгоритм перцептивного контраста (APCA)

Примечание: Чтобы включить эксперимент, установите флажок « Включить новый алгоритм расширенного перцептивного контраста (APCA), заменяющий предыдущие коэффициенты контраста и рекомендации AA/AAA» в разделе «Настройки > Эксперименты» .

Алгоритм расширенного восприятия контраста (APCA) заменяет стандартное соотношение контрастности AA / AAA в палитре цветов .

APCA — это новый способ вычисления контраста, основанный на современных исследованиях восприятия цвета. По сравнению с рекомендациями AA/AAA, APCA в большей степени зависит от контекста. Контраст рассчитывается на основе пространственных свойств текста (толщина и размер шрифта), цвета (воспринимаемая разница в яркости между текстом и фоном) и контекста (окружающая среда, окружение, предполагаемое назначение текста).

В приведенном примере показано, что пороговое значение APCA составляет 38% . Коэффициент контрастности должен соответствовать или превышать указанное значение. Это значение рассчитывается на основе толщины и размера шрифта, используя данную таблицу соответствия APCA .

Номер выпуска Chromium: 1121900

Загрузите предварительные каналы

Рекомендуем использовать Chrome Canary , Dev или Beta в качестве браузера по умолчанию для разработки. Эти предварительные версии предоставляют доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают выявлять проблемы на вашем сайте до того, как их обнаружат пользователи!

Свяжитесь с командой Chrome DevTools

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

• Отправляйте нам свои отзывы и предложения по улучшению функционала на сайте crbug.com .
• Сообщить о проблеме в инструментах разработчика можно с помощью параметра more_vert. Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам на YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .

Что нового в инструментах разработчика

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

Хром 143

• Обновления сервера DevTools MCP
• Улучшенное совместное использование трассировки
• Поддержка @starting-style
• Виджет редактора для отображения: кладка
• Маяк 13

Хром 142

• Предложения по коду от Gemini
• Улучшения для сервера DevTools MCP.
• Более быстрый доступ к помощи ИИ.
• Отладка полной трассировки производительности с помощью Gemini.
• Изменить ориентацию выдвижного ящика
• Программа для разработчиков Google
• Различные важные моменты

Хром 141

• Инструменты разработчика Chrome (MCP) для вашего ИИ-агента
• Отладка дерева сетевых зависимостей с помощью Gemini.
• Экспортируйте свои чаты с помощью Gemini
• Сохраненная конфигурация трека на панели «Производительность».
• Фильтрация сетевых запросов, защищенных IP-адресом.
• Вкладка «Элементы > Макет» добавляет поддержку макета «кирпичная кладка».
• Маяк 12.8.2
• Различные важные моменты

Хром 140

• Получите больше аналитической информации с помощью Gemini.
• В разделе «Сетевые условия» эмулируйте заголовок «Save-Data».
• Отображение базового состояния во всплывающей подсказке свойства CSS.
• Переопределение форм-факторов в подсказках клиентского пользовательского агента
• Маяк 12.8.0
• Различные важные моменты

Хром 139

• Более надежные и эффективные инструменты разработчика Chrome
• Загрузите изображения в систему помощи ИИ для создания стиля.
• Добавьте заголовки запроса в таблицу в разделе «Сеть».
• Ознакомьтесь с основными моментами конференции Google I/O 2025.
• Различные важные моменты

Хром 138

• Улучшения производительности панели
• Предварительно связанные истоки в анализе «дерева сетевых зависимостей»
• Время ответа сервера и время перенаправления в разделе «Задержка запроса документа»
• Перенаправления в сводке сетевых запросов
• Снижение уровня шума в графике производительности.
• Устаревшая функция «Отключить примеры JavaScript»
• Параметр точности геолокации в датчиках
• Улучшения панели элементов
• Упрощенная отладка сложных значений CSS.
• Поддержка @function в Элементах > Стили
• Улучшения сетевой панели
• has-request-header filter
• Прямые сокеты в изолированных веб-приложениях
• Различные важные моменты
• Доступность

Хром 137

• Google I/O 2025
• Изменяйте и сохраняйте изменения CSS в своем рабочем пространстве с помощью Gemini.
• Подключите папку рабочей области и сохраните изменения в исходных файлах.
• Обратитесь в Gemini за информацией об эффективности работы.
• Аннотируйте результаты анализа производительности с помощью Gemini.
• Добавляйте скриншоты в свои чаты с помощью Gemini.
• Новые данные в панели «Производительность»
• Дублированный JavaScript
• Устаревший JavaScript
• Теперь появились предположения, подтверждающие наличие тегов правил.
• Маяк 12.6.0
• Различные важные моменты
• Доступность

Хром 136

• Улучшения производительности панели
• Новые данные об эффективности
• Нажмите, чтобы выделить
• Время выполнения серверных запросов указано в сводке сетевых запросов.
• Фильтрация файлов cookie в разделе «Конфиденциальность и безопасность»
• Размеры указаны в единицах КБ в таблицах на разных панелях.
• Автозаполнение поддерживает corner-shape и corner-*-shape в разделе «Элементы > Стили».
• Экспериментальная функция: выявление проблем с элементами и атрибутами в DOM.
• Маяк 12.5.0
• Различные важные моменты

Хром 135

• Улучшения производительности панели
• Ссылки на источники и скрипты для вызовов профилей и функций в разделе «Производительность»
• LCP с поддержкой данных фазового поля
• Анализ дерева сетевых зависимостей
• В сводке вместо общего и личного времени указывается продолжительность.
• Подсветка наиболее тяжелого стека
• Улучшены состояния пустого пространства для различных панелей.
• Древовидное представление доступности в Elements
• Маяк 12.4.0
• Различные важные моменты

Хром 134

• Панель конфиденциальности и безопасности
• Улучшения производительности панели
• Откалиброванные предустановки регулирования производительности процессора
• Выберите различные события, связанные с производительностью, в одном и том же чате с использованием ИИ.
• Выделение результатов поиска по ключевым словам и сторонним сервисам в разделе «Производительность».
• Полевые данные во всплывающих подсказках и аналитических отчетах по маркерам.
• Информация о принудительном переформатировании
• Информация по оптимизации размера DOM
• Расширьте трассировку производительности с помощью console.timeStamp.
• Улучшения панели элементов
• Значения анимированных стилей в реальном времени
• Поддержка псевдокласса `:open` и различных псевдоэлементов.
• Скопировать все сообщения консоли
• Байтовые единицы на панели «Память»
• Различные важные моменты

Хром 133

• Постоянная история чата с использованием ИИ
• Улучшения производительности панели
• Анализ доставки изображений
• Классическая и современная навигация с помощью клавиатуры
• Игнорируйте нерелевантные скрипты на диаграмме пламени.
• Маркеры временной шкалы и подсветка диапазона при наведении курсора
• Рекомендуемые настройки регулирования скорости
• Временные метки наложены
• Трассировка стека вызовов JavaScript в сводке
• Настройки значка перемещены в меню Elements.
• Новая панель «Что нового»
• Маяк 12.3.0
• Различные важные моменты

Хром 132

• Отладка сетевых запросов, исходных файлов и трассировок производительности с помощью Gemini.
• Просмотреть историю чата с использованием ИИ.
• Управление хранилищем расширений осуществляется в разделе «Приложения» > «Хранилище».
• Улучшения производительности
• Фазы взаимодействия в метриках реального времени
• Информация о блокировке рендеринга находится на вкладке «Сводка».
• Поддержка событий scheduler.postTask и стрелок-инициаторов для них.
• Улучшения в панели «Анимация» и вкладке «Элементы > Стили».
• Перейти из раздела «Элементы» > «Стили» в раздел «Анимация».
• Обновления в режиме реального времени на вкладке «Вычисления».
• Вычисление эмуляции давления в датчиках
• Объекты JavaScript с одинаковым именем сгруппированы по источнику на панели «Память».
• Новый дизайн настроек
• Панель анализа производительности устарела и удалена из инструментов разработчика.
• Различные важные моменты

Хром 131

• Отладка CSS с помощью Gemini
• Управляйте функциями ИИ на специальной вкладке настроек.
• Улучшения производительности панели
• Аннотируйте и делитесь результатами анализа производительности.
• Получайте аналитические данные о производительности прямо на панели «Производительность».
• Обнаружить чрезмерные изменения в компоновке проще.
• Найдите некомпозитные анимации.
• Аппаратная параллельность переносится на датчики.
• Игнорируйте анонимные скрипты и сосредоточьтесь на своем коде в трассировках стека.
• Элементы > Стили: Поддержка режимов написания с боковым * для наложений сетки и ключевых слов, используемых во всем CSS.
• Аудит Lighthouse для страниц, не использующих протокол HTTP, в режимах временного интервала и снимка.
• Улучшения доступности
• Различные важные моменты

Хром 130

• Улучшения сетевой панели
• Переосмысление сетевых фильтров
• Теперь при экспорте HAR по умолчанию исключаются конфиденциальные данные.
• Улучшения панели элементов
• Значения автозаполнения для свойств text-embassis-*
• Переполнение при прокрутке отмечено значком
• Улучшения производительности панели
• Рекомендации в режиме реального времени на основе метрик
• Перемещайтесь по хлебным крошкам
• Улучшения панели памяти
• Новый профиль «Отдельно стоящие элементы».
• Улучшено именование простых объектов JavaScript.
• Отключите динамическое оформление.
• Эксперимент Chrome: совместное использование процессов
• Маяк 12.2.1
• Различные важные моменты

Хром 129

• Программа записи экрана поддерживает экспорт в Puppeteer для Firefox.
• Улучшения производительности панели
• Наблюдения за показателями в реальном времени
• Поисковые запросы в разделе «Сеть»
• См. трассировку стека вызовов performance.mark и performance.measure.
• Используйте тестовые данные адреса в панели автозаполнения.
• Улучшения панели элементов
• Принудительное добавление состояний для конкретных элементов
• В разделе «Элементы > Стили» теперь автоматически заполняется больше свойств сетки.
• Маяк 12.2.0
• Различные важные моменты

Хром 128

• Аналитические функции консоли от Gemini становятся доступны в большинстве европейских стран.
• Обновления панели производительности
• Расширенная сетевая дорожка
• Настраивайте данные о производительности с помощью API расширяемости.
• Подробности в разделе «Время проведения».
• Скопируйте все перечисленные запросы в панели «Сеть».
• Более быстрые снимки состояния кучи с использованием именованных HTML-тегов и меньшим количеством лишнего контента.
• Откройте панель «Анимация», чтобы захватывать анимации и редактировать ключевые кадры в режиме реального времени.
• Маяк 12.1.0
• Улучшения доступности
• Различные важные моменты

Хром 127

• Проверьте позиционирование ссылок CSS в панели «Элементы».
• Улучшения панели источников
• Улучшенная версия "Никогда не делайте здесь паузу"
• Новые обработчики событий привязки прокрутки
• Улучшения сетевой панели
• Обновлены настройки регулирования сети.
• Информация о сотруднике службы поддержки в пользовательских полях формата HAR
• Отправляйте и получайте события WebSocket на панели «Производительность».
• Различные важные моменты

Хром 126

• Улучшения производительности панели
• Перемещайте и скрывайте рельсы с помощью обновленного режима настройки рельсов.
• Игнорировать скрипты на диаграмме пламени
• Снизить производительность процессора в 20 раз.
• Панель анализа производительности будет упразднена.
• Обнаружение чрезмерного использования памяти с помощью новых фильтров в снимках кучи.
• Проверьте разделы хранилища в разделе «Приложение» > «Хранилище».
• Отключите предупреждения о самоуязвимости XSS с помощью флага командной строки.
• Маяк 12.0.0
• Различные важные моменты

Хром 125

• С Gemini вы сможете лучше понимать ошибки и предупреждения в консоли.
• Поддержка правил @position-try в разделе «Элементы > Стили».
• Улучшения панели источников
• Настройте автоматическую форматированную печать и закрытие скобок.
• Обработанные отклоненные обещания помечаются как перехваченные.
• Причины ошибок в консоли
• Улучшения сетевой панели
• Проверьте заголовки Early Hints.
• Скрыть колонку «Водопад»
• Улучшения производительности панели
• Сбор статистики по CSS-селекторам
• Изменить порядок и скрыть следы
• Игнорировать элементы управления в панели «Память»
• Маяк 11.7.1
• Различные важные моменты

Хром 124

• Новая панель автозаполнения
• Улучшенное регулирование скорости сети для WebRTC.
• Поддержка анимаций, управляемых прокруткой, в панели «Анимации».
• Улучшена поддержка вложенности CSS в разделе «Элементы > Стили».
• Панель повышения производительности
• Скрыть функции и их дочерние элементы на диаграмме пламени.
• Стрелки от выбранных инициаторов к событиям, которые они инициировали.
• Маяк 11.6.0
• Всплывающие подсказки для специальных категорий в разделе Память > Снимки кучи
• Приложение > Обновления хранилища
• Байты, используемые для общего хранилища
• Web SQL полностью устарел.
• Улучшения в работе панели покрытия.
• Панель «Слои» может быть устаревшей.
• Прекращение поддержки JavaScript Profiler: четвертый этап, заключительный
• Различные важные моменты

Хром 123

• Найдите пасхальное яйцо
• Обновления панели элементов
• Имитация активной страницы в разделе «Элементы > Стили»
• Палитра цветов, часы углов и редактор сглаживания доступны в качестве резервных вариантов в функции var()
• Инструмент CSS length устарел.
• Всплывающее окно для выбранного результата поиска в разделе «Производительность > Основной трек»
• Обновления сетевой панели
• Кнопка «Очистить» и фильтр поиска на вкладке «Сеть» > «Поток событий»
• Всплывающие подсказки с указанием причин исключения сторонних файлов cookie в разделе «Сеть > Файлы cookie».
• Включать и отключать все точки останова в исходном коде.
• Просмотр загруженных скриптов в инструментах разработчика для Node.js
• Маяк 11.5.0
• Улучшения доступности
• Различные важные моменты

Хром 122

• Официальная коллекция расширений для Recorder уже доступна.
• Улучшения сети
• Причина сбоя указана в столбце «Статус».
• Улучшенное подменю «Копировать»
• Улучшения производительности
• Хлебные крошки на временной шкале
• Инициаторы мероприятий в основной сетке
• Меню выбора экземпляра виртуальной машины JavaScript для инструментов разработчика Node.js
• В разделе «Источники» появилась новая комбинация клавиш и команда.
• Улучшения элементов
• Псевдоэлемент ::view-transition теперь можно редактировать в стилях.
• Поддержка свойства align-content для блочных контейнеров
• Поддержка осанки для эмулируемых складных устройств
• Динамическое оформление тем
• Предупреждения о прекращении использования сторонних файлов cookie в панелях «Сеть» и «Приложения».
• Маяк 11.4.0
• Улучшения доступности
• Различные важные моменты

Хром 121

• Улучшения элементов
• Упрощенная панель фильтров в панели «Сеть».
• @font-palette-values ​​поддержка
• Поддерживаемый случай: Использование пользовательского свойства в качестве резервного варианта для другого пользовательского свойства.
• Улучшена поддержка карт исходного кода.
• Улучшения производительности панели
• Расширенные возможности взаимодействия (трек)
• Расширенная фильтрация на вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий».
• Маркеры отступов на панели «Источники».
• Полезные всплывающие подсказки для переопределенных заголовков и содержимого на панели «Сеть».
• Новые параметры командного меню для добавления и удаления шаблонов блокировки запросов.
• Эксперимент с нарушениями CSP отменен.
• Маяк 11.3.0
• Улучшения доступности
• Различные важные моменты

Хром 120

• Поэтапное прекращение использования сторонних файлов cookie
• Проанализируйте файлы cookie вашего веб-сайта с помощью инструмента анализа конфиденциальности Privacy Sandbox.
• Расширенный список игнорируемых объектов
• Шаблон исключения по умолчанию для node_modules
• Теперь перехваченные исключения останавливают выполнение, если они перехвачены или проходят через неигнорируемый код.
• В исходных картах x_google_ignoreList переименована в ignoreList
• Новая функция переключения режима ввода во время удаленной отладки.
• На панели «Элементы» теперь отображаются URL-адреса для узлов #document.
• Эффективная политика безопасности контента в панели приложения
• Улучшена отладка анимации.
• Диалоговое окно «Вы доверяете этому коду?» в исходном коде и предупреждение о самоуязвимости XSS в консоли.
• Точки останова обработчиков событий в веб-воркерах и воллетах
• Новый значок для медиаконтента ( <audio> и <video> .
• Предварительная загрузка переименована в Спекулятивную загрузку.
• Маяк 11.2.0
• Улучшения доступности
• Различные важные моменты

Хром 119

• Улучшен раздел @property в Elements > Styles.
• Редактируемое правило @свойства
• Сообщается о проблемах, связанных с некорректными правилами @property.
• Обновленный список устройств для эмуляции.
• Красивое форматирование JSON непосредственно в тегах <script> в исходном коде
• Автозаполнение закрытых полей в консоли
• Маяк 11.1.0
• Улучшения доступности
• Прекращение поддержки Web SQL
• Проверка соотношения сторон скриншота в разделе «Приложение > Манифест».
• Различные важные моменты

Хром 118

• Новый раздел для пользовательских свойств в Elements > Styles.
• Дополнительные улучшения в области локальных переопределений.
• Расширенный поиск
• Улучшенная панель «Источники»
• Упрощенное рабочее пространство на панели «Источники».
• Изменить порядок панелей в разделе «Источники»
• Подсветка синтаксиса и форматированный вывод для большего количества типов скриптов.
• Имитация функции воспроизведения медиаконтента с пониженной прозрачностью
• Маяк 11
• Улучшения доступности
• Различные важные моменты

Хром 117

• Улучшения сетевой панели
• Еще быстрее перезаписывайте веб-контент локально.
• Переопределяйте содержимое XHR-запросов и запросов на получение данных.
• Скрыть запросы на расширение Chrome
• Удобочитаемые коды состояния HTTP

• Отформатированные ответы для подтипов JSON

• Производительность: см. изменения в приоритете получения сетевых событий.

• В настройках источников по умолчанию включены: сворачивание кода и автоматическое отображение файлов.
• Улучшена отладка проблем, связанных с файлами cookie сторонних разработчиков.
• Новые цвета
• Маяк 10.4.0
• Предварительная загрузка отладки в панели приложения.
• Расширение для отладки C/C++ WebAssembly в DevTools теперь имеет открытый исходный код.
• Различные важные моменты
• (Экспериментальная) Новая эмуляция рендеринга: prefers-reduced-transparency
• (Экспериментальный) Усовершенствованный монитор протокола

Хром 116

• Улучшена отладка отсутствующих таблиц стилей.
• Поддержка линейного тайминга в разделе Элементы > Стили > Редактор сглаживания
• Поддержка сегментов хранилища и просмотр метаданных
• Маяк 10.3.0
• Доступность: сочетания клавиш и улучшенная функция чтения с экрана.
• Различные важные моменты

Хром 115

• Улучшения элементов
• Новый значок CSS-подсетки
• Специфичность селектора во всплывающих подсказках
• Значения пользовательских свойств CSS во всплывающих подсказках
• Улучшения источников
• Подсветка синтаксиса CSS
• Быстрый способ установки условных точек останова
• Приложение > Меры по предотвращению отказов при отслеживании посещений
• Маяк 10.2.0
• По умолчанию игнорировать скрипты содержимого.
• Сеть > Улучшения скорости отклика
• Различные важные моменты

Хром 114

• Поддержка отладки WebAssembly
• Улучшено пошаговое выполнение кода в приложениях Wasm.
• Отладка автозаполнения с помощью панели «Элементы» и вкладки «Проблемы».
• Утверждения в регистраторе
• Маяк 10.1.1
• Улучшения производительности
• Функция performance.mark() отображает время выполнения при наведении курсора в разделе «Производительность > Время выполнения».
• Команда profile() заполняет раздел «Производительность > Главная».
• Предупреждение о медленной реакции пользователя
• Обновления Web Vitals
• Прекращение поддержки JavaScript Profiler: третий этап
• Различные важные моменты

Хром 113

• Переопределение заголовков сетевого ответа
• Улучшения в отладке Nuxt, Vite и Rollup.
• Улучшения CSS в разделе «Элементы > Стили».
• Недопустимые свойства и значения CSS.
• Ссылки на ключевые кадры в сокращенном описании анимации
• Новая настройка консоли: автозаполнение при нажатии клавиши Enter.
• Меню команд акцентирует внимание на созданных файлах.
• Прекращение поддержки JavaScript Profiler: второй этап
• Различные важные моменты

Хром 112

• Обновления регистратора
• Расширения для воспроизведения записи
• Запись с использованием селекторов прокола
• Экспорт записей в виде скриптов Puppeteer с анализом в Lighthouse.
• Получите расширения для Recorder
• Элементы > Обновления стилей
• Документация по CSS находится в панели «Стили».
• Поддержка вложенности CSS
• Отметка точек логирования и условных точек останова в консоли.
• Во время отладки игнорируйте нерелевантные скрипты.
• Началось прекращение поддержки JavaScript Profiler.
• Имитация пониженного контраста
• Маяк 10
• Различные важные моменты

Хром 111

• Отладка цветопередачи в HD-качестве с помощью панели «Стили».
• Улучшен пользовательский интерфейс точек останова
• Настраиваемые ярлыки для записи экрана
• Улучшена подсветка синтаксиса для Angular.
• Настройте порядок кэша в панели приложений.
• Различные важные моменты

Хром 110

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

Хром 109

• Запись: Копировать как параметры для шагов, воспроизведение на странице, контекстное меню шага.
• Отображение фактических названий функций в записях исполнения.
• Новые сочетания клавиш на панели «Консоль и источники».
• Улучшена отладка JavaScript.
• Различные важные моменты
• [Экспериментальная версия] Улучшен пользовательский интерфейс при управлении точками останова
• [Экспериментальная] Автоматическая печать изображений на месте

Хром 108

• Подсказки для неактивных свойств CSS
• Автоматическое определение XPath и текстовых селекторов на панели записи.
• Пошагово просматривайте выражения, разделённые запятыми.
• Улучшена настройка списка игнорирования.
• Различные важные моменты

Хром 107

• Настройка сочетаний клавиш в инструментах разработчика
• Переключайте светлую и темную темы с помощью сочетания клавиш.
• Выделение объектов C/C++ в инспекторе памяти.
• Поддержка полной информации об инициаторе для импорта HAR.
• Начать поиск в DOM после нажатия клавиши Enter
• Отображение start и end значков для свойства CSS flexbox align-content
• Различные важные моменты

Хром 106

• В панели «Источники» сгруппируйте файлы по дате создания/развертывания.
• Связанные трассировки стека для асинхронных операций
• Автоматически игнорировать известные сторонние скрипты
• Улучшен стек вызовов во время отладки.
• Скрытие источников, помеченных как игнорируемые, на панели «Источники».
• Скрытие файлов, внесенных в список игнорируемых, в командном меню.
• Новая ветка «Взаимодействия» на панели «Производительность».
• Анализ временных характеристик LCP на панели «Аналитика производительности»
• Автоматическое создание имени по умолчанию для записей на панели «Запись».
• Различные важные моменты

Хром 105

• Пошаговое воспроизведение в программе записи
• Поддержка события наведения мыши на панель записи экрана.
• Крупнейший объект Contentful Paint (LCP) на панели анализа производительности.
• Выявите кратковременные всплески текста (FOIT, FOUT) как потенциальные причины изменений в макете.
• Обработчики протоколов в панели «Манифест»
• Значок верхнего слоя на панели «Элементы».
• Подключайте отладочную информацию Wasm во время выполнения.
• Поддержка редактирования в режиме реального времени во время отладки.
• Просматривайте и редактируйте правила @scope в панели «Стили».
• Улучшения карты исходного кода
• Различные важные моменты

Хром 104

• Перезапуск кадра во время отладки
• Параметры замедленного воспроизведения на панели «Запись».
• Создайте расширение для панели записи экрана.
• В панели «Источники» сгруппируйте файлы по дате создания/развертывания.
• Отслеживание времени работы новых пользователей отображается на панели «Аналитика производительности».
• Отобразить назначенный слот элемента
• Имитация аппаратной параллельности для записи производительности
• Предварительный просмотр значений, не относящихся к цвету, при автозаполнении переменных CSS.
• Найдите блокирующие кадры в панели кэша "Назад/Вперед".
• Улучшены подсказки автозаполнения для объектов JavaScript.
• Улучшения карт исходного кода
• Различные важные моменты

Хром 103

• Записывайте события двойного щелчка и щелчка правой кнопкой мыши на панели «Рекордер».
• В панели Lighthouse появились новый временной интервал и режим моментального снимка.
• Улучшено управление масштабированием на панели «Аналитика производительности».
• Подтвердите удаление записи выступления.
• Изменяйте порядок панелей на панели «Элементы».
• Выбор цвета вне браузера
• Улучшен предварительный просмотр значений в режиме отладки.
• Поддержка больших блоков данных для виртуальных аутентификаторов
• Новые сочетания клавиш на панели «Источники».
• Улучшения карт исходного кода

Хром 102

• Функция предварительного просмотра: новая панель анализа производительности.
• Новые сочетания клавиш для имитации светлой и темной тем оформления.
• Улучшена безопасность на вкладке «Предварительный просмотр сети».
• Улучшена перезарядка в точке перелома.
• Обновления консоли
• Отменить запись пользовательского сценария в начале.
• Отображение унаследованных псевдоэлементов подсветки в панели «Стили».
• Различные важные моменты
• [Экспериментальная версия] Копирование изменений CSS
• [Экспериментальная версия] Выбор цвета вне браузера

Хром 101

• Импорт и экспорт записанных пользовательских сценариев в виде JSON-файла.
• Отображение каскадных слоев в панели «Стили».
• Поддержка цветовой функции hwb()
• Улучшена демонстрация частной собственности.
• Различные важные моменты
• [Экспериментальная версия] Новый временной интервал и режим моментального снимка в панели «Маяк».

Хром 100

• Просматривайте и редактируйте правила @supports в панели «Стили».
• Поддержка распространенных селекторов по умолчанию.
• Настройте селектор записи
• Переименовать запись
• Предварительный просмотр свойств класса/функции при наведении курсора
• Частично отображаемые кадры на панели «Производительность»
• Различные важные моменты

Хром 99

• Ограничение количества запросов WebSocket
• Новая панель API для создания отчетов в панели приложений.
• Поддержка: дождитесь, пока элемент станет видимым/кликабельным на панели записи.
• Улучшенное оформление, форматирование и фильтрация консоли.
• Расширение для отладки Chrome с файлами карты исходного кода
• Улучшена структура папок с исходными файлами на панели «Источники».
• Отображение исходных файлов рабочих процессов на панели «Источники».
• Обновления автоматической темной темы Chrome
• Удобная сенсорная панель выбора цвета и разделенное окно
• Различные важные моменты

Хром 98

• Функция предварительного просмотра: Полностраничное дерево доступности
• Более точные изменения доступны на вкладке «Изменения».
• Установите более длительный тайм-аут для записи пользовательского потока.
• Убедитесь, что ваши страницы кэшируются, используя вкладку «Кэширование» (Назад/Вперед)
• Новый фильтр панели свойств
• Имитация функции принудительного выбора цветов в CSS для работы с медиафайлами.
• Отображать линейки при наведении курсора
• Поддерживается row-reverse и column-reverse в редакторе Flexbox.
• Новые сочетания клавиш для воспроизведения XHR-запросов и развертывания всех результатов поиска.
• Маяк № 9 на панели «Маяк»
• Улучшенная панель «Источники»
• Различные важные моменты
• [Экспериментальные] Конечные точки на панели API отчетов

Хром 97

• Предварительный просмотр функции: Новая панель записи
• Обновите список устройств в режиме устройства.
• Автозаполнение с возможностью редактирования в формате HTML
• Улучшена отладка кода.
• Синхронизация настроек инструментов разработчика между устройствами.

Хром 96

• Функция предварительного просмотра: новая панель обзора CSS.
• Восстановлен и улучшен интерфейс редактирования длины CSS и копирования текста.
• Имитация функции CSS prefers-contrast для работы с медиафайлами
• Имитация функции автоматической темной темы Chrome
• Скопируйте объявления как JavaScript в панели «Стили».
• В панели «Сеть» появилась новая вкладка «Полезная нагрузка».
• Улучшено отображение свойств в панели «Свойства».
• Возможность скрыть ошибки CORS в консоли.
• Предварительный просмотр и оценка Intl объектов в консоли.
• Согласованные трассировки стека асинхронных операций
• Сохраните боковую панель «Консоль».
• Устаревшая панель кэширования приложений в панели приложений.
• [Экспериментальная версия] Новая панель API для создания отчетов в панели приложения.

Хром 95

• Новые инструменты для создания CSS-стилей с указанием длины
• Скрыть проблемы на вкладке «Проблемы»
• Улучшено отображение свойств.
• Маяк 8.4 на панели «Маяк»
• Сортируйте фрагменты текста на панели «Источники».
• Новые ссылки на переведённые примечания к выпуску и форму сообщения об ошибке перевода.
• Улучшен пользовательский интерфейс меню командных инструментов разработчика.

Хром 94

• Используйте инструменты разработчика на предпочитаемом вами языке.
• Новые устройства Nest Hub в списке устройств
• Исходные испытания отображаются в подробном представлении Frame.
• Новый значок запроса контейнера CSS
• Новый флажок для инвертирования сетевых фильтров.
• В ближайшее время боковая панель консоли будет упразднена.
• Отображение необработанных заголовков Set-Cookies на вкладке «Проблемы» и панели «Сеть».
• Последовательное отображение собственных методов доступа в качестве отдельных свойств в консоли.
• Корректные трассировки стека ошибок для встроенных скриптов с использованием #sourceURL
• Измените формат цвета в панели «Вычисления».
• Замените пользовательские всплывающие подсказки на стандартные HTML-подсказки.
• [Экспериментальная функция] Скрытие проблем на вкладке «Проблемы»

Хром 93

• Редактируемые CSS-контейнерные запросы в панели «Стили».
• Предварительный просмотр веб-пакета на панели «Сеть».
• Отладка API для составления отчетов об атрибуции
• Улучшена обработка строк в консоли.
• Улучшена отладка CORS.
• Маяк 8.1
• Новый URL-адрес заметки в панели «Манифест».
• Исправлены селекторы соответствия CSS.
• Форматирование JSON-ответов на панели «Сеть»

Хром 92

• редактор CSS-сеток
• Поддержка повторного объявления const в консоли
• Просмотрщик порядка источников
• Новый ярлык для просмотра подробностей кадра.
• Расширенная поддержка отладки CORS
• Переименуйте метку XHR в Fetch/XHR.
• Отфильтруйте типы ресурсов Wasm на панели «Сеть».
• Подсказки клиента User-Agent для устройств на вкладке «Состояние сети»
• Сообщайте о проблемах в режиме "Особенности" на вкладке "Проблемы".
• Включите вычислительные пересечения на панели «Производительность».
• Маяк 7.5 на панели «Маяк»
• Устаревшее контекстное меню «Перезапуск кадра» в стеке вызовов.
• [Экспериментальный] Монитор протокола
• [Экспериментальный] диктофон для кукловодов

Хром 91

• Всплывающая информация Web Vitals
• Новый инспектор памяти
• Визуализация CSS-эффекта привязки к прокрутке
• Новая панель настроек значка
• Улучшенный предварительный просмотр изображения с информацией о соотношении сторон.
• Новая кнопка «Состояние сети» с параметрами для настройки Content-Encoding .
• ярлык для просмотра вычисленного значения
• ключевое слово accent-color
• Классифицируйте типы проблем с помощью цветов и значков.
• Удалить токены доверия
• Заблокированные функции в окне сведений о фрейме
• Фильтрация экспериментов в настройках «Эксперименты»
• В панели «Хранилище кэша» появился новый столбец Vary Header
• Поддержка проверки частной торговой марки на JavaScript
• Расширенная поддержка отладки с использованием точек останова.
• Поддержка предварительного просмотра при наведении курсора с использованием квадратных скобок []
• Улучшена структура HTML-файлов.
• Корректные трассировки стека ошибок для отладки Wasm.

Хром 90

• Новые инструменты отладки CSS flexbox
• Новое наложение основных веб-функций
• Переместил счетчик проблем в строку состояния консоли.
• Сообщить о проблемах с доступом к доверенным веб-ресурсам
• Форматирование строк как (допустимых) строковых литералов JavaScript в консоли.
• В панели приложений появилась новая панель «Доверенные токены».
• Имитация функции CSS color-gamut media
• Улучшенные инструменты для прогрессивных веб-приложений
• В панели «Сеть» появился новый столбец Remote Address Space .
• Улучшения производительности
• Отображение разрешенных/запрещенных функций в окне сведений о раме.
• В панели «Cookies» появился новый столбец SameParty .
• Устаревшая нестандартная поддержка fn.displayName
• Отключена функция « Don't show Chrome Data Saver warning в меню настроек.
• [Экспериментальная функция] Автоматическое создание отчетов о проблемах с низким контрастом на вкладке «Проблемы».
• [Экспериментальная версия] Полное отображение дерева доступности на панели «Элементы»

Хром 89

• Поддержка отладки нарушений, связанных с доверенными типами.
• Сделать снимок экрана узла за пределами области просмотра.
• Новая вкладка «Доверенные токены» для сетевых запросов.
• Маяк №7 на панели «Маяк»
• Поддержка принудительного использования состояния CSS :target
• Новый ярлык для дублирования элемента
• Палитры цветов для пользовательских свойств CSS
• Новые сочетания клавиш для копирования свойств CSS.
• Новая опция для отображения файлов cookie, декодированных из URL-адреса.
• Удалять только видимые файлы cookie
• В разделе «Хранилище» появилась новая опция для удаления сторонних файлов cookie.
• Редактировать подсказки клиента User-Agent для пользовательских устройств
• Сохранить настройку "записывать сетевой журнал".
• Просмотр подключений WebTransport осуществляется на панели «Сеть».
• Терминал «Онлайн» переименован в «Без ограничения скорости».
• Новые параметры копирования в консоли, панели «Источники» и панели «Стили».
• Информация о новых работниках сферы услуг в подробном представлении структуры.
• Информация об объеме памяти отображается в окне сведений о кадре.
• Оставьте свой отзыв во вкладке "Проблемы".
• В панели «Производительность» наблюдается выпадение кадров.
• Эмуляция складных устройств и двухэкранных режимов в режиме устройства.
• [Экспериментальная версия] Автоматизация тестирования браузера с помощью Puppeteer Recorder
• [Экспериментальная] Редактор шрифтов в панели «Стили»
• [Экспериментальные] Инструменты отладки CSS flexbox
• [Экспериментальная] Новая вкладка «Нарушения CSP»
• [Экспериментальная версия] Новый алгоритм расчета цветового контраста — Усовершенствованный алгоритм перцептивного контраста (APCA)

Хром 88

• Быстрый старт с использованием DevTools
• Новые инструменты визуализации углов CSS
• Эмуляция неподдерживаемых типов изображений
• Имитируйте размер квоты хранения на панели «Хранилище».
• В панели «Производительность» появилась новая полоса «Web Vitals».
• Сообщайте об ошибках CORS в панели «Сеть».
• Информация о междоменной изоляции в представлении сведений о кадре.
• Информация о новых веб-воркерах отображается в подробном представлении фрейма.
• Отображение сведений о рамке открывающегося окна.
• Откройте панель «Сеть» из панели «Сервисные работники».
• Скопировать значение свойства
• Скопировать трассировку стека для сетевого инициатора
• Предварительный просмотр значения переменной Wasm при наведении курсора мыши
• Оцените переменную Wasm в консоли.
• Единые единицы измерения для размеров файлов/памяти
• Выделите псевдоэлементы на панели «Элементы».
• [Экспериментальные] инструменты отладки CSS Flexbox
• [Экспериментальная версия] Настройка сочетаний клавиш для аккордов

Хром 87

• Новые инструменты отладки CSS Grid
• Новая вкладка WebAuthn
• Перемещайте инструменты между верхней и нижней панелями.
• В панели «Стили» появилась новая боковая панель «Вычисляемые элементы».
• Группировка свойств CSS на панели «Вычисляемые»
• Маяк 6.3 на панели «Маяк»
• События performance.mark() в разделе Timings
• В панели «Сеть» появились новые фильтры resource-type и url .
• Обновления отображения подробной информации о кадре
• Прекращение поддержки Settings в меню «Дополнительные инструменты».
• [Экспериментальная функция] Просмотр и исправление проблем с цветовым контрастом на панели «Обзор CSS».
• [Экспериментальная функция] Настройка сочетаний клавиш в инструментах разработчика

Хром 86

• Панельная дискуссия по новым медиа
• Создавайте снимки экрана узлов с помощью контекстного меню панели «Элементы».
• Обновления вкладки «Проблемы»
• Имитация отсутствующих локальных шрифтов
• Имитация неактивных пользователей
• Emulate prefers-reduced-data
• Поддержка новых функций JavaScript
• Маяк 6.2 на панели «Маяк»
• Удалена возможность отображения раздела «другие источники происхождения» в панели «Работники сферы услуг».
• Показать сводку покрытия для отфильтрованных элементов
• Новый режим просмотра сведений о фрейме в панели приложений.
• Доступные варианты цветовых решений в панели «Стили».
• Восстановить свойства (панель «Элементы»)
• Удобочитаемые значения заголовка X-Client-Data на панели «Сеть».
• Автозаполнение пользовательских шрифтов в панели «Стили».
• Единообразное отображение типа ресурса на панели «Сеть»
• Кнопки очистки на панелях «Элементы» и «Сеть»

Хром 85

• Редактирование стилей для CSS-in-JS фреймворков
• Маяк №6 на панели «Маяк»
• Первая значимая амортизация краски (FMP)
• Поддержка новых функций JavaScript
• В панели «Манифест» появились предупреждения о новых ярлыках приложений.
• События Service Worker respondWith отображаются на вкладке «Время».
• Единообразное отображение панели «Вычисления»
• Смещения байт-кода для файлов WebAssembly
• Построчное копирование и вырезание в панели «Источники».
• Обновления настроек консоли
• Обновления панели производительности
• Новые значки для точек останова, условных точек останова и точек логирования.

Хром 84

• Исправляйте ошибки на сайте с помощью новой вкладки «Проблемы».
• Информация о доступности отображается во всплывающей подсказке в режиме «Проверить элемент».
• Обновления панели производительности
• Более точная терминология обещаний в консоли.
• Обновления панели стилей
• Прекращение поддержки панели «Свойства» в панели «Элементы».
• Поддержка ярлыков приложений в панели «Манифест».

Хром 83

• Имитация нарушений зрения
• Имитация локаций
• Отладка политики встраивания из разных источников (COEP)
• Новые значки для точек останова, условных точек останова и точек логирования.
• Просмотрите сетевые запросы, которые устанавливают определенный cookie-файл.
• Прикрепите панель слева из командного меню.
• Пункт «Настройки» в главном меню перемещен.
• Комитет по аудиту теперь называется «Комитет маяка».
• Удалите все локальные переопределения в папке.
• Обновлен пользовательский интерфейс для длительных задач.
• Поддержка маскируемых значков в панели «Манифест».

Хром 82

Выпуск Chrome 82 был отменен .

Хром 81

• Поддержка Moto G4 в режиме устройства
• Обновления, касающиеся файлов cookie.
• Более точные значки манифеста веб-приложения
• Наведите курсор на свойства content CSS, чтобы увидеть значения без экранирования.
• Ошибки карты исходного кода в консоли
• Настройка для отключения прокрутки за конец файла.

Хром 80

• Поддержка повторного объявления операторов let и class в консоли.
• Улучшена отладка WebAssembly.
• Запросите цепочки инициаторов на вкладке «Инициатор».
• Выделите выбранный сетевой запрос в разделе «Обзор».
• Столбцы URL и пути на панели «Сеть»
• Обновлены строки User-Agent.
• Новый пользовательский интерфейс настройки панели аудита.
• Режимы покрытия кода для каждой функции или для каждого блока
• Теперь анализ покрытия кода должен запускаться при перезагрузке страницы.

Хром 79

• Выясните причину блокировки cookie.
• Просмотреть значения файлов cookie
• Имитация различных предпочтений в отношении цветовой схемы и уменьшения интенсивности движения.
• Обновления покрытия кода
• Выясните причину запроса сетевого ресурса.
• Панели «Консоль» и «Источники» снова учитывают настройки отступов.
• Новые сочетания клавиш для навигации курсором

Хром 78

• Поддержка нескольких клиентов в панели аудита.
• Отладка обработчика платежей
• Lighthouse 5.2 в панели «Аудиты»
• Самый большой и информативный элемент оформления в панели «Производительность».
• Сообщайте о проблемах в инструментах разработчика из главного меню.

Хром 77

• Скопировать стили элемента
• Визуализация изменений компоновки
• Lighthouse 5.1 в панели «Аудиты»
• синхронизация тем ОС
• Сочетание клавиш для открытия редактора точек останова
• Предварительная загрузка кэша в панели «Сеть»
• Частная собственность при осмотре объектов
• Уведомления и push-уведомления в панели приложения.

Хром 76

• Автозаполнение с использованием значений CSS
• Новый пользовательский интерфейс для сетевых настроек.
• Сообщения WebSocket в экспорте HAR
• Кнопки импорта и экспорта HAR
• Использование памяти в реальном времени
• номера портов регистрации работников сферы услуг
• Просмотрите события фоновой выборки и фоновой синхронизации.
• Puppeteer для Firefox

Хром 75

• Полезные предустановки при автозаполнении функций CSS
• Очистка данных сайта через меню команд.
• Просмотреть все базы данных IndexedDB
• При наведении курсора мыши отображается несжатый размер ресурса.
• Встроенные точки останова в панели «Точки останова»
• Количество ресурсов IndexedDB и Cache
• Настройка для отключения подробной всплывающей подсказки «Проверить».
• Настройка для переключения отступов табуляции в редакторе

Хром 74

• Выделите все узлы, затронутые свойством CSS.
• Lighthouse v4 в панели «Аудиты»
• средство просмотра двоичных сообщений WebSocket
• Снимок области захвата экрана в меню команд.
• Фильтры Service Worker на панели «Сеть».
• Обновления панели производительности
• Длительные задания в записи панельных дискуссий о производительности
• Первая покраска в разделе «Время»
• Дополнительный совет: Быстрый способ просмотра цветовых кодов RGB и HSL (видео)

Хром 73

• Точки логарифма
• Подробные всплывающие подсказки в режиме просмотра.
• Экспорт данных о покрытии кода
• Управляйте консолью с помощью клавиатуры.
• Линия коэффициента контрастности AAA в палитре цветов
• Сохранение пользовательских настроек геолокации
• сворачивание кода
• Вкладка «Фреймы» переименована во вкладку «Сообщения».
• Дополнительный совет: Фильтрация по объектам недвижимости в сетевой панели (видео)

Хром 72

• Визуализируйте показатели производительности на панели «Производительность».
• Выделение текстовых узлов в DOM-дереве
• Скопируйте путь к файлу JavaScript в узел DOM.
• Обновления панели аудита , включая новый аудит, который обнаруживает библиотеки JavaScript, и новые ключевые слова для доступа к панели аудита из командного меню.
• Дополнительный совет: используйте режим устройства для проверки медиазапросов (видео).

Хром 71

• Наведите курсор на результат выполнения выражения в реальном времени , чтобы выделить узел DOM.
• Сохраняйте узлы DOM в качестве глобальных переменных.
• Информация об инициаторе и приоритете теперь доступна в импорте и экспорте HAR.
• Доступ к меню команд осуществляется из главного меню.
• Точки переключения «Картинка в картинке»
• Дополнительный совет: используйте monitorEvents() для записи событий, срабатывающих на узле, в консоль (видео).

Хром 70

• Выражения в реальном времени в консоли
• Выделение узлов DOM во время предварительной оценки
• Оптимизация производительности панели
• Более надежная отладка
• Включите ограничение скорости сети через командное меню.
• Условные точки останова автозаполнения
• Прерывание обработки событий AudioContext
• Отладка приложений Node.js с помощью ndb
• Дополнительный совет: измеряйте реальное взаимодействие пользователей с помощью API User Timing.

Хром 68

• Нетерпеливая оценка
• Подсказки для аргументации
• Автозавершение функций
• ключевые слова ES2017
• Lighthouse 3.0 в панели «Аудиты»
• Поддержка BigInt
• Добавление путей к свойствам в панель «Отслеживание».
• Функция «Показывать временные метки» перемещена в «Настройки».
• Дополнительный совет: Малоизвестные методы работы с консолью (видео)

Хром 67

• Поиск по всем заголовкам сети
• Предварительный просмотр значений переменных CSS
• Скопировать как получить
• Новые функции аудита, параметры конфигурации рабочего стола и просмотр трассировок.
• Остановить бесконечные циклы
• Время, затраченное пользователем, отображается на вкладке «Производительность».
• Экземпляры виртуальных машин JavaScript четко отображаются на панели «Память».
• Вкладка «Сеть» переименована во вкладку «Страница».
• Обновления темной темы
• Информация о прозрачности сертификатов в панели «Безопасность».
• Функции изоляции сайта на панели «Производительность»
• Дополнительный совет: Панель слоев + Инспектор анимации (видео)

Хром 66

• «Черный ящик» в панели «Сеть»
• Автоматическая настройка масштабирования в режиме устройства.
• Красивое форматирование текста на вкладках «Предварительный просмотр» и «Ответ».
• Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр».
• Поддержка локальных переопределений стилей внутри HTML.
• Дополнительный совет: скрипты фреймворка Blackbox для повышения эффективности точек останова в обработчиках событий.

Хром 65

• Локальные переопределения
• Новые инструменты обеспечения доступности
• Вкладка «Изменения»
• Новые SEO-аудиты и аудиты производительности.
• Несколько записей на панели «Производительность».
• Надежное пошаговое выполнение кода с помощью воркеров в асинхронном коде
• Дополнительный совет: Автоматизируйте действия в инструментах разработчика с помощью Puppeteer (видео)

Chrome 64

• Монитор производительности
• Боковая панель консоли
• Сгруппировать похожие сообщения в консоли
• Дополнительный совет: используйте псевдокласс при наведении курсора (видео)

Хром 63

• Поддержка удаленной отладки для нескольких клиентов
• Рабочие пространства 2.0
• 4 новых аудита
• Имитация push-уведомлений с использованием пользовательских данных
• Запускайте фоновые события синхронизации с помощью пользовательских тегов.
• Дополнительный совет: Точки останова обработчика событий (видео)

Хром 62

• В консоли вас ждут первоклассные возможности.
• Новые рабочие процессы создания скриншотов
• Подсветка CSS Grid
• Новый консольный API для запроса объектов.
• Новые фильтры консоли
• Импорт HAR в панели «Сеть»
• Предварительный просмотр ресурсов кэша
• Более предсказуемая отладка кэша
• Покрытие кода на уровне блоков

Хром 61

• имитация регулирования скорости мобильного устройства
• Просмотр использования хранилища
• Просмотр времени кэширования ответов сервис-воркером.
• Включите индикатор FPS в командном меню.
• Настройте поведение колесика мыши на масштабирование или прокрутку.
• Поддержка отладки модулей ES6

Хром 60

• Новая аудиторская комиссия
• Значки сторонних производителей
• Новый жест для функции «Продолжить»
• Переходите на асинхронный режим.
• Более информативный предварительный просмотр объектов в консоли.
• Более информативный выбор контекста в консоли
• Обновления в режиме реального времени на вкладке «Покрытие».
• Более простые варианты регулирования скорости сети
• Асинхронные стеки включены по умолчанию

Хром 59

• Анализ покрытия кода CSS и JS
• Скриншоты на всю страницу
• Блокировка запросов
• Перейдите через asyncwait
• Единое командное меню