Привет! Вот что нового в Chrome DevTools в Chrome 75.
Видеоверсия этой страницы
Значимые предустановленные значения при автозаполнении функций CSS
Некоторые свойства CSS, такие как filter
, принимают функции в качестве значений. Например, filter: blur(1px)
добавляет к узлу размытие на 1 пиксель. При автозаполнении таких свойств, как filter
, DevTools теперь заполняет свойство значимым значением, чтобы вы могли предварительно просмотреть, какое изменение будет иметь значение в узле.
Рисунок 1 . Старое поведение автозаполнения. DevTools автоматически выполняет filter: blur
, и в окне просмотра не видно никаких изменений.
Рисунок 2 . Новое поведение автозаполнения. DevTools автоматически дополняет filter: blur(1px)
, и изменение видно в области просмотра.
Соответствующая проблема Chromium: #931145.
Очистите данные сайта из командного меню.
Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть командное меню, а затем запустите команду « Очистить данные сайта» , чтобы удалить все данные, относящиеся к странице, включая: Service Workers , localStorage
, sessionStorage
, IndexedDB , Web SQL. , файлы cookie , кеш и кеш приложений .
Рисунок 3 . Команда «Очистить данные сайта» .
Очистка данных сайта уже некоторое время доступна в меню «Приложение» > «Очистить хранилище» . Новой функцией Chrome 75 является возможность запуска команды из командного меню.
Если вы не хотите удалять все данные сайта, вы можете контролировать, какие данные будут удалены, в разделе «Приложение» > «Очистить хранилище» .
Рисунок 4 . Приложение > Очистить хранилище .
Соответствующая проблема Chromium: #942503.
Просмотреть все базы данных IndexedDB
Ранее Приложение > IndexedDB позволяло проверять базы данных IndexedDB только из основного источника. Например, если на вашей странице был <iframe>
и этот <iframe>
использовал IndexedDB, вы не сможете видеть его базы данных. Начиная с Chrome 75, DevTools показывает базы данных IndexedDB для всех источников.
Рисунок 5 . Старое поведение. На страницу встроена демо-версия, использующая IndexedDB, но базы данных не видны.
Рисунок 6 . Новое поведение. Базы данных демо-версии видны.
Соответствующая проблема Chromium: #943770.
Просмотр несжатого размера ресурса при наведении
Предположим, вы проверяете сетевую активность . Ваш сайт использует сжатие текста , чтобы уменьшить размер передаваемых ресурсов. Вы хотите узнать, насколько велики ресурсы страницы после того, как браузер их распакует. Раньше эта информация была доступна только при использовании больших строк запроса . Теперь вы можете получить доступ к этой информации, наведя курсор на столбец «Размер» .
Рисунок 7 . Наведите указатель мыши на столбец «Размер», чтобы просмотреть несжатый размер ресурса.
Соответствующая проблема с Chromium: #805429.
Встроенные точки останова на панели точек останова
Предположим, вы добавляете точку останова в следующую строку кода:
document.querySelector('#dante').addEventListener('click', logWarning);
Некоторое время DevTools позволял вам указать, когда именно он должен сделать паузу в точке останова, например: в начале строки, перед вызовом document.querySelector('#dante')
или перед addEventListener('click', logWarning)
называется. Если вы включите все 3, вы по сути создадите 3 точки останова. Ранее панель «Точки останова» не давала возможности управлять этими тремя точками останова по отдельности. Начиная с Chrome 75, каждая встроенная точка останова получает отдельную запись на панели «Точки останова» .
Рисунок 8 . Старое поведение. На панели «Точки останова» есть только одна запись.
Рисунок 9 . Новое поведение. На панели «Точки останова» есть 3 записи.
Соответствующая проблема Chromium: #927961.
Количество ресурсов IndexedDB и Cache
Панели IndexedDB и Cache теперь показывают общее количество ресурсов в базе данных или кэше.
Рисунок 10 . Общее количество записей в базе данных IndexedDB.
Соответствующие проблемы Chromium: #941197 , #930773 , #930865.
Настройка отключения подсказки подробной проверки
В Chrome 73 появились подробные всплывающие подсказки в режиме проверки .
Рисунок 11 . Подробная подсказка, показывающая цвет, шрифт, поля и контрастность.
Теперь вы можете отключить эти подробные всплывающие подсказки в меню «Настройки» > «Настройки» > «Элементы» > «Показать подсказку о подробной проверке» .
Рисунок 12 . Минимальная всплывающая подсказка, показывающая только ширину и высоту.
Соответствующая проблема Chromium: #948417.
Настройка переключения отступов табуляции в редакторе панели «Источники»
Тестирование доступности показало, что в редакторе была ловушка табуляции. Когда пользователь клавиатуры входил в редактор , у него не было возможности выйти из него, поскольку клавиша Tab использовалась для отступов. Чтобы переопределить поведение по умолчанию и использовать Tab для перемещения фокуса, включите «Настройки» > «Настройки» > «Источники» > «Включить перемещение фокуса по вкладкам» .
В последнее время было проведено много работы над тем, чтобы сделать пользовательский интерфейс DevTools более удобным для навигации с помощью клавиатуры. Чтобы узнать больше, ознакомьтесь с документацией Роба «Навигация по Chrome DevTools с помощью вспомогательных технологий» .
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!
Связь с командой Chrome DevTools
Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.
- Отправьте нам предложение или отзыв через crbug.com .
- Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
- Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .
Что нового в DevTools
Список всего, что было описано в серии «Что нового в DevTools» .
- Улучшения сетевой панели
- Переосмысление сетевых фильтров
- Экспорт HAR теперь по умолчанию исключает конфиденциальные данные.
- Улучшения панели «Элементы»
- Значения автозаполнения для свойств text-emphasis-*
- Переполнение прокрутки отмечено значком
- Улучшения панели производительности
- Рекомендации в реальных показателях
- Навигация по хлебным крошкам
- Улучшения панели памяти
- Новый профиль «Отдельные элементы»
- Улучшено именование простых объектов JS.
- Отключить динамическую тему
- Эксперимент Chrome: совместное использование процессов
- Маяк 12.2.1
- Разное
- Recorder поддерживает экспорт в Puppeteer для Firefox.
- Улучшения панели производительности
- Наблюдения за метриками в реальном времени
- Поисковые запросы в треке Сети
- Просмотрите трассировку стека вызовов Performance.mark и Performance.measure.
- Используйте данные тестового адреса на панели автозаполнения.
- Улучшения панели «Элементы»
- Принудить больше состояний для определенных элементов
- «Элементы» > «Стили» теперь автоматически заполняет больше свойств сетки.
- Маяк 12.2.0
- Разное
- Консольные идеи Gemini станут доступны в большинстве европейских стран
- Обновления панели производительности
- Расширенный сетевой трек
- Настройте данные производительности с помощью API расширяемости
- Подробности на треке «Тайминги»
- Скопируйте все перечисленные запросы на панели «Сеть».
- Более быстрые снимки кучи с именованными тегами HTML и меньше беспорядка
- Откройте панель «Анимация», чтобы захватывать анимацию и редактировать @keyframes в реальном времени.
- Маяк 12.1.0
- Улучшения доступности
- Разное
- Проверьте расположение привязки CSS на панели «Элементы».
- Улучшения панели «Источники»
- Улучшенная функция «Никогда не останавливайтесь здесь»
- Новые прослушиватели событий привязки прокрутки
- Улучшения сетевой панели
- Обновлены настройки регулирования сети.
- Информация о сервисном работнике в настраиваемых полях формата HAR.
- Отправка и получение событий WebSocket на панели «Производительность».
- Разное
- Улучшения панели производительности
- Перемещайте и скрывайте треки в обновленном режиме конфигурации треков.
- Игнорировать сценарии в таблице пламени
- Уменьшите скорость процессора в 20 раз.
- Панель статистики производительности станет устаревшей.
- Обнаружение чрезмерного использования памяти с помощью новых фильтров в снимках кучи
- Проверьте сегменты хранилища в разделе «Приложение» > «Хранилище».
- Отключите предупреждения self-XSS с помощью флага командной строки.
- Маяк 12.0.0
- Разное
- Лучше разбирайтесь в ошибках и предупреждениях в консоли с помощью Gemini
- Поддержка правил @position-try в разделе «Элементы» > «Стили».
- Улучшения панели «Источники»
- Настройте автоматическую красивую печать и закрытие скобок.
- Обработанные отклоненные обещания признаются пойманными
- Причины ошибок в консоли
- Улучшения сетевой панели
- Проверка заголовков Early Hints
- Скрыть столбец «Водопад»
- Улучшения панели производительности
- Сбор статистики селектора CSS
- Изменить порядок и скрыть треки
- Игнорировать фиксаторы на панели «Память»
- Маяк 11.7.1
- Разное
- Новая панель автозаполнения
- Улучшенное регулирование сети для WebRTC.
- Поддержка анимации с прокруткой на панели «Анимации».
- Улучшена поддержка вложенности CSS в разделе «Элементы» > «Стили».
- Панель «Улучшенная производительность»
- Скрыть функции и их дочерние элементы в диаграмме пламени
- Стрелки от выбранных инициаторов к событиям, которые они инициировали
- Маяк 11.6.0
- Подсказки для специальных категорий в разделе «Память» > «Снимки кучи».
- Приложение > Обновления хранилища
- Байты, используемые для общего хранилища
- Web SQL полностью устарел
- Улучшения панели покрытия
- Панель «Слои» может быть устаревшей.
- Прекращение поддержки JavaScript Profiler: четвертый этап, заключительный
- Разное
- Найдите пасхальное яйцо
- Обновления панели «Элементы»
- Эмулируйте выделенную страницу в разделе «Элементы» > «Стили».
- Палитра цветов, угловые часы и редактор замедления в резервных вариантах
var()
- Инструмент длины CSS устарел
- Всплывающее окно для выбранного результата поиска в разделе «Исполнение» > «Основной трек».
- Обновления сетевой панели
- Кнопка «Очистить» и фильтр поиска на вкладке «Сеть» > «Поток событий».
- Подсказки с причинами исключения для сторонних файлов cookie в разделе «Сеть» > «Файлы cookie».
- Включить и отключить все точки останова в источниках.
- Просмотр загруженных скриптов в DevTools для Node.js
- Маяк 11.5.0
- Улучшения доступности
- Разное
- Официальная коллекция расширений Recorder доступна
- Улучшения сети
- Причина сбоя в столбце Статус
- Улучшенное подменю «Копировать»
- Улучшения производительности
- Хлебные крошки на временной шкале
- Инициаторы событий на Главном треке
- Меню выбора экземпляра виртуальной машины JavaScript для Node.js DevTools
- Новый ярлык и команда в источниках
- Улучшения элементов
- Псевдоэлемент ::view-transition теперь доступен для редактирования в стилях.
- Поддержка свойства align-content для блочных контейнеров.
- Поддержка позы для эмулируемых складных устройств.
- Динамическая тематика
- Предупреждения об отказе от сторонних файлов cookie на панелях «Сеть» и «Приложения».
- Маяк 11.4.0
- Улучшения доступности
- Разное
- Улучшения элементов
- Оптимизированная панель фильтров на панели «Сеть».
- Поддержка
@font-palette-values
- Поддерживаемый случай: пользовательское свойство как запасной вариант другого пользовательского свойства.
- Улучшена поддержка исходных карт.
- Улучшения панели производительности
- Трек расширенных взаимодействий
- Расширенная фильтрация на вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий».
- Маркеры отступов на панели «Источники»
- Полезные подсказки для переопределенных заголовков и содержимого на панели «Сеть».
- Новые параметры командного меню для добавления и удаления шаблонов блокировки запросов.
- Эксперимент с нарушениями CSP удален.
- Маяк 11.3.0
- Улучшения доступности
- Разное
- Поэтапный отказ от сторонних файлов cookie
- Проанализируйте файлы cookie вашего веб-сайта с помощью инструмента анализа изолированной программной среды конфиденциальности.
- Расширенный список игнорирования
- Шаблон исключения по умолчанию для node_modules
- Перехваченные исключения теперь прекращают выполнение, если они перехвачены или проходят через неигнорируемый код.
-
x_google_ignoreList
переименован вignoreList
в исходных картах - Новый переключатель режима ввода во время удаленной отладки.
- На панели «Элементы» теперь отображаются URL-адреса узлов #document.
- Действующая политика безопасности контента в панели приложения.
- Улучшена отладка анимации.
- — Вы доверяете этому коду? диалоговое окно в источниках и предупреждение XSS в консоли
- Точки останова прослушивателя событий в веб-работниках и рабочих модулях
- Новый медиа-значок для
<audio>
и<video>
- Предварительная загрузка переименована в Спекулятивную загрузку.
- Маяк 11.2.0
- Улучшения доступности
- Разное
- Улучшен раздел @property в разделе «Элементы» > «Стили».
- Редактируемое правило @property
- Сообщается о проблемах с недействительными правилами @property.
- Обновлен список устройств для эмуляции.
- Симпатичная печать встроенного JSON в тегах скриптов в источниках.
- Автозаполнение личных полей в консоли
- Маяк 11.1.0
- Улучшения доступности
- Прекращение поддержки веб-SQL
- Проверка соотношения сторон скриншота в разделе «Приложение» > «Манифест».
- Разное
- Новый раздел для пользовательских свойств в разделе «Элементы» > «Стили».
- Дополнительные улучшения локальных переопределений
- Расширенный поиск
- Улучшенная панель «Источники»
- Оптимизированное рабочее пространство на панели «Источники».
- Изменение порядка панелей в источниках
- Подсветка синтаксиса и красивая печать для большего количества типов скриптов.
- Эмулировать медиа-функцию «предпочитает пониженную прозрачность»
- Маяк 11
- Улучшения доступности
- Разное
- Улучшения сетевой панели
- Переопределять веб-контент локально еще быстрее
- Переопределить содержимое XHR и запросы на получение
- Скрыть запросы на расширение Chrome
- Удобочитаемые коды состояния HTTP
Производительность: просмотрите изменения приоритета выборки для сетевых событий.
- Настройки исходного кода включены по умолчанию: свертывание кода и автоматическое раскрытие файлов.
- Улучшена отладка проблем со сторонними файлами cookie.
- Новые цвета
- Маяк 10.4.0
- Отладка предварительной загрузки на панели приложений
- Расширение отладки C/C++ WebAssembly для DevTools теперь с открытым исходным кодом.
- Разное
- (Экспериментально) Новая эмуляция рендеринга: предпочитает пониженную прозрачность.
- (Экспериментальный) Монитор расширенного протокола
- Улучшена отладка отсутствующих таблиц стилей.
- Поддержка линейного времени в разделе «Элементы» > «Стили» > «Редактор замедления».
- Поддержка сегментов хранения и просмотр метаданных
- Маяк 10.3.0
- Специальные возможности: команды с клавиатуры и улучшенное чтение с экрана.
- Разное
- Улучшения элементов
- Новый значок подсетки CSS
- Специфика селектора во всплывающих подсказках
- Значения пользовательских свойств CSS во всплывающих подсказках
- Улучшения источников
- Подсветка синтаксиса CSS
- Ярлык для установки условных точек останова
- Приложение > Устранение последствий отслеживания отказов
- Маяк 10.2.0
- Игнорировать сценарии контента по умолчанию
- Сеть > Улучшения реагирования
- Разное
- Поддержка отладки WebAssembly
- Улучшено поведение шагов в приложениях Wasm.
- Отладка автозаполнения с помощью панели «Элементы» и вкладки «Проблемы»
- Утверждения в рекордере
- Маяк 10.1.1
- Улучшения производительности
- Performance.mark() показывает время при наведении курсора мыши в разделе «Производительность» > «Время».
- Команда Profile() заполняет Performance > Main
- Предупреждение о медленном взаимодействии с пользователем
- Обновления веб-показателей
- Прекращение поддержки JavaScript Profiler: третий этап
- Разное
- Переопределить заголовки сетевых ответов
- Улучшения отладки Nuxt, Vite и Rollup
- Улучшения CSS в разделе «Элементы» > «Стили».
- Неверные свойства и значения CSS
- Ссылки на ключевые кадры в свойстве сокращенной записи анимации.
- Новая настройка консоли: автозаполнение при вводе
- Меню команд выделяет авторские файлы
- Прекращение поддержки JavaScript Profiler: второй этап
- Разное
- Обновления рекордера
- Расширения воспроизведения рекордера
- Запись с помощью селекторов пирса
- Экспорт записей в виде сценариев Puppeteer с анализом Lighthouse.
- Получить расширения для рекордера
- Элементы > Обновления стилей
- Документация CSS на панели «Стили»
- Поддержка вложенности CSS
- Маркировка точек журнала и условных точек останова в консоли
- Игнорируйте ненужные сценарии во время отладки.
- Началось прекращение поддержки JavaScript Profiler
- Эмулировать пониженный контраст
- Маяк 10
- Разное
- Отладка цвета HD с помощью панели «Стили»
- Улучшенный интерфейс точки останова
- Настраиваемые ярлыки рекордера
- Улучшенная подсветка синтаксиса для Angular
- Реорганизация кэшей на панели приложений.
- Разное
- Очистка панели производительности при перезагрузке
- Обновления рекордера
- Просмотрите и выделите код вашего пользовательского потока в Recorder.
- Настройка типов выбора записи
- Редактируйте пользовательский поток во время записи
- Автоматическая красивая печать на месте
- Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других приложений.
- Эргономичное и последовательное автозаполнение в консоли.
- Разное
- Регистратор: копирование как параметры шагов, повтор на странице, контекстное меню шага.
- Показывать настоящие названия функций в записях выступления
- Новые сочетания клавиш на панели «Консоль и источники».
- Улучшенная отладка JavaScript.
- Разное
- [Экспериментальное] Улучшенный UX при управлении точками останова.
- [Экспериментальное] Автоматическая красивая печать на месте
- Подсказки для неактивных свойств CSS
- Автоматическое обнаружение XPath и текстовых селекторов на панели «Рекордер»
- Пошаговое рассмотрение выражений, разделенных запятыми
- Улучшена настройка списка игнорирования.
- Разное
- Настройка сочетаний клавиш в DevTools
- Переключение светлых и темных тем с помощью сочетания клавиш
- Выделите объекты C/C++ в инспекторе памяти.
- Поддержка полной информации об инициаторе импорта HAR.
- Запустите поиск DOM после нажатия
Enter
- Отображать значки
start
иend
для свойств флексбокса CSSalign-content
- Разное
- Сгруппируйте файлы по авторским/развернутым на панели «Источники».
- Связанные трассировки стека для асинхронных операций
- Автоматически игнорировать известные сторонние скрипты
- Улучшен стек вызовов во время отладки.
- Скрытие источников из списка игнорируемых на панели «Источники»
- Скрытие файлов из списка игнорируемых в меню команд
- Новая дорожка «Взаимодействия» на панели «Производительность».
- Разбивка таймингов LCP на панели Performance Insights
- Автоматическое создание имени по умолчанию для записей на панели «Рекордер»
- Разное
- Пошаговый повтор в Диктофоне
- Поддержка события наведения курсора мыши на панели «Рекордер».
- Самая большая отрисовка контента (LCP) на панели «Сведения о производительности»
- Определите вспышки текста (FOIT, FOUT) как потенциальные основные причины изменений макета.
- Обработчики протоколов на панели «Манифест»
- Значок верхнего слоя на панели «Элементы»
- Прикрепите информацию об отладке Wasm во время выполнения.
- Поддержка живого редактирования во время отладки
- Просмотр и редактирование @scope в правилах на панели «Стили».
- Улучшения исходной карты
- Разное
- Перезапустить кадр во время отладки
- Параметры медленного воспроизведения на панели «Рекордер»
- Создайте расширение для панели «Рекордер».
- Сгруппируйте файлы по авторским/развернутым на панели «Источники».
- Новый трек «Время пользователя» на панели «Статистика производительности».
- Показать назначенный слот элемента
- Имитация аппаратного параллелизма для записей производительности
- Предварительный просмотр значения без цвета при автозаполнении переменных CSS
- Определите блокирующие кадры на панели «Кэш назад/вперед».
- Улучшены предложения автозаполнения для объектов JavaScript.
- Улучшения исходных карт
- Разное
- Захват событий двойного щелчка и щелчка правой кнопкой мыши на панели «Рекордер»
- Новый временной интервал и режим снимков на панели «Маяк».
- Улучшено управление масштабированием на панели Performance Insights.
- Подтвердите удаление записи выступления
- Изменение порядка панелей на панели «Элементы»
- Выбор цвета вне браузера
- Улучшен предварительный просмотр встроенных значений во время отладки.
- Поддержка больших BLOB-объектов для виртуальных аутентификаторов.
- Новые сочетания клавиш на панели «Источники»
- Улучшения исходных карт
- Функция предварительной версии: новая панель статистики производительности.
- Новые ярлыки для имитации светлых и темных тем.
- Улучшена безопасность на вкладке «Просмотр сети».
- Улучшена перезагрузка в точке останова.
- Обновления консоли
- Отменить запись пользовательского потока в начале
- Отображать унаследованные псевдоэлементы выделения на панели «Стили».
- Разное
- [Экспериментальное] Копирование изменений CSS
- [Экспериментальное] Выбор цвета вне браузера
- Импортируйте и экспортируйте записанные потоки пользователей в виде файла JSON.
- Просмотр каскадных слоев на панели «Стили»
- Поддержка функции цвета
hwb()
- Улучшено отображение частных объектов недвижимости.
- Разное
- [Экспериментальное] Новый временной интервал и режим снимков на панели «Маяк».
- Просмотр и редактирование @supports в правилах на панели «Стили».
- Поддержка общих селекторов по умолчанию
- Настройте селектор записи
- Переименование записи
- Предварительный просмотр свойств класса/функции при наведении
- Частично представленные кадры на панели «Производительность»
- Разное
- Регулирование запросов WebSocket
- Новая панель Reporting API на панели приложения.
- Поддержка ожидания, пока элемент не станет видимым/доступным для щелчка на панели «Рекордер».
- Улучшенный стиль консоли, форматирование и фильтрация.
- Отладка расширения Chrome с помощью исходных файлов карт
- Улучшено дерево папок исходного кода на панели «Источники».
- Отображение исходных файлов рабочего процесса на панели «Источники».
- Обновления автоматической темной темы Chrome
- Сенсорная палитра цветов и разделенная панель
- Разное
- Функция предварительной версии: полностраничное дерево доступности.
- Более точные изменения на вкладке «Изменения».
- Установите более длительный тайм-аут для записи потока пользователей.
- Убедитесь, что ваши страницы кэшируются с помощью вкладки «Кэш назад/вперед».
- Новый фильтр панели свойств
- Эмулировать функцию мультимедиа с принудительной цветовой схемой CSS.
- Показывать линейки при наведении курсора
- Поддержка
row-reverse
иcolumn-reverse
в редакторе Flexbox. - Новые сочетания клавиш для воспроизведения XHR и расширения всех результатов поиска.
- Маяк 9 на панели «Маяк»
- Улучшенная панель «Источники»
- Разное
- [Экспериментальный] Конечные точки на панели Reporting API
- Функция предварительного просмотра: новая панель «Рекордер»
- Обновить список устройств в режиме устройства.
- Автозаполнение с помощью Edit as HTML
- Улучшенный опыт отладки кода.
- Синхронизация настроек DevTools между устройствами
- Функция предварительной версии: новая панель обзора CSS.
- Восстановлены и улучшены возможности редактирования и копирования длины CSS.
- Эмулировать функцию CSS «предпочитает контрастность мультимедиа»
- Эмулируйте функцию автоматической темной темы Chrome.
- Копирование объявлений в виде JavaScript на панели «Стили»
- Новая вкладка «Полезная нагрузка» на панели «Сеть».
- Улучшено отображение свойств на панели «Свойства».
- Возможность скрыть ошибки CORS в консоли.
- Правильный предварительный просмотр и оценка объектов
Intl
в консоли - Согласованные трассировки асинхронного стека
- Сохраните боковую панель консоли
- Устаревшая панель «Кэш приложения» на панели «Приложение».
- [Экспериментальное] Новая панель Reporting API на панели приложения.
- Новые инструменты разработки длины CSS
- Скрыть проблемы на вкладке «Проблемы»
- Улучшено отображение свойств
- Маяк 8.4 на панели Маяк
- Сортировка фрагментов на панели «Источники»
- Новые ссылки на переведенные примечания к выпуску и сообщение об ошибке перевода.
- Улучшен пользовательский интерфейс командного меню DevTools.
- Используйте DevTools на предпочитаемом вами языке.
- Новые устройства Nest Hub в списке устройств.
- Исходные пробные версии в представлении сведений о раме
- Новый значок запросов контейнера CSS
- Новый флажок для инвертирования сетевых фильтров.
- Предстоящее прекращение поддержки боковой панели консоли.
- Отображать необработанные заголовки
Set-Cookies
на вкладке «Проблемы» и панели «Сеть». - Согласованное отображение собственных средств доступа как собственных свойств в консоли.
- Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL
- Изменение формата цвета на панели «Вычисляемые»
- Замените пользовательские всплывающие подсказки собственными HTML-подсказками.
- [Экспериментальное] Скрытие проблем на вкладке «Проблемы»
- Редактируемые запросы контейнера CSS на панели «Стили»
- Предварительный просмотр веб-пакета на панели «Сеть»
- Отладка API отчетов об атрибуции
- Улучшена обработка строк в консоли.
- Улучшенная отладка CORS
- Маяк 8.1
- URL-адрес новой заметки на панели «Манифест»
- Исправлены селекторы соответствия CSS.
- Удобная печать ответов JSON на панели «Сеть».
- Редактор CSS-сеток
- Поддержка переобъявления
const
в консоли. - Просмотр исходного заказа
- Новый ярлык для просмотра деталей кадра
- Расширенная поддержка отладки CORS.
- Переименуйте метку XHR в Fetch/XHR.
- Фильтрация типа ресурса Wasm на панели «Сеть»
- Подсказки клиента User-Agent для устройств на вкладке «Условия сети»
- Сообщайте о проблемах в режиме Quirks на вкладке «Проблемы».
- Включение вычислительных пересечений на панель «Производительность»
- Маяк 7.5 на панели Маяк
- Устаревшее контекстное меню «Перезапустить кадр» в стеке вызовов.
- [Экспериментальный] Монитор протокола
- [Экспериментальное] Блокфлейта кукольника
- Всплывающее окно с информацией о веб-показателях
- Новый инспектор памяти
- Визуализируйте привязку прокрутки CSS
- Новая панель настроек значка
- Улучшенный предварительный просмотр изображения с информацией о соотношении сторон
- Новая кнопка условий сети с возможностью настройки
Content-Encoding
. - ярлык для просмотра вычисленного значения
- Ключевое слово
accent-color
- Классифицировать типы проблем с помощью цветов и значков
- Удалить токены доверия
- Заблокированные функции в представлении сведений о раме
- Фильтруйте эксперименты в настройках «Эксперименты».
- Новый столбец
Vary Header
на панели хранилища кэша. - Поддержка проверки частного бренда JavaScript
- Расширенная поддержка отладки точек останова.
- Поддержка предварительного просмотра при наведении с обозначением
[]
- Улучшенная структура HTML-файлов.
- Правильные трассировки стека ошибок для отладки Wasm
- Новые инструменты отладки CSS flexbox
- Новое наложение основных веб-показателей
- Счетчик проблем перенесен в строку состояния консоли.
- Сообщать о проблемах с доверенной веб-активностью
- Отформатируйте строки как (допустимые) строковые литералы JavaScript в консоли.
- Новая панель «Токены доверия» на панели «Приложение».
- Эмулировать функцию мультимедиа цветовой гаммы CSS
- Улучшенные инструменты Progressive Web Apps.
- Столбец «Новое
Remote Address Space
на панели «Сеть». - Улучшения производительности
- Отображение разрешенных/запрещенных функций в представлении сведений о раме.
- Новый столбец
SameParty
на панели «Файлы cookie». - Устаревшая нестандартная поддержка
fn.displayName
- Устаревшая функция «
Don't show Chrome Data Saver warning
в меню «Настройки». - [Экспериментальное] Автоматическое низкоконтрастное сообщение о проблемах на вкладке «Проблемы».
- [Экспериментальное] Полное древовидное представление специальных возможностей на панели «Элементы».
- Поддержка отладки нарушений доверенных типов
- Захватить снимок экрана узла за пределами области просмотра
- Новая вкладка «Токены доверия» для сетевых запросов.
- Маяк 7 на панели «Маяк»
- Поддержка принудительного изменения состояния CSS
:target
. - Новый ярлык для дублирования элемента
- Палитры цветов для пользовательских свойств CSS
- Новые ярлыки для копирования свойств CSS
- Новая опция для отображения файлов cookie, декодированных по URL-адресу.
- Очистить только видимые файлы cookie
- Новая опция для очистки сторонних файлов cookie на панели «Хранилище».
- Редактирование подсказок клиента User-Agent для пользовательских устройств
- Сохранять настройку «запись сетевого журнала».
- Просмотр подключений WebTransport на панели «Сеть»
- «Онлайн» переименован в «Без регулирования».
- Новые параметры копирования на панели «Консоль», «Источники» и «Стили».
- Информация о новых сервисных работниках в представлении сведений о кадре
- Измерьте информацию о памяти в представлении сведений о кадре.
- Оставьте отзыв на вкладке «Проблемы».
- Пропущенные кадры на панели «Производительность»
- Эмуляция складного и двойного экрана в режиме устройства
- [Экспериментальное] Автоматизация тестирования браузера с помощью Puppeteer Recorder
- [Экспериментально] Редактор шрифтов на панели «Стили»
- [Экспериментальное] Инструменты отладки CSS flexbox
- [Экспериментальный] Новая вкладка «Нарушения CSP»
- [Экспериментальное] Новый расчет цветового контраста — расширенный алгоритм перцептивного контраста (APCA)
- Ускоренный запуск DevTools
- Новые инструменты угловой визуализации CSS
- Эмулировать неподдерживаемые типы изображений
- Имитация размера квоты хранилища на панели «Хранилище»
- Новая полоса Web Vitals на панели «Производительность».
- Сообщайте об ошибках CORS на панели «Сеть».
- Информация о междоменной изоляции в представлении сведений о кадре
- Информация о новых веб-воркерах в представлении сведений о фрейме
- Отображение сведений о рамке открывания для открытых окон
- Откройте панель «Сеть» на панели «Service Workers».
- Копировать значение свойства
- Скопировать трассировку стека для сетевого инициатора
- Предварительный просмотр значения переменной Wasm при наведении курсора мыши
- Оцените переменную Wasm в консоли
- Согласованные единицы измерения размеров файлов/памяти.
- Выделение псевдоэлементов на панели «Элементы».
- [Экспериментальное] Инструменты отладки CSS Flexbox
- [Экспериментальное] Настройка сочетаний клавиш для аккордов
- Новые инструменты отладки CSS Grid
- Новая вкладка WebAuthn
- Перемещение инструментов между верхней и нижней панелью
- Новая боковая панель «Вычисляемые» на панели «Стили».
- Группировка свойств CSS на панели «Вычисляемые»
- Маяк 6.3 на панели Маяк
- События
performance.mark()
в разделе «Тайминги» - Новые фильтры
resource-type
иurl
на панели «Сеть». - Подробности о раме, просмотр обновлений
- Устаревшие
Settings
в меню «Дополнительные инструменты» - [Экспериментальное] Просмотр и исправление проблем с цветовым контрастом на панели «Обзор CSS».
- [Экспериментальное] Настройка сочетаний клавиш в DevTools
- Панель «Новые медиа»
- Делайте снимки экрана узла с помощью контекстного меню панели «Элементы».
- Обновления вкладки «Проблемы»
- Эмулировать отсутствующие локальные шрифты
- Эмулируйте неактивных пользователей
- Эмулировать
prefers-reduced-data
- Поддержка новых функций JavaScript
- Маяк 6.2 на панели Маяк
- Устаревший список «другие источники» на панели Service Workers.
- Показать сводку покрытия для отфильтрованных элементов
- Новый вид деталей кадра на панели приложения.
- Доступное предложение цвета на панели «Стили»
- Восстановить панель «Свойства» на панели «Элементы».
- Удобочитаемые значения заголовка
X-Client-Data
на панели «Сеть». - Автозаполнение пользовательских шрифтов на панели «Стили»
- Последовательное отображение типа ресурса на панели «Сеть».
- Очистить кнопки на панелях «Элементы» и «Сеть».
- Редактирование стилей для фреймворков CSS-in-JS
- Маяк 6 на панели «Маяк»
- Прекращение поддержки First Meaningful Paint (FMP)
- Поддержка новых функций JavaScript
- Предупреждения о новых ярлыках приложений на панели манифеста
- Работник службы
respondWith
события на вкладке «Время». - Согласованное отображение панели «Вычисления»
- Смещения байт-кода для файлов WebAssembly
- Построчное копирование и вырезание на панели «Источники»
- Обновления настроек консоли
- Обновления панели производительности
- Новые значки для точек останова, условных точек останова и точек журнала.
- Исправляйте проблемы сайта с помощью новой вкладки «Проблемы».
- Просмотр информации о специальных возможностях во всплывающей подсказке режима проверки.
- Обновления панели производительности
- Более точная терминология обещаний в консоли.
- Обновления панели «Стили»
- Устаревшая панель «Свойства» на панели «Элементы»
- Поддержка ярлыков приложений на панели манифеста
- Имитировать недостатки зрения
- Эмулировать локали
- Отладка политики внедрения перекрестных источников (COEP)
- Новые значки для точек останова, условных точек останова и точек журнала.
- Просмотр сетевых запросов, которые устанавливают определенный файл cookie
- Закрепить слева от меню команд.
- Параметр «Настройки» в главном меню перемещен
- Панель «Аудит» теперь называется панелью «Маяк».
- Удалить все локальные переопределения в папке
- Обновлен интерфейс длинных задач.
- Поддержка маскируемых значков на панели манифеста.
- Поддержка Moto G4 в режиме устройства
- Обновления, связанные с файлами cookie
- Более точные значки манифеста веб-приложений
- Наведите указатель мыши на свойства
content
CSS, чтобы увидеть неэкранированные значения. - Ошибки исходной карты в консоли
- Настройка отключения прокрутки за конец файла
- Поддержка переобъявления
let
иclass
в консоли. - Улучшенная отладка WebAssembly.
- Запросить цепочки инициаторов на вкладке «Инициатор»
- Выделите выбранный сетевой запрос в обзоре.
- Столбцы URL-адресов и путей на панели «Сеть»
- Обновлены строки User-Agent.
- Новый пользовательский интерфейс конфигурации панели «Аудит»
- Режимы покрытия кода для каждой функции или для каждого блока
- Покрытие кода теперь должно инициироваться перезагрузкой страницы.
- Выясните, почему файл cookie был заблокирован.
- Просмотр значений файлов cookie
- Имитировать различные предпочтения цветовой схемы и предпочтения ограниченного движения.
- Обновления покрытия кода
- Отладка того, почему был запрошен сетевой ресурс
- Панели «Консоль» и «Источники» снова учитывают настройки отступов.
- Новые сочетания клавиш для навигации курсором.
- Поддержка нескольких клиентов на панели «Аудит»
- Отладка обработчика платежей
- Маяк 5.2 на панели «Аудит»
- Самая большая содержательная отрисовка на панели «Производительность»
- Проблемы с файлами DevTools из главного меню
- Копировать стили элемента
- Визуализируйте изменения макета
- Маяк 5.1 на панели «Аудит»
- Синхронизация тем ОС
- Сочетание клавиш для открытия редактора точек останова
- Кэш предварительной выборки на панели «Сеть»
- Частные свойства при просмотре объектов
- Уведомления и push-сообщения в панели приложений
- Автозаполнение значений CSS
- Новый пользовательский интерфейс для сетевых настроек.
- Сообщения WebSocket в экспорте HAR
- Кнопки импорта и экспорта HAR
- Использование памяти в реальном времени
- Номера портов регистрации сервисного работника
- Проверка событий фоновой выборки и фоновой синхронизации
- Кукольник для Firefox
- Значимые пресеты при автозаполнении функций CSS
- Очистите данные сайта из командного меню.
- Просмотреть все базы данных IndexedDB
- Просмотр несжатого размера ресурса при наведении
- Встроенные точки останова на панели «Точки останова»
- Количество ресурсов IndexedDB и Cache
- Настройка отключения подробной всплывающей подсказки «Проверка»
- Настройка переключения отступов табуляции в редакторе
- Выделите все узлы, на которые влияет свойство CSS.
- Lighthouse v4 на панели «Аудит»
- Средство просмотра двоичных сообщений WebSocket
- Снимок экрана области в командном меню
- Фильтры Service Worker на панели «Сеть»
- Обновления панели производительности
- Длинные задачи в записях панели «Производительность»
- Первая отрисовка в разделе «Тайминг»
- Дополнительный совет: ярлык для просмотра цветовых кодов RGB и HSL (видео)
- Логпоинты
- Подробные подсказки в режиме проверки
- Экспорт данных о покрытии кода
- Навигация по консоли с помощью клавиатуры
- Линия коэффициента контрастности AAA в палитре цветов
- Сохранение пользовательских переопределений геолокации
- Складывание кода
- Вкладка «Кадры» переименована во вкладку «Сообщения».
- Дополнительный совет: фильтрация панели «Сеть» по свойству (видео)
- Визуализируйте показатели производительности на панели «Производительность».
- Выделение текстовых узлов в дереве DOM
- Скопируйте путь JS к узлу DOM.
- Обновления панели аудитов , включая новый аудит, который обнаруживает библиотеки JS и новые ключевые слова для доступа к панели аудитов из меню команд
- Бонусный совет: используйте режим устройства для проверки медиа -запросов (видео)
- Нависнуть на результат живого выражения, чтобы выделить узел DOM
- Хранить узлы DOM как глобальные переменные
- Информация о инициаторе и приоритете в настоящее время в импорте и экспорте HAR
- Доступ к меню команд из главного меню
- Picture-in-картинки точки останова
- Бонусный совет: используйте
monitorEvents()
, чтобы зарегистрировать увольненные события узла в консоли (видео) - Живые выражения в консоли
- Выделите узлы DOM во время нетерпеливой оценки
- Оптимизация панели Performance
- Более надежная отладка
- Включить сетевой дросселинг из меню командных
- Автозаполнение условных точек останова
- Вернуть события AudioContext
- Приложения Debug Node.js с NDB
- Бонусный совет: измеряйте взаимодействие с пользователями реального мира с API пользовательского времени пользователя
- Жертная оценка
- Аргумент намекает
- Функция автозаполнения
- ES2017 Ключевые слова
- Lighthouse 3.0 на панели аудитов
- Bigint Support
- Добавление путей собственности к панели часов
- «Показать временные метки» перенесено в настройки
- Бонусный совет: менее известные методы консоли (видео)
- Поиск во всех сетевых заголовках
- Предварительный просмотр значения переменной CSS
- Скопируйте как выборочное
- Новые аудиты, параметры конфигурации рабочего стола и следы просмотра
- Остановите бесконечные петли
- Время пользователя в вкладках производительности
- Экземпляры JavaScript VM четко указаны на панели памяти
- Вкладка сети переименована в вкладку страницы
- Темные обновления темы
- Информация о прозрачности сертификата в панели безопасности
- Функции изоляции сайта на панели производительности
- Бонусный совет: панель слоев + инспектор анимации (видео)
- Блэкбоксинг на сетевой панели
- Автоматическое увеличение регулировки в режиме устройства
- ПРОИЗВКА
- Предварительное просмотр контента HTML в вкладке Предварительного просмотра
- Локальный переопределение поддержки стилей внутри HTML
- Бонусный совет: сценарии Blackbox Framework, чтобы сделать точки прослушивания событий более полезными
- Локальные переопределения
- Новые инструменты доступности
- Вкладка «Изменения»
- Новые аудиты SEO и производительность
- Несколько записей на панели Performance
- Надежный код шаг с работниками в асинхронном коде
- Бонусный совет: автоматизируйте действия Devtools с кукловодом (видео)
- Монитор производительности
- Консольная боковая панель
- Группа аналогичных консольных сообщений
- Бонусный совет: перевернуть псевдо-класс (видео)
- Поддержка удаленной отладки с несколькими клиентами
- Рабочие пространства 2.0
- 4 новых аудита
- Моделируйте уведомления Push с пользовательскими данными
- Триггерные фона синхронизируют события с пользовательскими тегами
- Бонусный совет: Слушание событий, точки останова (видео)
- Верхне ожидается в консоли
- Новые рабочие процессы экрана
- CSS GRID выделение
- Новая консольная API для запроса объектов
- Новые консольные фильтры
- Импорт HAR в сетевой панель
- Предварительные ресурсы кеша
- Более предсказуемая отладка в кешах
- Покрытие кода на уровне блока
- Моделирование дросселя мобильного устройства
- Посмотреть использование хранилища
- Просмотреть, когда обслуживающий работник кэшировал ответы
- Включить счетчик FPS из меню команд
- Установите поведение мышиного колеса на увеличение или прокрутку
- Отладка поддержки модулей ES6
- Новая панель аудитов
- Значки третьей стороны
- Новый жест для продолжения здесь
- Шагнуть в асинхронность
- Больше информативных предварительных просмотров объектов в консоли
- Более информативный выбор контекста в консоли
- Обновления в реальном времени на вкладке «Покрытие»
- Более простые параметры дросселирования сети
- Асинхронные стеки по умолчанию
- CSS и JS Code
- Полностраничные скриншоты
- Блок запросов
- Переходить на асинхрон
- Unified Command Menu