"Показывать только примененные стили" в Firefox Web Developer Tool?

Question

Я был пользователем Firebug в течение долгого времени. Мой Firefox совсем недавно обновился до 51, и вскоре у меня начались проблемы с Firebug.

Посетив страницу Firebug, я обнаружил, что она больше не разрабатывается, что стало для меня шоком.

Теперь, чтобы двигаться дальше, я решил использовать Web Developer Tool (WDT), который встроен в Firefox. Но, похоже, в нем чего-то не хватает.

В инспекторе Firebug, когда я выбираю элемент на странице, используется опция "Показать только примененные стили" или что-то подобное. Кажется, этого нет в WDT, и ужасно видеть все перечеркнутые стили CSS на панели.

Есть ли способ использовать эту функцию в WDT?

Answer 1

Такой опции не существует. Однако вы можете использовать вкладку Computed для отображения только примененных стилей.

Для этого вам нужно как-то отредактировать или перезаписать (например, чтобы display: none) стили Firefox Developer Tools по умолчанию:

В файле /devtools/client/themes/rules.css есть (строка 423):

.ruleview-overridden {
  text-decoration: line-through;
}

строка 268:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

Эта статья также может быть полезной.

Answer 2

Firefox DevTools не предлагает эту функцию в настоящее время (начиная с Firefox 51.0.1). Поэтому я создал отчет об ошибке с просьбой об этом.

Кроме того, я добавил примечание к руководству по миграции пользователей Firebug.