How do you find the source of specific actioning Javascript that's being activated after clicking a certain item?
For example --
A site has:
<ul id="list0" class="list">
<li id="listItem0">
<li id="listItem1">
<li id="listItem2" class="selected">
<a href="#">Labrador Retriever</a>
On the webpage, when that listItem2 item (<a href="#">) is clicked, it loads specific information on the item (Labrador Retrievers) into a pane on the right (without refreshing the page or going anywhere).
How would you find the underlying Javascript that's doing this? I did a quick search with Firebug for the "#" link, but as expected, that's like trying to find a needle in a haystack of needles.
I just don't know how you'd even go about tracking this down. It appears that the page is also using 10-12 external Javascript files, as well, making it all the more difficult to find what in the Javascript is watching and actioning on this specific <a href="#">.
I thought that perhaps setting some sort of breakpoint would help to trace what in the Javascript is doing the work, but I only see three types of breakpoints -- element/child removal, or attribute change -- which don't seem applicable to what's happening here.
