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

Джеселин Йен

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

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

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

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

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

Панель 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» .