如何在 Google Chrome 中查看页面中加载的 .css 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3936196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to see the .css files loaded in a page in Google Chrome?
提问by ziiweb
How to see the .cssfiles loaded in a page in Google Chrome? I can see the .js(Scripts) but not the .css
如何.css在 Google Chrome 中查看页面中加载的文件？我可以看到.js（脚本）但看不到.css
回答by Dr1Ku
The Resourcestab is gone as of Jan 2011, use the Networktab and filter for CSSrequests.
该Resources选项卡已于 2011 年 1 月消失，请使用该Network选项卡并过滤CSS请求。
Original answer (2010)
原始答案 (2010)
You can use "Inspect Element" (right click) on any item, then choose the "Resources" Tab, click "Enable resource tracking for this session". Then from the "sub-tab" (All, Documents, Images, Scripts) etc you can click "Stylesheets".
您可以在任何项目上使用“检查元素”（右键单击），然后选择“资源”选项卡，单击“为此会话启用资源跟踪”。然后从“子选项卡”（全部、文档、图像、脚本）等，您可以单击“样式表”。
Hope this helps !
希望这可以帮助 ！
回答by dsetton
Warning: this answer is now outdated! For recent versions of Chrome, check Dr1Ku's answer below.
警告：这个答案现在已经过时了！对于最新版本的 Chrome，请查看下面 Dr1Ku 的回答。
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources(you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
在 Chrome 的开发人员工具选项卡 (CTRL + SHIFT + I) 上，转到资源（您可能需要在该页面上启用资源跟踪），然后单击子选项卡Stylesheets。这将显示该页面加载的所有 css 文件。
回答by Jorgeblom
If you are interested there is a way to look for them in JS:
如果你有兴趣，有一种方法可以在 JS 中查找它们：
(Please use a modern browser)
（请使用现代浏览器）
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);
回答by Chris
I order to see what files have been loaded right click on a blank section on the page, and select View Page Source. From here it will show you the html page as it was rendered by Chrome. If you look in the header section you should be a list of all external file that were called in as well, and they should be hyperlinks, just click on any of them and Chrome will show that that specific file in a new tab.
我为了查看已加载的文件，右键单击页面上的空白部分，然后选择View Page Source。从这里开始，它将向您显示由 Chrome 呈现的 html 页面。如果您查看标题部分，您应该也是所有被调用的外部文件的列表，它们应该是超链接，只需单击其中任何一个，Chrome 就会在新选项卡中显示该特定文件。
Good Luck.
祝你好运。
回答by derloopkat
April 2019
2019 年 4 月
To see CSS files loaded on a page:
要查看页面上加载的 CSS 文件：
- Go to Network tab
- Reload the page
- Filter by CSS
- 转到网络选项卡
- 重新加载页面
- 按 CSS 过滤
I know this is an old question but most answers are outdated.
我知道这是一个老问题，但大多数答案已经过时。
回答by Colin O'Dell
Right-click anywhere on the page and select Inspect element. From there, you'll want to click the Resourcestab and tell Chrome if it should always enable that panel or just once for the session (choose whichever you prefer). Once inside, you'll see all the files on the left. You can view the content by clicking the tiny Contenttab next to Headerson the right.
右键单击页面上的任意位置并选择Inspect element。从那里，您需要单击该Resources选项卡并告诉 Chrome 是否应该始终启用该面板或只为会话启用一次（选择您喜欢的任何一个）。进入后，您将看到左侧的所有文件。您可以通过单击右侧Content旁边的小标签来查看内容Headers。
