☰

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

tag-icon • tag-icon firefox firefox-extensions firebug
«Показывать только примененные стили» в Firefox Web Developer Tool?

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

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

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

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

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

Fire Fox

решение1

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

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

решение2

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

Для этого вам нужно каким-то образом отредактировать или перезаписать (например, на 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;
}

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

решение3

Если вам нужносохранятьтолько примененные стили, это можно сделать в Chrome с помощью Chrome Developer Tools (учебник здесь). Но если вам нужно решение для Firefox, вы можете сохранить страницу как один файл .html, а затем взять только CSS из этого файла.

Для этого сначала скачайте версию дополнения для Firefox.Отдельный файл

После установки SingleFile вы можете загрузить страницу как файл .html и скопировать CSS внутри <style>тега.

Он будет минифицирован, поэтому вам, вероятно, захочется отменить его минификацию с помощью такого инструмента, какUnminify.com

Люди, которые пытаются это сделать, должны знать, что даже если стиль не являетсяприменяемый, не означает, что он обязательно "не используется". Где-то может быть скрипт, который попытается добавить определенный стиль к элементу, но если он не применен во время захвата, SingleFile (или Chrome Dev Tools) не включит его. Такие оговорки... Но для изоляции определенных фрагментов веб-страниц и захвата их наборов правил этот подход может быть полезен.

Связанный контент