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

Jecelyn Yeen

Хром 100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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