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

Джеселин Йин

Хром 100

Поздравляем с 100-й версией Chrome! Chrome DevTools продолжит предоставлять надежные инструменты для разработчиков, создающих веб-приложения. Загляните во вкладку «Что нового», чтобы отметить эти важные события.

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

Просматривайте и редактируйте правила @supports в панели «Стили».

Теперь вы можете просматривать и редактировать правила @supports в панели «Стили» . Эти изменения упрощают экспериментирование с правилами @supports в режиме реального времени. Откройте эту демонстрационную страницу , просмотрите элемент <div class=”box”> , просмотрите правила @supports в панели «Стили» . Щелкните по объявлению правила, чтобы отредактировать его.

Просматривайте и редактируйте правила @supports в разделе «Правила».

Проблемы Chromium: 1222574 , 1222573

Улучшения панели управления регистратором.

Поддержка распространенных селекторов по умолчанию.

При определении уникального селектора во время записи панель «Рекордер» теперь автоматически отдает предпочтение элементам со следующими атрибутами:

  • data-testid
  • тест данных
  • данные-qa
  • дата-ци
  • data-test-id
  • data-qa-id
  • тестирование данных

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

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

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

Поддержка распространенных селекторов по умолчанию.

Настройте селектор записи

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

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

Настройте селектор записи

Результат выбора пользовательского селектора

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

Теперь вы можете переименовывать записи на панели «Запись» с помощью кнопки редактирования (значок карандаша) рядом с названием записи.

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

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

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

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

Номер выпуска Chromium: 1049947

Частично отображаемые кадры на панели «Производительность»

В записи выступления на временной шкале кадров теперь отображается новая категория кадров: «Частично представленные кадры».

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

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

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

Частично отображаемые кадры на панели «Производительность»

Проблема с Chromium: 1261130

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

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

Что нового в инструментах разработчика

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