How to see the CSS files loaded in a page in Google Chrome?

How can 开发者_如何转开发I see the CSS files loaded in a page in Google Chrome? I can see the JS files, but not the CSS.

Use the Network tab and filter for CSS requests in the Chrome Developer Console.

Warning: this answer is now outdated! For recent versions of Chrome, check Dr1Ku's answer.

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.

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.

If you are interested there is a way to look for them in 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);

Right-click anywhere on the page and select "Inspect element". From there, you'll want to click the Resources tab 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 Content tab next to Headers on the right.