Новинки DevTools (Chrome 103)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

Запись событий двойного клика и клика правой кнопкой мыши во вкладке Recorder

На вкладке Recorder теперь записываются события двойного клика и клика правой кнопкой мыши.

Запись событий двойного клика и клика правой кнопкой мыши во вкладке Recorder

На этой тестовой странице начните запись и выполните следующие действия:

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

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

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

Задачи в трекере Chromium: 1300839, 1322879, 1299701, 1323688

Новые режимы: Анализ временного диапазона и Сводка во вкладке Lighthouse

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

Новые режимы: Анализ временного диапазона и Сводка во вкладке Lighthouse

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

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

Для примера, двайте измерим производительность во время добавления товаров в корзину на этой демо-странице. Выберите режим Анализ временного диапазона (Timespan) и нажмите Запустить анализ временного диапазона (Start timespan). Прокрутите страницу и добавьте несколько товаров в корзину. Когда вы будете готовы, нажмите Остановить анализ временного диапазона (End timespan), чтобы Lighthouse сгенерировал отчёт о действиях пользователя.

Режим Анализ временного диапазона (Timespan)

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

Задача в трекере Chromium: 1291284

Улучшение Performance Insights

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

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

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

Задача в трекере Chromium: 1313382

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

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

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

Задача в трекере Chromium: 1318087

Изменение порядка панелей во вкладке Элементы (Elements)

Теперь вы можете менять порядок панелей во вкладке Элементы (Elements) так, как вам будет удобнее.

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

Изменение порядка панелей во вкладке Элементы (Elements)

Задача в трекере Chromium: 1146146

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

DevTools теперь поддерживают возможность выбрать цвет за пределами браузера. До этого вы могли выбирать цвет только в пределах окна браузера.

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

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

Задача в трекере Chromium: 1245191

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

Отладчик теперь корректно показывает предварительное значение в строке.

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

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

Задача в трекере Chromium: 1316340

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

Во вкладке WebAuthn теперь есть чекбокс Поддержка больших объектов BLOB (Supports large blob) для виртуальных аутентификаторов.

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

Задача в трекере Chromium: 1321803

Новые сочетания клавиш во вкладке Источники (Sources)

Два новых сочетания клавиш во вкладке Источники (Sources):

  • Открыть или закрыть боковую панель навигация (navigation) (слева) при помощи Control / Command + Shift + Y
  • Открыть или закрыть боковую панель отладчик (debugger) (справа) при помощи Control / Command + Shift + H
Новые сочетания клавиш во вкладке Источники (Sources)

Задачи в трекере Chromium: 1226363

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

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

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

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

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

Задачи в трекере Chromium: 1319828, 1318635, 1305475

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.