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

Джеселин Йин

Записывайте события двойного щелчка и щелчка правой кнопкой мыши на панели «Рекордер».

Теперь панель «Рекордер» может записывать события двойного щелчка и щелчка правой кнопкой мыши.

Записывайте события двойного щелчка и щелчка правой кнопкой мыши на панели «Рекордер».

В этом примере начните запись и попробуйте выполнить следующие шаги:

  • Дважды щелкните по карточке, чтобы увеличить её.
  • Щелкните правой кнопкой мыши по карточке и выберите действие в контекстном меню.

Чтобы понять, как программа Recorder зафиксировала эти события, разверните следующие шаги:

  • Двойной щелчок отображается как type: doubleClick .
  • Событие щелчка правой кнопкой мыши регистрируется как type: click , но свойство button устанавливается в secondary . Значение button для обычного щелчка мыши — primary .

Проблемы Chromium: 1300839 , 1322879 , 1299701 , 1323688

В панели Lighthouse появились новый временной интервал и режим моментального снимка.

Теперь вы можете использовать Lighthouse для измерения производительности вашего веб-сайта не только при загрузке страницы.

В панели Lighthouse появились новый временной интервал и режим моментального снимка.

Панель Lighthouse теперь поддерживает 3 режима измерения потока пользователей:

  • Отчеты о навигации анализируют загрузку одной страницы. Навигация — наиболее распространенный тип отчетов. Все отчеты Lighthouse до текущей версии были отчетами о навигации.
  • В отчетах по временным интервалам анализируется произвольный период времени, как правило, включающий взаимодействия пользователей.
  • В отчетах, основанных на моментальных снимках , анализируется страница в определенном состоянии, как правило, после взаимодействия пользователя с ней.

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

Режим временного интервала

Ознакомьтесь с пользовательскими сценариями в Lighthouse, чтобы узнать об уникальных сценариях использования, преимуществах и ограничениях каждого режима.

Выпуск Chromium: 1291284

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

Улучшено управление масштабированием на панели «Аналитика производительности».

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

Ознакомьтесь с разделом «Аналитика производительности» , чтобы узнать, как получить полезные рекомендации и улучшить производительность вашего веб-сайта с помощью этой панели.

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

Подтвердите удаление записи выступления.

В инструментах разработчика теперь перед удалением записи производительности отображается диалоговое окно подтверждения.

Подтвердите удаление записи выступления.

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

Изменяйте порядок панелей на панели «Элементы».

Теперь вы можете изменять порядок панелей в панели «Элементы» в соответствии со своими предпочтениями.

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

Изменяйте порядок панелей на панели «Элементы».

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

Выбор цвета вне браузера

В инструментах разработчика теперь можно выбирать цвет вне браузера. Ранее выбор цвета был возможен только внутри браузера.

В панели «Стили» щелкните по любому предварительному просмотру цвета, чтобы открыть палитру цветов. Используйте пипетку, чтобы выбрать цвет из любого места.

Выбор цвета вне браузера

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

Улучшен предварительный просмотр значений в режиме отладки.

Теперь отладчик корректно отображает предварительный просмотр встроенных значений.

В этом примере функция double имеет входной параметр a и переменную x . Установите точку останова на строке return и запустите код. Встроенный предварительный просмотр корректно отображает значения a и x . Ранее отладчик не отображал значение x во встроенном предварительном просмотре.

Улучшен предварительный просмотр значений в режиме отладки.

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

Поддержка больших блоков данных для виртуальных аутентификаторов

На вкладке WebAuthn теперь появился новый флажок «Поддерживает большие двоичные объекты» для виртуальных аутентификаторов.

Этот флажок по умолчанию отключен. Вы можете включить его только для аутентификаторов, использующих протокол ctap2 и поддерживающих резидентные ключи.

Поддержка больших блоков данных для виртуальных аутентификаторов

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

Новые сочетания клавиш на панели «Источники».

В панели «Источники» теперь доступны две новые комбинации клавиш:

  • Переключить боковую панель навигации (слева) можно с помощью комбинации клавиш Control / Command + Shift + Y.
  • Переключить боковую панель отладчика (справа) можно с помощью комбинации клавиш Control / Command + Shift + H.

Новые сочетания клавиш для панели «Источники».

Проблемы с Chromium: 1226363

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

Ранее разработчики сталкивались со случайными сбоями во время:

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

  • Правильное сопоставление местоположения и смещения для встроенных скриптов и местоположения источника.
  • Используйте резервную информацию для указания местоположения текста в фрейме.
  • Корректное разрешение относительных URL-адресов с помощью URL-адреса фрейма.

Проблемы с Chromium: 1319828 , 1318635 , 1305475

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

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

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

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

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

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