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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

Для установки демонстрационного расширения выполните действия , описанные в документации.

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

В панели «Источники» сгруппируйте файлы по дате создания/развертывания.

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

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

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

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

Проблема Chromium: 960909

Отслеживание времени работы новых пользователей отображается на панели «Аналитика производительности».

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

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

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

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

Отобразить назначенный слот элемента

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

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

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

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

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

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

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

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

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

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

Проблема Chromium: 1285091

Найдите блокирующие кадры в панели кэша "Назад/Вперед".

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

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

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

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

1. Собственные перечислимые свойства
2. Владение неперечислимыми объектами недвижимости.
3. Наследуемые перечислимые свойства
4. Наследуемые неперечислимые свойства

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

Номер выпуска Chromium: 1299241

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

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

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

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

Что нового в инструментах разработчика

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