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

Редактирование стилей для CSS-in-JS фреймворков

Теперь панель «Стили» лучше поддерживает редактирование стилей, созданных с помощью API объектной модели CSS (CSSOM). Многие фреймворки и библиотеки CSS-in-JS используют API CSSOM для построения стилей.

Теперь вы также можете редактировать стили, добавленные в JavaScript, используя конструкторские таблицы стилей . Конструкторские таблицы стилей — это новый способ создания и распространения многократно используемых стилей при использовании Shadow DOM .

Например, стили заголовка h1 , добавленные с помощью CSSStyleSheet (API CSSOM), ранее были недоступны для редактирования. Теперь их можно редактировать на панели «Стили»:

Выпуск Chromium № 946975

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

В панели Lighthouse теперь используется Lighthouse 6. Ознакомьтесь с разделом «Что нового в Lighthouse 6.0» для получения краткого обзора всех основных изменений или с примечаниями к выпуску v6.0.0 для полного списка всех изменений.

В Lighthouse 6.0 добавлены три новых показателя в отчет: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Total Blocking Time (TBT). LCP и CLS — это два новых ключевых показателя веб-технологий Google, а TBT — это лабораторный показатель, измеряемый в качестве косвенного значения другого ключевого показателя веб-технологий, First Input Delay (задержка первого ввода).

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

Новые показатели производительности в Lighthouse 6.0

Выпуск Chromium № 772558

Первая значимая амортизация краски (FMP)

Функция First Meaningful Paint (FMP) устарела в Lighthouse 6.0. Она также была удалена из панели «Производительность». Рекомендуемой заменой для FMP является функция Largest Contentful Paint . См. раздел «First Meaningful Paint» для объяснения причин её устаревания.

Chromium issue #1096008

Поддержка новых функций JavaScript

В инструментах разработчика теперь улучшена поддержка некоторых новейших функций языка JavaScript:

  • Автозавершение с использованием необязательного синтаксиса цепочки вызовов — автозавершение свойств в консоли теперь поддерживает необязательный синтаксис цепочки вызовов, например, name?. теперь работает в дополнение к name. и name[ .
  • Syntax highlighting for private fields - private class fields are now properly syntax-highlighted and pretty-printed in the Sources panel.
  • Подсветка синтаксиса для оператора объединения с нулевым значением — теперь в инструментах разработчика оператор объединения с нулевым значением корректно отображается в панели «Источники».

Проблемы Chromium #1083214 , #1073903 , #1083797

В панели «Манифест» появились предупреждения о новых ярлыках приложений.

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

В панели «Манифест» теперь отображаются предупреждения, если:

  • Значки ярлыков приложений меньше, чем 96x96 пикселей.
  • Значки ярлыков приложений и значки манифеста не квадратные (поскольку они будут игнорироваться).

Предупреждения о ярлыках приложений

Выпуск Chromium № 955497

События Service Worker respondWith отображаются на вкладке «Время».

Вкладка «Время» панели «Сеть» теперь включает события respondWith обработчика сервис-воркера. respondWith — это время непосредственно перед запуском обработчика события fetch и до момента завершения выполнения промиса respondWith обработчика fetch .

сервисный работник `respondWith`

Выпуск Chromium № 1066579

Единообразное отображение панели «Вычисления»

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

Выпуск Chromium № 1073899

Смещения байт-кода для файлов WebAssembly

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

Смещения байт-кода

Выпуск Chromium № 1071432

Построчное копирование и вырезание в панели «Источники».

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

Выпуск Chromium № 800028

Обновления настроек консоли

Разгруппировать одинаковые сообщения консоли

The Group similar toggle in Console Settings now applies to duplicate messages. Previously it just applied to similar messages.

Например, ранее инструменты разработчика не разгруппировали сообщения hello , даже если флажок "Группировать похожие" был снят. Теперь сообщения hello разгруппированы:

Выпуск Chromium № 1082963

Сохранение настроек, доступных только в выбранном контексте.

Настройки «Выбранный контекст» в параметрах консоли теперь сохраняются. Ранее эти настройки сбрасывались каждый раз при закрытии и повторном открытии инструментов разработчика. Это изменение обеспечивает согласованность поведения настроек с другими параметрами настроек консоли.

Только для избранного контекста

Выпуск Chromium № 1055875

Обновления панели производительности

Информация о кэше компиляции JavaScript в панели «Производительность».

Информация о кэше компиляции JavaScript теперь всегда отображается на вкладке «Сводка» панели «Производительность». Ранее инструменты разработчика не отображали ничего, связанного с кэшированием кода, если кэширование кода не выполнялось.

Информация о кэше компиляции JavaScript

Chromium issue #912581

В панели «Производительность» время на линейках отображалось в зависимости от начала записи. Теперь это изменилось для записей, в которых пользователь перемещается по экрану: в инструментах разработчика время на линейках отображается относительно момента навигации.

Выравнивание времени навигации в панели «Производительность»

Мы также обновили время для событий DOMContentLoaded , First Paint, First Contentful Paint и Largest Contentful Paint, чтобы оно соответствовало времени, сообщаемому PerformanceObserver .

Выпуск Chromium № 974550

Новые значки для точек останова, условных точек останова и точек логирования.

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

Точки останова

Выпуск Chromium № 1041830

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

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

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

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

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

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