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

Jecelyn Yeen

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

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

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

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

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

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

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

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

Создайте расширение для панели «Регистратор»

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

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

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

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

Включите новую опцию «Группировать файлы по авторству/развёртыванию» , чтобы упорядочить файлы на панели «Источники». При разработке веб-приложений с использованием фреймворков (например, React, Angular) навигация по исходным файлам может быть затруднена из-за минифицированных файлов, создаваемых инструментами сборки (например, Webpack, Vite).

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

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

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

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

Отслеживание нового времени пользователя на панели «Аналитика производительности»

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

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

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

Проблема с хромом: 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> на панели « Интеллектуальная аналитика» . Ранее DevTools предлагал add async attribute to the script tag даже если скрипт уже отмечен как асинхронный. ( 1334096 )
• Панель «Аналитика производительности» теперь определяет элементы iframe как потенциальную причину смещения макета. Подробную информацию об элементах iframe можно просмотреть на панели «Подробности» . ( 1328873 )
• При открытии файла в меню «Команда» созданные файлы (файлы, созданные исходными картами) теперь ранжируются выше, поэтому они отображаются над развернутыми скриптами с аналогичными именами. ( 1312929 )

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

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

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

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

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

Что нового в DevTools

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