Улучшения сетевой панели
Переопределять веб-контент локально еще быстрее
Функция локальных переопределений теперь оптимизирована, поэтому вы можете легко имитировать заголовки ответов и веб-содержимое удаленных ресурсов с панели «Сеть», не имея к ним доступа.
Чтобы переопределить веб-содержимое, откройте панель «Сеть» , щелкните запрос правой кнопкой мыши и выберите «Переопределить содержимое» .
Если у вас настроены, но отключены локальные переопределения, DevTools включает их. Если вы еще не настроили их, DevTools предложит вам это сделать на панели действий вверху. Выберите папку для хранения переопределений и разрешите DevTools доступ к ней.
После настройки переопределений DevTools перенаправит вас в раздел «Источники» > «Переопределения» > «Редактор», чтобы вы могли переопределить веб-контент .
Обратите внимание, что переопределенные ресурсы обозначаются значком на панели «Сеть» . Наведите указатель мыши на значок, чтобы увидеть, что было переопределено.
Проблемы с хромом: 1465785 , 1470532 , 1469359 .
Переопределить содержимое XHR и запросы на получение
Теперь вы можете переопределить содержимое XHR и получать запросы в дополнение к заголовкам ответов. С помощью таких переопределений вы можете имитировать ответы API для отладки вашей веб-страницы, даже если ваш сервер и API еще не готовы.
DevTools в настоящее время поддерживает переопределение содержимого для следующих типов запросов: изображения (например, avif, png), шрифты, выборка и XHR, сценарии (css и js) и документы (html). DevTools теперь неактивен для параметра «Переопределить содержимое» для неподдерживаемых типов.
Проблемы с хромом: 792101 , 1469776 .
Скрыть запросы на расширение Chrome
Чтобы помочь вам сосредоточиться на написанном вами коде и отфильтровать нерелевантные запросы, отправленные расширениями, которые вы, возможно, установили в Chrome, на панели «Сеть» появился новый фильтр.
Чтобы отфильтровать все запросы, отправленные на URL-адреса chrome-extension://
, установите флажок Скрыть URL-адреса расширений .
Проблемы с хромом: 1257885 , 1458803 .
Удобочитаемые коды состояния HTTP
Код состояния в заголовке запроса теперь показывает удобочитаемый текст рядом с кодами состояния HTTP, поэтому вы можете быстрее выяснить, что случилось с запросом.
Вы также можете навести курсор на код состояния в таблице запросов, чтобы увидеть тот же текст.
Проблема с хромом: 1153956 .
Симпатичные ответы для подтипов JSON
Вкладка «Ответ» для запроса с подтипом MIME application/[subtype]+json
(например, ld+json
, hal+json
и другие) теперь корректно анализирует ответ и позволяет его оформить.
Проблема с хромом: 406900 .
Производительность: просмотрите изменения приоритета выборки для сетевых событий.
На панели «Производительность» теперь отображаются два поля приоритета в сводке события на дорожке сети : начальный приоритет и (конечный) приоритет , а не только один приоритет . С помощью этого дополнительного поля вы теперь можете увидеть, изменился ли приоритет загрузки события, и настроить порядок загрузок. Дополнительные сведения см. в разделе Оптимизация загрузки ресурсов с помощью Fetch Priority API .
Кроме того, ту же информацию можно найти в столбце «Приоритет» на панели «Сеть» с помощью кнопки Включена настройка больших строк запроса .
Проблемы с хромом: 1463901 , 1380964 .
Настройки исходного кода включены по умолчанию: свертывание кода и автоматическое раскрытие файлов.
Настройки > Настройки > Опция свертывания кода теперь включена по умолчанию. Эта опция позволяет складывать блоки кода.
Чтобы свернуть блок кода, наведите указатель мыши на номер строки рядом с началом блока и нажмите кнопку значок свернуть. Нажмите {...}
чтобы снова развернуть блок.
Более того, Настройки > Настройки > Автоматическое отображение файлов на боковой панели теперь также включено по умолчанию.
Этот параметр заставляет дерево файлов в разделе «Источники» > «Страница» выбирать текущий файл, открытый в редакторе, при переключении вкладок.
Проблемы с хромом: 1459193 , 1336599 .
Улучшена отладка проблем со сторонними файлами cookie.
Стремясь помочь создать более конфиденциальную сеть и параллельно с обновлениями других браузеров , Chrome представил инициативу Privacy Sandbox . Эта инициатива фундаментально повышает конфиденциальность в Интернете и может поддерживать здоровую сеть с рекламной поддержкой, что сделает сторонние файлы cookie устаревшими. Privacy Sandbox имеет график поэтапного вывода из эксплуатации , что позволяет вам комфортно адаптироваться к изменениям.
Вы уже можете протестировать, как ведет себя Chrome после прекращения использования сторонних файлов cookie. Для этого запустите Chrome из командной строки с флагом --test-third-party-cookies-phaseout
. Чтобы узнать, что делает этот флаг, см. Отладка файлов cookie .
Независимо от того, как вы запускаете Chrome (с флагом или без него), на вкладке «Проблемы» теперь отображается значок Флажок « Включить проблемы со сторонними файлами cookie» включен по умолчанию для всех новых пользователей Chrome и в результате сообщает:
- Предупреждение о критическом изменении о предстоящем прекращении использования.
- Проблемы, связанные со сторонними файлами cookie.
Если вы хотите видеть предупреждения файлов cookie о предстоящем прекращении использования в качестве существующего пользователя Chrome, обязательно установите этот флажок.
Чтобы проверить это, проверьте файлы cookie на этой демонстрационной странице .
Кроме того, Фильтр файлов cookie заблокированных ответов на панели «Сеть» был перефразирован, чтобы было понятно, что он отображает только файлы cookie заблокированных ответов .
Проблемы с хромом: 1458839 , 1462693 , 1466310 .
Отладка предварительной загрузки на панели приложений
Команда Chrome возвращает полную предварительную отрисовку будущих страниц, на которые, скорее всего, перейдет пользователь. Чтобы вы могли отладить это, DevTools добавляет раздел «Предварительная загрузка» на панель «Приложение» . Новая предварительная выборка и предварительный рендеринг (в совокупности известные как «навигационная предварительная загрузка») использует API Speculation Rules, а не подсказки ресурсов на основе ссылок .
На этой демонстрационной странице в разделе Приложение > Предварительная загрузка вы можете проверить:
- Правила спекуляции , в которых перечислены все наборы правил, найденные на текущей странице.
- Предварительная загрузка , в которой перечислены все предварительно выбранные и предварительно обработанные URL-адреса из наборов правил.
- Эта страница , на которой указан предварительно обработанный статус текущей страницы.
За дополнительной информацией обратитесь к специальному посту, посвященному отладке правил спекуляций .
Проблема с хромом: 1410709 .
Новые цвета
Возможно, вы уже заметили, что DevTools теперь имеет обновленный внешний вид, который лучше соответствует Chrome. Одним из факторов, способствующих этому, является новая цветовая схема.
Эта версия (117) содержит дополнительные улучшения пользовательского интерфейса DevTools, как уже упомянутые, так и перечисленные далее, включая ряд улучшенных текстов пользовательского интерфейса.
Проблема с хромом: 1456677 .
Маяк 10.4.0
На панели «Маяк» теперь работает Lighthouse 10.4.0. В частности, в этой версии добавлены новые проверки доступности для следующего:
Например:
См. также полный список изменений . Чтобы узнать основы использования панели Lighthouse в DevTools, см. Lighthouse: оптимизация скорости веб-сайта .
Проблема с хромом: 772558 .
Расширение отладки C/C++ WebAssembly для DevTools теперь с открытым исходным кодом.
Расширение отладки C/C++ WebAssembly для DevTools теперь имеет открытый исходный код и находится в репозитории внешнего интерфейса DevTools . Это расширение обеспечивает возможности отладки в DevTools для программ C++, скомпилированных в WebAssembly. Дополнительные сведения см. в разделе Отладка C/C++ WebAssembly .
Узнайте, как создавать, запускать и тестировать расширение , и не стесняйтесь вносить свой вклад .
Проблема с хромом: 1410709 .
Разное
Вот некоторые примечательные исправления и улучшения в этом выпуске:
- Вложенность CSS : на панели «Элементы» теперь отображается вся цепочка селекторов для вложенных дочерних элементов ( 1172985 ).
- Приложение > Манифест теперь имеет раздел «Наложение элементов управления окном» , который проверяет, присутствует ли значение
display_override
в манифесте, и предоставляет ссылки на соответствующую документацию. - Дерево «Источники > Страницы» теперь выполняет следующие действия, включая, помимо прочего, ( 1442863 ):
- Папки выделяются серым цветом, если все их содержимое находится в списке игнорируемых.
- Папки окрашиваются в оранжевый цвет, если все их содержимое взято из исходной карты.
- Производительность : настройки захвата теперь автоматически скрываются при запуске записи ( 1455498 ).
- Источники > Редактор восстановили поведение Ctrl + Arrow (Win) и Opt + Arrow (MacOs) ( 1468208 ).
- Переключатель «Анимация» > «Приостановить все » теперь сохраняет свое состояние при загрузке страницы ( 1446046 ).
- Приложение > Хранилище > Хранилище кэша перемещено в раздел Приложение > Хранилище > Кэш ( 1462622 ).
- Улучшены некоторые тексты пользовательского интерфейса и всплывающие подсказки: всплывающая подсказка по аппаратному параллелизму , тексты сетевого фильтра и пункт главного меню , использование заглавных букв в дереве приложений , тексты «Сеть» > «Заголовки» , «Источники» > «Переопределения» и «Файловая система» .
Новые экспериментальные функции
Новая эмуляция рендеринга: prefers-reduced-transparency
Пользователи вашего веб-сайта могут включить на своих устройствах новую экспериментальную функцию CSS-медиа « prefers-reduced-transparency
чтобы указать, что они предпочитают уменьшать эффекты прозрачности. Вы можете принять во внимание это предпочтение, чтобы повысить доступность вашего веб-сайта. Чтобы помочь вам, на вкладке «Рендеринг» теперь можно эмулировать настройку prefers-reduced-transparency: reduce
, чтобы вы могли создать прототип решения и протестировать, как ваш веб-сайт ведет себя в этом случае.
Чтобы протестировать эту функцию в Chrome, включите функции экспериментальной веб-платформы в chrome://flags
.
Проблема с хромом: 1424879 .
Улучшенный монитор протокола
Chrome DevTools использует протокол Chrome DevTools (CDP) для инструментирования, проверки, отладки и профилирования браузеров Chrome. Если вы являетесь разработчиком Chromium или DevTools, монитор протокола дает вам возможность просматривать все запросы и ответы CDP, сделанные DevTools, и отправлять команды CDP.
Монитор протокола получил новый интерфейс, упрощающий создание и отправку команд CDP. Теперь вам не придется искать команды и их параметры в документации, DevTools предложит их вам.
В правом нижнем углу вкладки «Монитор протокола» нажмите Показать редактор команд CDP , выбрать цель, начать вводить команду, выбрать одну из предложенных, при необходимости указать значения параметров и нажать Отправить команду ( Ctrl/Cmd + Enter ).
Проблема с хромом: 1469345 .
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования 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: второй этап
- Разное
- Обновления рекордера
- Расширения воспроизведения рекордера
- Запись с помощью селекторов пирса
- Экспорт записей в виде сценариев 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 на панели «Сеть»
- «Онлайн» переименован в «Без регулирования».
- Новые параметры копирования на панели «Консоль», «Источники» и «Стили».
- Информация о новых сервисных работниках в представлении сведений о кадре
- Измерьте информацию о памяти в представлении сведений о кадре.
- Предоставьте обратную связь с вкладки «Проблемы»
- Падающие рамки на панели производительности
- Эмулировать складываемой и двойной экран в режиме устройства
- [Экспериментальный] Автоматизируя тестирование браузера с помощью рекордера кукловода
- [Экспериментальный] Редактор шрифтов на панели Styles
- [Экспериментальная] Инструменты отладки CSS Flexbox
- [Экспериментальный] Новая вкладка нарушений CSP
- [Экспериментальный] Новый цветовой контрастный расчет - Алгоритм расширенного восприятия (APCA) (APCA)
- Бывший стартап Devtools
- Новые инструменты визуализации CSS угла
- Подражать неподдерживаемым типам изображений
- Симулировать размер квоты хранения на панели хранения
- Новый веб -полоса Vitals Lane на панели Performance
- Сообщите об ошибках CORS в сетевой панели
- Информация об изоляции кросс-аоригина в просмотре деталей кадры
- Новая информация о веб -работниках в просмотре сведений о кадре
- Дисплей для открытия рамки для открытых Windows
- Открыть сетевую панель с панели работников обслуживания
- Скопировать значение свойства
- Скопировать Stacktrace для сетевого инициатора
- Предварительный просмотр переменного значения WASM на MouseOver
- Оценить переменную WASM в консоли
- Последовательные единицы измерения для размеров файлов/памяти
- Выделите псевдо -элементы на панели Elements
- [Экспериментальная] Инструменты отладки CSS Flexbox
- [Экспериментальная] Настройка аккордов сочетания клавиш
- Новые инструменты отладки сетки CSS
- Новая вкладка WebAuthn
- Перемещать инструменты между верхней и нижней панелью
- Новая компьютерная панель боковой панели на панели Styles
- Группирование свойств CSS в вычисленной панели
- Маяк 6.3 на панели маяка
- События
performance.mark()
в разделе «Время» - Новые фильтры
resource-type
иurl
на сетевой панели - Сведения о кадре Просмотр обновлений
- Унимок
Settings
в меню «Больше инструментов - [Экспериментальный] Просмотр и исправление проблем с цветом на панели обзора CSS
- [Экспериментальный] Настройка сочетания клавиш в Devtools
- Новая медиа -панель
- Скриншоты узел узел с использованием контекстного меню элементов панели
- Задачи обновления вкладок
- Подражать пропавшим местным шрифтам
- Эмулировать неактивных пользователей
- Эмуляция
prefers-reduced-data
- Поддержка новых функций JavaScript
- Маяк 6.2 на панели маяка
- Университет «Другое происхождение» в списке на панели работников обслуживания
- Покажите сводку покрытия для фильтрованных предметов
- Просмотр новых сведений о кадре на панели приложения
- Доступное цветовое предложение на панели стилей
- Восстановите панель свойств на панели Elements
- Чисочитаемые значения заголовка
X-Client-Data
на сетевой панели - Автополженные пользовательские шрифты на панели Styles
- Постоянно отображать тип ресурса на сетевой панели
- Прозрачные кнопки в элементах и сетевых панелях
- Редактирование стиля для фреймворков CSS-In-JS
- Маяк 6 на панели маяка
- Первая значимая покраска (FMP).
- Поддержка новых функций JavaScript
- Новое приложение
- Работник службы
respondWith
событиями на вкладке Timing - Последовательный отображение вычисленной панели
- Bytecode смещения для файлов webassembly
- Линейная копия и вырезанная в панели источников
- Обновления настройки консоли
- Обновления панели Performance
- Новые значки для точек останова, условных точек останова и логмопроцессов
- Исправить проблемы с сайтами с новой вкладкой.
- Просмотреть информацию о доступности в режиме осмотра
- Обновления панели Performance
- Более точная терминология перспективных обещаний в консоли
- Обновления стилей
- Уничтожение панели свойств на панели элементов
- Поддержка ярлыков приложения на панели манифеста
- Эмуляция дефицита зрения
- Эмуляция локаций
- Отладка политики по межоригинам (COEP)
- Новые значки для точек останова, условных точек останова и логмопроцессов
- Посмотреть сетевые запросы, которые устанавливают конкретный файл cookie
- Столка слева от меню командных
- Опция «Настройки» в главном меню переместилась
- Панель аудитов теперь является панелью маяка
- Удалить все локальные переопределения в папке
- Обновленные длинные задачи пользовательский интерфейс
- Поддержка иконы замаскируется на панели Manifest
- Поддержка Moto G4 в режиме устройства
- Обновления, связанные с печеньем
- Более точные значки Manifest Web App
- Нависнуть над свойствами
content
CSS, чтобы увидеть бесчисленные значения - Ошибки карты источника в консоли
- Настройка для отключения прокрутки после окончания файла
- Поддержка ремонта
let
иclass
в консоли - Улучшенная отладка Webassembly
- Запросить сети инициатора на вкладке инициатора
- Выделите выбранный сетевой запрос в обзоре
- URL и столбцы пути на сетевой панели
- Обновленные строки пользователя-агента
- Пользовательский интерфейс конфигурации панели New Audits
- Режимы покрытия кода для для функции или для блока
- Покрытие кода теперь должно быть инициировано перезагрузкой страницы
- Отладка, почему печенье было заблокировано
- Просмотреть значения cookie
- Имитировать разные предпочтения в цвете схема и предпочтения с уменьшением
- Обновления покрытия кода
- Отладка, почему был запрошен сетевой ресурс
- Панели консолей и источников снова уважают предпочтения в отступлении
- Новые ярлыки для навигации курсора
- Поддержка с несколькими клиентами на панели аудитов
- Отладка обработки платежей
- Маяк 5.2 на панели аудитов
- Самая большая довольная краска на панели производительности
- File DevTools выпуска из основного меню
- Копировать стили элементов
- Визуализируйте смены макета
- Маяк 5.1 на панели аудитов
- Синхронизация темы ОС
- Комплект клавиш для открытия редактора точек останова
- Кэш предварительного перефетка на сетевой панели
- Частные свойства при просмотре объектов
- Уведомления и толкание сообщений на панели приложения
- Автозаполнение со значениями CSS
- Новый пользовательский интерфейс для настройки сети
- Сообщения WebSocket в экспорте HAR
- Кнопки импорта и экспорта HAR
- Использование памяти в реальном времени
- Номера регистрации портов обслуживания работников
- Осмотрите фон и фоновые события синхронизации
- Кукловолок для Firefox
- Значимые предустановки при автопроизводстве функций CSS
- Очистить данные сайта из меню команды
- Просмотреть все базы данных IndexedDB
- Посмотреть несжатый
- Встроенные точки останова на панели точек останова
- IndexedDB и Cache Resources
- Настройка для отключения подробной проверки подсказки инструментов
- Настройка для переключения вкладки в редакторе
- Выделите все узлы, затронутые свойством CSS
- Маяк V4 на панели аудитов
- ViebSocket Birance Message Viewer
- Скриншот области захвата в меню командного меню
- Сервисный работник фильтры на сетевой панели
- Обновления панели Performance
- Длинные задачи в записях панели Performance
- Первая краска в секции синхронизации
- Бонусный совет: ярлык для просмотра цветовых кодов RGB и HSL (видео)
- Logpoints
- Подробные подсказки инструментов в режиме проверки
- Данные охвата экспорта кода
- Перейдите по консоли с клавиатурой
- Линия соотношения контрастности 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