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

Jecelyn Yeen

Перезапустить фрейм во время отладки

Функция Restart frame вернулась! Вы можете повторно запустить предыдущий код, если он был остановлен где-то в функции. Ранее эта функция была устарела и удалена в Chrome 92 из-за проблем со стабильностью.

В этом примере отладчик изначально остановился на точке останова (строка 343) около конца функции toggleColorScheme . Чтобы перезапустить отладку с начала функции toggleColorScheme , разверните раздел Стек вызовов на панели Отладчик , щелкните правой кнопкой мыши toggleColorScheme и выберите Перезапустить кадр .

Проблема с хромом: 1303521

Параметры медленного воспроизведения на панели «Рекордер»

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

Откройте панель Recorder и начните новую запись . После завершения записи нажмите раскрывающуюся кнопку Replay . Выберите скорость, чтобы начать воспроизведение.

Проблема с хромом: 1306756

Создайте расширение для панели Recorder

Теперь вы можете создать или установить расширение Chrome для экспорта сценариев воспроизведения в вашем любимом формате. См. документацию API расширения Recorder, чтобы узнать, как создать его.

Чтобы установить демонстрационное расширение, выполните следующие действия, описанные в документации.

Проблема с хромом: 1325751

Группировка файлов по авторству/развертыванию на панели «Источники»

Включите новую опцию Group files by Authored / Deployed , чтобы организовать файлы на панели Sources. При разработке веб-приложений с использованием фреймворков (например, React, Angular) может быть сложно ориентироваться в исходных файлах из-за минимизированных файлов, созданных инструментами сборки (например, Webpack, Vite).

С помощью этого флажка вы можете сгруппировать файлы по 2 категориям для более быстрого поиска:

• Автор . Аналогично исходным файлам, которые вы просматриваете в своей IDE. DevTools генерирует эти файлы на основе исходных карт (предоставленных вашими инструментами сборки).
• Развернутые . Фактические файлы, которые считывает браузер. Обычно эти файлы минифицированы.

Попробуйте сами с помощью этой демоверсии React !

Проблема с хромом: 960909

Новый трек времени пользователя на панели аналитики производительности

Визуализируйте отметки performance.measure() в своей записи с помощью новой дорожки пользовательских временных показателей на панели аналитики производительности .

Например, эта веб-страница использует метод performance.measure() для расчета времени, прошедшего с момента загрузки текста.

Когда вы начинаете измерять загрузку страницы , трек User Timings отображается в записи. Щелкните элемент timestamps, чтобы просмотреть его детали на боковой панели.

Проблема с хромом: 1322808

Показать назначенный слот элемента

Элементы слотов на панели элементов имеют новый значок slot . При отладке проблем с макетом используйте эту функцию, чтобы быстрее определить элемент, который влияет на макет узла.

В этом примере содержатся карты с несколькими именованными слотами. Проверьте слот person-occupation карты, щелкните значок slot рядом с ним, чтобы открыть назначенный ему слот.

Узнайте , как использовать элементы <template> и <slot> для создания гибкого шаблона, который затем можно использовать для заполнения теневого DOM веб-компонента.

Проблема с хромом: 1018906

Моделирование аппаратного параллелизма для записи производительности

Новый параметр «Аппаратный параллелизм» на панели «Производительность» позволяет разработчикам настраивать значение, сообщаемое navigator.hardwareConcurrency .

Некоторые приложения используют navigator.hardwareConcurrency для управления степенью параллелизма своего приложения, например, для управления размером пула потоков Emscripten. С помощью этой функции разработчики могут тестировать производительность своих приложений с различным количеством ядер.

Проблема с хромом: 1297439

Предварительный просмотр нецветового значения при автозаполнении переменных CSS

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

Проблема с хромом: 1285091

Определите блокирующие кадры на панели кэша «Назад/вперед»

На панели «Кэш назад/вперед» на панели «Приложение» появился новый раздел «Фреймы» , который поможет вам определить блокирующие фреймы, которые могут препятствовать доступу страницы к bfcache.

Проблема с хромом: 1288158

Улучшенные предложения автозаполнения для объектов JavaScript

Автодополнение для свойств объекта JavaScript теперь отображается в следующем порядке:

1. Собственные перечислимые свойства
2. Собственные неперечислимые свойства
3. Унаследованные перечислимые свойства
4. Унаследованные неперечислимые свойства

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

Проблема с хромом: 1299241

Улучшения исходных карт

Вот несколько исправлений в исходных картах для улучшения общего процесса отладки:

• Точки останова теперь работают во встроенном <script> с аннотациями sourceURL.
• Отладчик теперь разрешает переменные области действия блока в представлении «Область действия» с помощью исходных карт.
• Отладчик теперь разрешает переменные в стрелочных функциях в представлении «Область действия» с помощью исходных карт.

Проблемы с Chromium: 1329113 , 1322115

Разные моменты

Вот некоторые важные исправления в этом выпуске:

• Исправлена ​​настройка автозаполнения для панели «Источники» . Раньше автозаполнение всегда было включено, даже если настройка отключена. ( 1323286 )
• Обновлена ​​вкладка «Манифест» на панели «Приложение» для анализа последнего формата цветовой схемы. ( 1318305 )
• Улучшены предложения по проблемам блокировки рендеринга <script async> на панели Performance insights . Ранее DevTools предлагал add async attribute to the script tag даже если скрипт уже отмечен как async. ( 1334096 )
• Панель Performance insights теперь определяет iframes как потенциальные причины сдвигов макета. Вы можете просмотреть сведения об iframe на панели Details . ( 1328873 )
• При открытии файла в меню «Команда» созданные файлы (файлы, созданные исходными картами) теперь ранжируются выше, поэтому они отображаются над развернутыми скриптами с аналогичными именами. ( 1312929 )

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

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

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

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

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

Что нового в DevTools

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