Tuesday, May 20, 2008

Inspecting Javascript with Firebug

posted by Alex Grande
1. Go to http://www.alexgrande.com/breakable/ and add the link to your bookmarks.


2. Go to the page you are interested in inspecting and click on the bookmark in your browser called "Inspect JS". That will load breakable.js into the head of the page you are currently using.


3. In firebug go into the scripts tab and view breakable.js.
4. Set a break point on line 7 where it says funct();


5. Find out what the ID is of the element that has the event listener.


6. Click the console tab in firebug. Type in: breakOn("elementID", "eventTrigger"); Example: breakOn("prettyImageOver", "onmouseover"); Example 2: breakOn("ajaxImageChanger","onclick");


7. (1)Initialize the event by mousing over it or whatever you you chose as the event trigger. If the original js author chose a mouse over event then you should also use a mouse over event. Because if you choose an onclick for an onmouseover event then by the time you click it the event has already passed you by..
8. (2)Firebug will transfer over to the breakable.js in the scripts tab at the breakpoint funct(). Step into it by (3)clicking the arrow right in firebug script section.


9. and you will enter into the javascript code of whatever function is called by the event.


I love this! Big thanks to my friend Grady Morgan for writing this short script!

Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home