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

Джеселин Йен

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

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

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

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

Проблема с хромом № 946975.

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

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

В Lighthouse 6.0 в отчет добавлены три новых показателя: наибольшая отрисовка контента (LCP), совокупный сдвиг макета (CLS) и общее время блокировки (TBT). LCP и CLS — это два новых основных веб-показателя Google, а TBT — прокси-сервер лабораторных измерений для другого основного веб-показателя — первой задержки ввода.

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

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

Проблема с хромом №772558.

Прекращение поддержки First Meaningful Paint (FMP)

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

Проблема с хромом № 1096008.

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

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

  • Необязательное автодополнение синтаксиса цепочки — автозаполнение свойств в консоли теперь поддерживает дополнительный синтаксис цепочки, например name?. теперь работает помимо name. и name[ .
  • Подсветка синтаксиса для частных полей — поля частных классов теперь правильно выделяются синтаксисом и красиво печатаются на панели «Источники».
  • Подсветка синтаксиса для нулевого оператора объединения — DevTools теперь правильно печатает нулевой оператор объединения на панели «Источники».

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

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

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

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

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

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

Проблема с хромом №955497.

Работник службы respondWith на события на вкладке «Время».

На вкладке «Время» панели «Сеть» теперь отображаются события respondWith работника службы. respondWith — это время непосредственно перед запуском обработчика событий fetch сервисного работника до момента, когда будет выполнено обещание respondWith с обработчиком fetch .

работник службы `responseWith`

Проблема с хромом № 1066579

Согласованное отображение панели «Вычисления»

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

Проблема с хромом № 1073899.

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

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

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

Проблема с хромом № 1071432.

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

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

Проблема с хромом № 800028.

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

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

Переключатель «Группировать похожие» в настройках консоли теперь применяется к повторяющимся сообщениям. Раньше это применялось только к похожим сообщениям.

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

Проблема с хромом № 1082963.

Сохранение настроек только для выбранного контекста

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

Только выбранный контекст

Проблема с хромом № 1055875.

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

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

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

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

Проблема с хромом № 912581.

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

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

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

Проблема с хромом № 974550.

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

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

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

Проблема с хромом № 1041830.

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

Список всего, что было описано в серии «Что нового в DevTools» .