如何查看Google Chrome中页面中加载的.css文件？

Question

如何查看.cssGoogle Chrome中页面中加载的文件？我可以看到.js(脚本)而不是.css

Answer 1

该Resources标签自2011年1月起消失,使用Network标签和过滤CSS请求.

原始答案(2010)

您可以在任何项目上使用"检查元素"(右键单击),然后选择"资源"选项卡,单击"为此会话启用资源跟踪".然后从"子选项卡"(所有,文档,图像,脚本)等,您可以单击"样式表".

希望这可以帮助 !

Answer 2

警告:这个答案现在已经过时了!对于最新版本的Chrome,请查看下面的Dr1Ku的答案.

在Chrome的"开发人员工具"选项卡(CTRL + SHIFT + I)上,转到" 资源"(您可能必须在该页面上启用资源跟踪),然后单击子选项卡样式表.这将显示该页面加载的所有css文件.

Answer 3

我想查看已加载的文件，右键单击页面上的空白部分，然后选择View Page Source。从这里它将向您显示由 Chrome 呈现的 HTML 页面。

如果您查看标题部分，您应该会看到所有被调用的外部文件的列表，并且它们应该是超链接，只需单击其中任何一个，Chrome 就会在新选项卡中显示该特定文件。

Answer 4

如果您有兴趣,有一种方法可以在JS中查找它们:

(请使用现代浏览器)

var sts = document.styleSheets;
var result = [];
for (var i = 0; i < sts.length; i++) {
    var st = sts.item(i);
    if (st && st.href) {
       result.push(st.href.match(/\w*\.css/));
    }
}
console.dir(result);