Let's say my source HTML looks like this:
<div id="whatever">...</div>
But my Chrome inspector shows it to me like:
<div id="whatever" class="random-class">...</div>
I can assume that that .random-class was added by a Javascript script, but there are dozens of these scripts on the site. Is there any "standard" way, using the Chrome or FireBug inspector for example, to determine which script is adding this class to my element?
with the webkit inspector in chrome, you can use Ctrl-Shift-F and search for "random-class". It will give you all the matches, distincted by file.
You can go through the results one by one and find the cause, even put breakpoints. If this is too much of a pain you can try to find className += "random-class" or for jQuery addClass("random-class") etc.
If you are looking at results in minified code, chrome allows you to prettify the result, after which you can re-search.
So if you have a minified file with 1 line function x() { document.body.className += "random-class"; };x();document.body.className += "random-class"; the match will show 1 line. Then prettify the code and re-search. Now the results will show in 2 different lines.
If you're going the browser route, a browser extension like FireBug will show you the events attached to the element like 'change()' etc. However, be aware that some embedded scripts won't show up here. I'm assuming these are all external scripts.
You can also use Visual Event by SpryMedia. However, this is sort of heavy duty if you need to do this for a huge site. It also comes in a browser extension.
