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

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

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

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

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

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

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

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

Проблемы с хромом: 1300839 , 1322879 , 1299701 , 1323688.

Новый временной интервал и режим снимков на панели «Маяк».

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

Новый временной интервал и режим снимков на панели «Маяк».

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

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

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

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

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

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

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

Улучшено управление масштабированием на панели Performance Insights.

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

См. раздел Performance Insights , чтобы узнать, как получить полезную информацию и улучшить производительность вашего веб-сайта с помощью панели.

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

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

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

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

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

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

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

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

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

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

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

DevTools теперь поддерживает выбор цвета вне браузера. Раньше вы могли выбрать цвет только в браузере.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Отладка с помощью примера Codepen
  • Определение источника проблем с производительностью в примере Codepen
  • Отсутствует вкладка «Компонент» , когда включен React DevTools

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

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

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

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

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

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

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

Что нового в DevTools

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

,

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

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

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

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

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

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

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

Проблемы с хромом: 1300839 , 1322879 , 1299701 , 1323688.

Новый временной интервал и режим снимков на панели «Маяк».

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

Новый временной интервал и режим снимков на панели «Маяк».

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

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

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

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

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

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

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

Улучшено управление масштабированием на панели Performance Insights.

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

См. раздел Performance Insights , чтобы узнать, как получить полезную информацию и улучшить производительность вашего веб-сайта с помощью панели.

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

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

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

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

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

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

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

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

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

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

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

DevTools теперь поддерживает выбор цвета вне браузера. Раньше вы могли выбрать цвет только в браузере.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Отладка с помощью примера Codepen
  • Определение источника проблем с производительностью в примере Codepen
  • Отсутствует вкладка «Компонент» , когда включен React DevTools

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

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

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

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

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

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

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

Что нового в DevTools

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