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

Published on Updated on

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

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

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

Chrome 100

А вот и сотая версия Chrome! И Chrome DevTools продолжает предоставлять надежные инструменты для веб-разработки. Найдите пару минут, чтобы просмотреть вкладку Что нового и отметить успехи.

Как всегда, вы можете просмотреть новое видео What’s New in DevTools, кликнув на картинку.

Просмотр и изменение директивы @supports в панели Стилей (Styles)

Теперь вы можете просматривать и изменять CSS-директиву @supports в панели Стили (Styles). Это облегчит экспериментирование с директивами в режиме реального времени.

Откройте страницу с демо, проинспектируйте элемент <div class=”box”>, найдите директиву @supports в панели Стили (Styles). Кликните на объявление правила, чтобы изменить его.

Просмотр и изменение директив @supports

Задачи в трекере Chromium: 1222574, 1222573

Улучшения вкладки Recorder

Дефолтная поддержка распространённых селекторов

При определении уникальных селекторов во время записи на вкладке Recorder предпочтение теперь отдаётся элементам со следующими атрибутами:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

Атрибуты, приведённые выше, часто используются в автоматическом тестировании.

Например, начните новую запись на этой демо-странице. Введите адрес электронной почты и обратите внимание на значение селектора.

Поскольку у поля ввода имейла есть атрибут data-testid, он автоматически используется в качестве селектора вместо атрибутов id или class.

Поддержка распространённых дефолтных селекторов

Кастомизация селектора записи

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

Например, на этой демо-странице используется атрибут data-automate в качестве селектора. Начните новую запись и введите data-automate как атрибут селектора. Введите адрес электронной почты и обратите внимание на значение селектора ([data-automate=email-address]).

Кастомизация селектора записи Результат выбора кастомного селектора

Переименование записи

Теперь вы можете переименовать запись на вкладке Recorder, нажав на кнопку редактирования (иконка карандаша) рядом с названием записи.

Переименование записи

Предпросмотр свойств класса/функции при наведении курсора

Теперь во время отладки вы можете навести курсор во вкладке Источники (Sources) на класс или функцию, чтобы посмотреть их свойства. Раньше показывалось только имя функции и ссылка на её расположение в исходном коде.

Предпросмотр свойств класса/функции по наведению курсора

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

Частично представленные фреймы во вкладке Производительность (Performance)

На записи производительности на временной шкале Фреймы (Frames) теперь отображается новая категория фреймов – «Частичный показ фрейма».

Раньше на временной шкале Фреймы (Frames) любые фреймы с отложенной работой по основному потоку отображались как «отмененные фреймы». Однако есть случаи, когда некоторые фреймы могут продолжать производить визуальные обновления (например, при скролле), управляемые потоком компоновки.

Это может запутать разработчика, поскольку скриншоты таких «отмененных фреймов» по прежнему отображают визуальные изменения.

Новый тип «Частичный показ фрейма» нужен, чтобы показать более интуитивно, что хотя некоторое содержимое не представлено во фрейме своевременно, проблема не настолько серьезна, чтобы полностью блокировать визуальные обновления.

Частичный показ фрейма во вкладке Производительность (Performance)

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

Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

  • Обновили строки юзер агента для режима эмуляции. Все iPhone версии 5 и выше теперь показывают строку iPhone OS 13_2_3 в качестве юзер агента. (1289553)
  • Теперь вы можете сохранить сниппет как JavaScript файл. Раньше нужно было вручную добавлять файлу расширение .js. (1137218)
  • На вкладке Источники (Sources) теперь корректно отображаются имена переменных области видимости при отладке с картой источников. Ранее на панели Источники (Sources) отображались минифицированные имена переменных области видимости, несмотря на предоставленную карту источников. (1294682)
  • Вкладка Источники (Sources) теперь корректно восстанавливает положение прокрутки при загрузке страницы. Ранее положение восстанавливалось некорректно, что вызывало неудобства при отладке. (1294422)

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

Рассмотрите возможность использования 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 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.