Что нового в 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() в своей записи с помощью новой дорожки User Timings на панели Performance Insights .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 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» .

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() в своей записи с помощью новой дорожки User Timings на панели Performance Insights .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 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» .