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

Джеселин Йен

Подсказки для неактивных свойств CSS

DevTools теперь определяет стили CSS, которые действительны, но не имеют видимого эффекта. На панели «Стили» DevTools затемняет неактивные свойства. Наведите курсор на значок рядом с ним, чтобы понять, почему правило не имеет видимого эффекта.

Подсказки для неактивных свойств CSS.

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

Автоматическое обнаружение XPath и текстовых селекторов на панели «Рекордер»

Панель «Рекордер» теперь поддерживает XPath и средства выбора текста. Начните запись пользовательского потока , и средство записи автоматически выберет XPath и кратчайший уникальный текст элемента в качестве селектора, если он доступен.

XPath и селекторы текста на панели «Рекордер».

Проблемы с хромом: 1327206 , 1327209.

Пошаговое рассмотрение выражений, разделенных запятыми

Теперь во время отладки можно выполнять пошаговые выражения, разделенные запятыми. Это улучшает отладку минимизированного кода.

Пройдите через выражения, разделенные запятыми.

Ранее DevTools поддерживал только пошаговое выполнение выражений, разделенных точкой с запятой.

Учитывая приведенный ниже код,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Транспиляторы и минификаторы могут превращать их в выражения, разделенные запятыми.

function bar(){return foo(),foo(),42}

Это создает путаницу во время отладки, поскольку пошаговое поведение в минифицированном и авторском коде различно. Это еще более запутанно при использовании исходных карт для отладки минимизированного кода с точки зрения исходного кода, поскольку разработчик затем смотрит на точки с запятой (которые были скрыто преобразованы в запятые с помощью цепочки инструментов), но отладчик не останавливается на них.

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

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

Откройте «Настройки» > «Список игнорирования» . DevTools улучшает дизайн, помогая настроить правила игнорирования отдельного сценария или шаблона сценариев .

Вкладка «Список игнорирования».

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

Разное

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

  • Автозаполнение имени свойства CSS на панели «Стили» при нажатии пробела. ( 1343316 )
  • Удалите автоматическую прокрутку в навигационной цепочке панели «Элемент» . ( 1369734 )

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

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

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

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

Что нового в DevTools

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