Как фильтровать и показывать только применяемые CSS в инструментах разработчика Chrome (например, Firebug в Firefox)

История вопроса. У меня есть страница с несколькими CSS, которые переопределяют друг друга. Есть так много перечеркнутого стиля CSS, поэтому я не хочу их видеть.

Я знаю, что Firebug на Firefox предоставляет эту функцию (только Show Applied CSS), которая может показать, какой стиль CSS используется в CSS файле (аккуратно!).

Как у нас есть эта функция в Chrome? Я попытался установить Firebug Lite для Chrome, но не повезло.

PS: Chrome имеет вкладку "Расчетный стиль", но не показывает, какой стиль принадлежит CSS файлу.

Ответ 1

В инструментах Chrome dev, в правой колонке (где CSS показан на панели "Элементы" ), первый раздел называется "Вычисленный стиль". Если вы отмените выбор "show inherited", вы получите опрятный список стилей, которые действительно применяются к элементу. Помогает ли это?