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

355
asprin

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

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

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

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

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

Fire Fox

4
Как насчет вкладки Computed? Hex 7 лет назад 0
Это перечисляет все правила для элемента. Я бы предпочел видеть его на основе правил, определенных в таблице стилей. asprin 7 лет назад 0

2 ответа на вопрос

2
Hex

Такой опции не существует. Однако вы можете использовать вкладку 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; }

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

2
Sebastian Zartner

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

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

Похожие вопросы