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

Jecelyn Yeen

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

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

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

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

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

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

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

Новый временной диапазон и режим моментального снимка на панели Lighthouse

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

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

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

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

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

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

Обновления Performance Insights

Улучшенный контроль масштабирования на панели Performance Insights

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

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

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

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

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

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

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

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

Например, когда вы открываете DevTools на узком экране, панель Accessibility скрыта под кнопкой Show more . Если вы часто отлаживаете проблемы доступности, теперь вы можете перетащить панель на передний план для более легкого доступа.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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