Use Firefox Firebug to Detect your Callback JavaScript functions

In this free HTML JavaScript tutorial we will see how we can use Firefox Firebug to pinpoint exactly from where your JavaScript callback functions are called in the abstraction.

You can have a Firefox Firebug download at here, or search for "Firebug download".

Try to read more HTML JavaScript tutorials about web development at jsB@nk:
- How to Become an Advanced JavaScript Debugger
- The Ultimate JavaScript Tutorial in Web Design


Sampled by © JavaScriptBank.com
There comes a time where one would need to dig beyond the abstractions to see what is really going on under the covers.

Say for example you wanted to see how a certain library computes parameters for your callback, how would you do it? Scanning the library and figuring out the logic step by step is one way you can do it, but that is very time consuming and with complex libraries such as jQuery, it's nearly impossible to exactly pinpoint from where your callback function is being invoked.

In this post we will see how we can use Firebug to pinpoint exactly from where your callback functions are called in the abstraction.

A simple library

Let's take an example with a very small hypothetical "library" example:

  1. var alibrary = (function () {  
  2.     var callback,   
  3.     privatefun = function (p) {  
  4.         callback(p);  
  5.     };   
  6.   
  7.     return {  
  8.         setCallback: function (fn) {  
  9.             callback = fn;  
  10.         },  
  11.         doIt: function () {  
  12.             var params = ['some''parameters', 22 + 20];  
  13.             privatefun(params);  
  14.         }  
  15.    };  
  16. }());  

This 'library' offers 2 public functions; setCallback, which takes a function and stores it into the callback parameter and the doIt function that invokes the function that was stored previously.

Here's how this library can be used:

  1. alibrary.setCallback(function (p) {  
  2.     console.log(p);  
  3. });  
  4.   
  5. alibrary.doIt();  


When the doIt function is called, the callback function that was passed previously will be invoked, passing in some parameters from behind. The library is passing an array as a parameter and the third element of that array is a computation of 22 + 20.

Now, as users of the library, we want to check how that 42 is computed from our callback function; and we will do this with Mozilla Firefox's best friend, Firebug

Tracing the steps

Open your Firebug (F12) and head onto the Script tab and choose the script from where you are defining your callback function. Then find your function and put a breakpoint in the function:



To set a breakpoint, click next to the line number in the and a red dot will appear.

The next step is to perform the action that will invoke your callback, and in my case this 'action' is a page refresh.

So now after my page refresh, the library will invoke my callback and the breakpoint will be hit:



When the breakpoint is hit, the line will be highlighted in yellow.

Now comes the part where we trace the steps back to where the callback was invoked. If you look closely to the upper part of the Script tab, you will see the following:



From there, you can now trace the path to where the function was invoked! Now let's click on the first step, privatefun().




Upon clicking, Firebug takes you directly to that function, privatefun, and now from this function we can see how our callback function was invoked:



Now although we can see from there the function was invoked, we still don't know from where that 42 is coming from, and so we must check which function invoked privatefun and to do that, we move a step back through the invocation line, the doIt() step:





From here, we can now see how that 42 was being computed because we have finally arrived to the step we wanted to.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Top 50 Most Addictive and Popular Facebook mini games
Best Free Linux Web Programming Editors
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com