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

Question

How can I see the CSS files loaded in a page in Google Chrome? I can see the JS files, but not the CSS.

This is available in Developer Tools -> Resources -> Stylesheets (you'll probably have to turn on resource tracking for the session), but this is probably a SuperUser-type question. — Marc Bollinger, Oct 14 '10 at 18:14
There is a great chrome extension called CSS Used - you can copy the CSS of an element and all of it's descendants...quite useful. — James111, Apr 27 '23 at 01:50

score 25 · Accepted Answer · edited Jun 16 '21 at 14:02

25

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

edited Jun 16 '21 at 14:02

TylerH

20,799
66
75
101

answered Oct 14 '10 at 18:16

Dr1Ku

2,875
3
47
56

1

Is there a way to download CSS file ? – vikramvi Jul 06 '20 at 06:53
1

@vikramvi: It's a network request, so you can right-click on the file you want and `Copy` – `Copy content` or, as with any other network request, click on the request you want to inspect and navigate to the `Preview` (parsed/beautified) or raw `Response` tab to see the content. – Dr1Ku Jul 06 '20 at 09:53

score 12 · Answer 2 · edited Aug 24 '20 at 06:14

12

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.

edited Aug 24 '20 at 06:14

Dr1Ku

2,875
3
47
56

answered Oct 14 '10 at 18:16

dsetton

816
8
15

score 6 · Answer 3 · edited Jun 16 '21 at 18:38

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.

Jorgeblom · Answer 4 · 2019-05-12T08:22:44.793

5

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

edited May 12 '19 at 08:22

answered Oct 24 '13 at 13:51

Jorgeblom

3,330
1
23
24

Tried on this page in Chrome and it gives an error: VM333:5 Uncaught TypeError: Cannot read property 'match' of null at :5:25 (anonymous) @ VM333:5 – Andrew Anderson May 09 '19 at 19:27
Please check again. I did a little change. – Jorgeblom May 12 '19 at 08:23

score 1 · Answer 5 · edited Jun 16 '21 at 14:05

1

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.

edited Jun 16 '21 at 14:05

TylerH

20,799
66
75
101

answered Oct 14 '10 at 18:17

Colin O'Dell

8,386
8
38
75

score 0 · Answer 6 · answered Apr 27 '23 at 01:53

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!

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

6 Answers6

Linked