CODEWITHSUNDEEP
cssgoogle-chrome
tirenweb
tirenweb

Reputation: 31709

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.

Upvotes: 51

Views: 126925

Answers (6)

James111
James111

Reputation: 15903

Have a look at CSS Used "Get all css rules used by the selected DOM and its descendants. "

I found this helpful for getting the CSS and inspecting it in my code editor.

💡 Tips:

  • Copy the CSS from CSS Used into your code editor, prettify it, and read away!

Upvotes: 1

Chris
Chris

Reputation: 259

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.

Upvotes: 6

Colin O'Dell
Colin O'Dell

Reputation: 8647

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.

Upvotes: 1

Dr1Ku
Dr1Ku

Reputation: 2910

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

Upvotes: 25

dsetton
dsetton

Reputation: 826

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.

Upvotes: 12

Jorgeblom
Jorgeblom

Reputation: 3578

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);

Upvotes: 5

Related Questions