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

Jecelyn Yeen

Хром 100

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

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

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

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

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

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

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

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

• данные-тестид
• тест данных
• данные-QA
• данные-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.

• Отправьте нам предложение или отзыв через crbug.com .
• Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .

Что нового в DevTools

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