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

Jecelyn Yeen

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

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

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

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

Проблема с хромом #946975

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

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

Lighthouse 6.0 представляет три новых показателя для отчета: Наибольшая отрисовка контента (LCP), Совокупный сдвиг макета (CLS) и Общее время блокировки (TBT). LCP и CLS — это два новых показателя Core Web Vitals от Google, а TBT — это лабораторный измерительный прокси для другого показателя Core Web Vital, First Input Delay.

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

Проблема с хромом #772558

Устаревание First Meaningful Paint (FMP)

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

Проблема с хромом #1096008

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

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

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

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

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

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

Панель манифеста теперь отображает предупреждения, если:

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

Проблема с хромом #955497

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

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

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

Последовательное отображение вычисляемой панели

Панель Computed на панели Elements теперь отображается последовательно как панель во всех размерах области просмотра. Ранее панель Computed сливалась с панелью Styles, когда ширина области просмотра DevTools была узкой.

Проблема с хромом #1073899

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

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

Проблема с хромом #1071432

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

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

Проблема с хромом #800028

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

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

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

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

Проблема с хромом #1082963

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

Настройки Selected context only в Console Settings теперь сохраняются. Ранее настройки сбрасывались каждый раз, когда вы закрывали и снова открывали DevTools. Это изменение делает поведение настроек соответствующим другим параметрам Console Settings.

Проблема с хромом #1055875

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

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

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

Проблема с хромом #912581

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

Панель производительности раньше показывала время на линейках в зависимости от того, когда началась запись. Теперь это изменилось для записей, где пользователь осуществляет навигацию, где DevTools теперь показывает время линейки относительно навигации.

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

Проблема с хромом #974550

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

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

Проблема с хромом #1041830

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

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

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

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

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

Что нового в DevTools

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