See missing CSS files with developer tools

Is it possible to with any Chrome or any other developer tools to see which CSS files link to in a page dont actually exist?

Evanss

Posted 2014-04-14T14:43:44.800

Reputation: 1 008

1See the Web Developer Tools console for 404 errors of files. From the files look for css extension ending URLs – Subin – 2014-04-14T14:49:43.113

Answers

In any browser's Developer Tools, if you switch to the Network pane, you'll see all requests made from the page. Look for red lines, those will be requests that failed. Of those, look for the ones that have a 404 (Not Found) Status. As the comments said, the ones ending with .css are the ones you like.

As a bonus, FireFox's Dev Tools have a filter at the bottom - choose "CSS" and you'll only see requests for CSS files - successful, or otherwise.

Traveling Tech Guy

Posted 2014-04-14T14:43:44.800

Reputation: 8 743

In chrome developer tools on the network tab you can also filter for this

    status-code:404

to only get a list of missing resources

coedycode

Posted 2014-04-14T14:43:44.800

Reputation: 31

Filtering for that phrase removes all other results except 404's, the previous answers all involved manually looking through the whole list of resources, for the red ones - this is much more efficient. – coedycode – 2015-06-10T14:23:25.230