View CSS Style sheets in IE11 F12 Developer tools

Question

In previous versions of IE developer tools you were able to open the source of CSS files in the debugger.

This was of most use to verify that they had actually been downloaded / referenced correctly, ie if the request for a stylesheet returned a 404 error then thats the route cause of my styles not being applied.

However as of IE 11 the debugger no longer lists CSS files, so I can't use that to view their source and verify them.

I know that I can do this through the profiler - but that requires starting a profile trace and reloading the page, which is not exactly conducive to easy work flow. (Not to the frequent lock ups the F12 tools seem to experience on any of the profile tabs is used)

Is there still away through the dev tools to see the source of CSS files?

Handyman

See tenletters' answer and my comment! – Communard

Answer 1

I don't believe so. There is a Connect issue reporting this and MS says they have it on their backlog for a "potential" future release. IE11: CSS tab missing in new F12 Developer Tools

Update: Microsoft has announced via the UserVoice site for Internet Explorer that they are planning on bringing it back.

Washko

I hope IE dies in a fire. – Ground

@BenRacicot It will. They are making a new browser. – Curate

Spartan is coming soon – Delisadelisle

Answer 2

The CSS tab is missing, and the debugger does not list CSS files either.

However, If you find an element in the dom explorer with styles applied from a css file, you can then click on the file name and open the entire file.

Melisa

Works! Also, if you click the Console tab, filter for Messages only, and navigate to the CSS file by URL directly, a new message will show up saying, "HTML1300: Navigation occurred. File: blah.css", which you can then click and view. – Communard

Its amazing I didn't notice this. However it dosn't resolve the issue of missing CSS files as their contents wont be applied to any element. The "Network" tab is also much better now and you can easily filter to find 404 errors – Handyman

Answer 3

I was surprised to discover this today, and resorted to using the Chrome F12 tool - Under the Resources Tab in the left hand panel you can expand Frames to access Images, Scripts and Stylesheets for your page - CSS are in the last of these of course.

It goes without saying that this only helps if you have access to Chrome and the site supports it.

Asseverate

Answer 4

In developer tools, go to the Network tab. Click the arrow (when you hover over it, it will say "Enable network traffic capturing"). It will turn into a square to indicate that it is capturing network traffic. Refresh the page. Click type to sort by type and look for "text/css". Double click the file. Click "Response body". You will see the CSS contents there.

To manually add styles, go to the DOM Explorer. Click an element in your webpage and it should bring you to that part of the webpage. You can add styles to the elements in the DOM Explorer or in the left window, you will see "Inline style" (if there are no CSS classes) or you'll see "Inline style" as well as the CSS class and its details. You can click in there to make changes.

Horthy