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

Джеселин Йен

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

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

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

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

Автоматическое определение XPath и селекторов текста на панели Recorder

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

XPath и селекторы текста на панели Recorder.

Проблемы с Chromium: 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» .