which javascript files are NOT being used on page load

Question

Is it possible to find out which javascript files are NOT used on a web page without having to add console logs or debug or removing them to see if things break?

I'm looking for a tool, or a command line script or firefox plugin etc.

For example, let's say I have these included in the header:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript" src="js/something.js"></script>

On the page, calls are only made to functions in functions.js, validation.js and jquery.js. How can I know that something.js is not used and therefore can be safely removed from the header?

I've tried rooting through things like FireBug, chrome's console, yslow and server logs, but these all tell me which scripts have been loaded, i.e. all of them, not which ones have been used.

Answer 1

AFAIK there is no simple "this file is in use / not in use" detection mechanism, because there are so many ways to call, extend and reference things in JavaScript.

There are dozens of ways to call a function, e.g. in the click event of an element, eval() statements... You could be extending the prototype of an existing class in a script file... etc. Also, you could be fetching new markup through AJAX than in turn references functions from a certain include, something impossible to test for automatically without fetching the content.

Unless somebody comes up with a tool that tackles exactly this (I'm not saying it's impossible, just that it is horribly hard) I'd say working this out manually with a good IDE and search function is the best way to go about it.