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 libraryLet's take an example with a very small hypothetical "library" example:
- var alibrary = (function () {
- var callback,
- privatefun = function (p) {
- callback(p);
- };
-
- return {
- setCallback: function (fn) {
- callback = fn;
- },
- doIt: function () {
- var params = ['some', 'parameters', 22 + 20];
- privatefun(params);
- }
- };
- }());
var alibrary = (function () {
var callback,
privatefun = function (p) {
callback(p);
};
return {
setCallback: function (fn) {
callback = fn;
},
doIt: function () {
var params = ['some', 'parameters', 22 + 20];
privatefun(params);
}
};
}());
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:
- alibrary.setCallback(function (p) {
- console.log(p);
- });
-
- alibrary.doIt();
alibrary.setCallback(function (p) {
console.log(p);
});
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 stepsOpen 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
Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
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
Top view articles
Top 10 Beautiful Christmas Countdown Timers
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design
|