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?

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?

• javascript
• jquery

Share Improve this question Follow edited Jan 7, 2012 at 12:35 Matteo B. 4,08422 gold badges3434 silver badges4343 bronze badges asked Jan 7, 2012 at 12:29 Leo LerdorfLeo Lerdorf 1,38444 gold badges1515 silver badges2020 bronze badges 1

• If you use Chrome's dev tools , you can set a event breakpoint on the click which will take you to the function . Check out this vid with Paul Irish paulirish./2011/… , it shows you how to do that and lots of other cool things . – Infra Stank Commented Jan 7, 2012 at 12:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

Unless the developer used standards-pliant event-handler attributes, this is not a trivial task.

The element that you click, or one of its ancestors (because the click event bubbles), has most certainly identifying attributes (e.g., id and class) so that event listeners can be easily added to it. Look out for the event type names (e.g., click) and values of those identifying attributes in the script code then.

If the developer used (often standards-pliant) event-handler attributes or proprietary event-handler properties (like onclick), you should see the (clickable) function values of those in a DOM inspector (like Firebug's). But that is less likely nowadays.