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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом: 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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