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?
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. Show activity on this post.
To open F12 tools, press "F12" from the webpage you want to debug or inspect. To close F12 tools, press "F12" again. Lists command menus that can be accessed at any time regardless of the selected View.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With