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

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59