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

Jecelyn Yeen

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

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

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

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

Проблема с Chromium № 946975

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

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

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

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

Проблема с Chromium №772558

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

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

Проблема с Chromium № 1096008

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

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

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

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

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

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

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

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

Проблема с Chromium № 955497

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

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

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

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

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

Проблема с Chromium № 1073899

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

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

Проблема с Chromium № 1071432

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

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

Проблема с Chromium № 800028

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

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

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

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

Проблема с Chromium № 1082963

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

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

Проблема с Chromium № 1055875

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

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

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

Проблема с Chromium № 912581

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

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

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

Проблема с Chromium № 974550

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

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

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

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

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

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

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

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

Что нового в DevTools

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