How to know what function (or code snippet) is triggered when an event happens?

Question

I learn HTML and CSS by looking at the code on browsers with Firebug tool. If I can't understand what they do, I look up their reference. And I learned a lot.

Now I want to learn JavaScript in the same way (I just know a litle bit about JS). Let's say:

1. I open a web page (e.g Facebook)
2. I click on setting button on the top right of the page. It shows a list of options (Account Setting, Privacy Settings, Log Out, ...)
3. I know the options box is an <ul> tag, and it will toggle show/hide when I click on the setting button.

As far as I know, if I want to test a JS snippet (using Firebug), I have to know at what point it should run through. But I am not a Facebook developer, I didn't write that code, so I can't guess that point.

How can I know what function is called to show the "options box" when I "click" on setting button?

Answer 1

It's not a sure-fire answer but there might be a few ways to see if there are functions bound to elements and a vague idea of what they might do.

Firstly, Chrome's Firebug equivalent in the right pane (press F12, after Inspecting an element, scroll all the way down to the Event Listeners section and it will show the functions bound to that element.

If you are on Firefox there is an extension to Firebug called FireQuery which will actually annotate the DOM inspector in Firebug with links to the events which again is useful.

Lastly you might be able to load in the jQuery-inlog library to actually see exactly what jQuery is doing internally. This is probably the best bet since you don't have to set a breakpoint on anything. Just use the page as normal and the jQuery internal logging will show in the Console. You just need to inject the script on whatever page you want to inspect. On Firefox this could be done with Greasemonkey - see Running custom Javascript on every page in Mozilla Firefox for more details.