Что нового в 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» .

,

Хром 100

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

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

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

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

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

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

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

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

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

  • ДАННЫЕ ТЕСТИД
  • Данные-тест
  • Data-qa
  • Data-Cy
  • Data-test-ID
  • Data-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» .