Find all external css/js files and file references

Question

I downloaded a Bootstrap theme.

A lot of themes, just like this one, uses links to external resources from CDNs such as fonts.googleapis and MaxCDN. I prefer to have all the files stored on the server, so I don't have to do extra calls to the CDNs, as well as sometimes I work in places with bad or no internet, and inability to access these files breaks the flow of the program.

Is there a tool that goes through all css and js files and finds all files that do not use relative path? Or perhaps another solution? I tried using developer tools to check Network, but it outputs all the resources being loaded and the page that calls them, but not the file where they are used. Example header:

**General**

Remote Address:xxx.xxx.xx.xx:80
Request URL:http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic
Request Method:GET
Status Code:200 OK

**Response Headers**

view source
Alternate-Protocol:80:quic,p=1
Cache-Control:private, max-age=86400, stale-while-revalidate=604800
Content-Encoding:gzip
Content-Length:988
Content-Type:text/css
Date:Fri, 24 Apr 2015 06:59:08 GMT
Expires:Fri, 24 Apr 2015 06:59:08 GMT
Last-Modified:Fri, 24 Apr 2015 06:59:08 GMT
Server:GSE
Timing-Allow-Origin:*
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block

**Request Headers**

view source
Accept:text/css,*/*;q=0.1
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Host:fonts.googleapis.com
Pragma:no-cache
Referer:http://mycrm.ru/admin/students
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
X-Client-Data:CJO2yQEIo7bJAQiptskBCMG2yQEI8YjKAQ==

**Query String Parameters**

view source
view URL encoded
family:Source Sans Pro:300,400,600,700,300italic,400italic,600italic

As you see it only points to the resource as well as the page which uses the file which uses this call, http://mycrm.ru/admin/students, but not the file where it is actually being called and used. Plus going through every single entry to check if long.

The problem occured yesterday when I was using localhost to develop and my internet went out. I thought I can normally continue developing, but on every load it just froze for around 40 seconds before giving me an error which pointed to the first JS file in my header; the way my header is set up it is all styles first then all scripts. The only clue that I had was the "loading file xxx" at the bottom right of chrome. I used a search and found that @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); was the culprit in one of the css files. But only after quite a bit of frustration.

Anyone know a possible solution?

Answer 1

If you use somethg like Dreameaver and all the files are locally on your computer you can search for "http:", "https" or "//" within all your files and show you the files that have these keywords.

If you don't have Dreamweaver with notepad++ you can use ctr+f and select "Find All in All open Documents", for this feature you need to open all the files or open as many as you can each time you search. It will take long but you will find them all eventually.

I know that you can also use the OS file search (for example search within a folder on windows) and will also find the files with the query but it might take longer and you still have to open the files and look internally for the // or http(s).

If not in Linux you can use the console and run a search, look at this post: How do I find all files containing specific text on Linux?

Good Luck!

Answer 2

• In Chrome, open the inspector/developer tools (F12 most of the time).
• Check the "Sources" tab

You'll be able to visualize most of the css/js files. Those on the domain are, most likely first in the list. Then, follow the ones without a specified domain and the others with. In there (hope its said like that ^^"), you won't just find CSS and JS. There might also be code for ads-button and such.

I can't affirm that's all the files your website will use but that's a great start I think.