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

Question

如何查看Google Chrome中页面中加载的.css文件？我可以看到.js（脚本）但不是.css

Answer 1

Resources tab is gone as of Jan 2011，使用Network选项卡并过滤CSS请求。

原始答案（2010）

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

希望这可以帮助 ！

Answer 2

警告：这个答案现在已经过时了！对于最新版本的Chrome，请查看下面的Dr1Ku的答案。

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

Answer 3

如果您有兴趣，有一种方法可以在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);

Answer 4

我要查看已加载的文件，右键单击页面上的空白部分，然后选择查看页面源。从这里它将显示由Chrome呈现的html页面。如果你查看标题部分，你应该是所有被调用的外部文件的列表，它们应该是超链接，只需点击它们中的任何一个，Chrome就会在新标签中显示该特定文件。

祝好运。

Answer 5

2019年4月

要查看页面上加载的CSS文件：

1. 转到“网络”选项卡
2. 重新加载页面
3. 按CSS过滤

我知道这是一个老问题，但大多数答案已经过时了。

Answer 6

右键单击页面上的任意位置，然后选择Inspect element。从那里，您需要点击Resources标签并告诉Chrome是否应该始终启用该面板，或者仅为会话启用一次（选择您喜欢的任何一个）。进入后，您将看到左侧的所有文件。您可以点击右侧Content旁边的小Headers标签查看内容。