Инструменты разработчика Chrome - есть ли способ узнать, какой CSS используется текущей страницей?

Question

Используя Google Chrome Developer Tools, я иногда запускаю аудит для своего кода, чтобы увидеть, как он собирается.Одно из предложений, которые всегда делают эти инструменты, - «Удалены неиспользуемые правила CSS».Нажатие на стрелку затем показывает обычно огромный список правил CSS, которые не используются текущей страницей.

Есть ли способ увидеть список того, какие правила CSS используются текущей страницей?

Answer 1

Я знаю, что это может быть немного поздно, но в случае, если кто-то еще наткнется на это, как я, и также любопытно, я нашел дополнение Dust-Me Selectors для firefox , которое расскажет вам обоим использованными неиспользуемые селекторы на странице для каждой используемой таблицы стилей.

Надеюсь, это поможет

Answer 2

Инструменты разработчика с открытым исходным кодом, поэтому вы можете создать патч.
http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html

snipp

//=== modified file 'AuditRules.js'
if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
{
    usedCss += "\n" + rule.selectorText + " {" + rule.style.cssText + "}\n";
    continue;
}
//...
// Save only used css rules.
InspectorFrontendHost.saveAs("used.css", usedCss);

Answer 3

Нажмите CTRL-SHIFT-J, чтобы получить доступ к инструментам разработчика Chrome.Там вы можете выбрать вкладку ресурсов, включить их слева и обновить страницу, если это необходимо.Он покажет все загруженные файлы, включая таблицы стилей.