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

Джеселин Йен

Хром 100

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

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

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

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

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

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

Улучшения панели рекордера

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

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

  • данные-тестид
  • тест данных
  • данные-ка
  • данные-cy
  • идентификатор теста данных
  • данные-qa-id
  • тестирование данных

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

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

Поскольку для элемента электронной почты определен 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» .