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

Джеселин Йен

Хром 100

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

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

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

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

Просмотр и редактирование @supports в правилах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

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

Что нового в DevTools

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