Новинки DevTools (Chrome 108)

Published on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

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

DevTools теперь идентифицирует стили CSS, которые допустимы, но не имеют видимого эффекта. В панели Стили (Styles) неактивные свойства отображаются более бледным цветом. Наведите курсор на иконку рядом с неактивным свойством, чтобы понять, почему свойство не имеет видимого эффекта.

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

Задача в трекере Chromium: 1178508

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

Во вкладке Recorder теперь поддерживаются XPath и текстовые селекторы. Начните запись пользовательского сценария, и рекордер автоматически выберет XPath и кратчайший уникальный текст элемента в качестве селектора, если он доступен.

XPath и текстовые селекторы во вкладке Recorder.

Задачи в трекере Chromium: 1327206,[1327209] (https://crbug.com/1327209)

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

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

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

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

Возьмём код ниже:

function foo() {}

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

Транспайлеры и минификаторы могут преобразовать его в выражения, разделённые запятыми:

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

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

Задача в трекере Chromium: 1370200

Улучшенные настройки Списка игнорируемых фреймворков

Откройте Настройки (Settings) > Список игнорируемых фреймворков (Ignore List). В DevTools улучшен дизайн, чтобы помочь вам настроить правила игнорирования отдельных скриптов или групп скриптов по шаблону.

Вкладка Список игнорируемых фреймворков.

Задача в трекере Chromium: 1356517

Другие важные моменты

Вот ещё несколько заслуживающих внимания исправлений в этом выпуске:

  • Автоматическое завершение имени свойства CSS на панели Стили (Styles) по нажатию пробела. (1343316)
  • Отключена автоматическая прокрутка в навигационной цепочке вкладки Элементы (Element). (1369734)

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.