How to find out how some javascript component works?

I have just seen a very interesting user interface widget. This widget explains how Twilio SMS Api works. When the user clicks a number there occurs a small change in the image.

I would like to learn how this widget开发者_运维问答 works. What tools should I use to learn it? How would you try to find out the working mechanism of this widget?

use the webinspector in chrome or safari (ctrl+shift+i or ctrl+alt+i). or use firebug, which is an addon for firefox (my tool).

from there; select the element/widget with the inspector tool. You'll see the html structure. Play arround with the widget and see how the html changes. Look for the DOM tab and see what changes there. Look at the scripts/ressources tag and see if you can identify the script that does this feature. If not, try setting breakpoints in portions of code, you think could be doing the effect..

this process can be long and hard or sometimes quite easy. Really depends on the widget and the way the website was put together..