Guide to Debug Anonymous JavaScript functions

JavaScript programming language has a special feature - allows us to create function without naming - anonymous JavaScript functions. This feature almostly used everywhere, this kind of JavaScript function can become a big trouble to debug. This JavaScript article tutorial guides us how to debug anonymous JavaScript functions. Please go to the inner post page for full completed instructions and JavaScript code examples.


Sampled by © JavaScriptBank.com
Javascript allows you to create function without name. That's why we name them (oxymoron), anonymous functions. Almost used everywhere, this kind of function can become a real nightmare to debug. We will see what is the problem and how to solve it.

Anonymous functions


Let's first see what is an anonymous function by looking at some code:

var myObject = {
    doSomething
:function () {
       console
.loh("my message");
   
}
};

document
.body.onclick=function(){
    myObject
.doSomething();
}
The code in it self does not do much...
But you can see that we define functions that do not have a name.
They are assigned to a property.

Notice that:
var myFunc = function() {

}
function myFunc() {

}

is different in the timing you will be able to call these functions.
For example:

myFunc();
var myFunc = function() {

}

will fail but not:
myFunc();
function myFunc() {

}

Functions are parsed first and are available, whatever the order you write your code in. (Not true in the console of Firebug though.)
By the way, did you see the typo? console.loh() instead of console.log().

If you run this script, you will get a nice error that you can look in Firebug, Firefox:

onclick()
(?)()

Not helping...
If you have hundreds of line of javascript code, I can tell you that it may take some time to get to the error...

So how can we handle this?

Name your anonymous functions

ok,so what's the deal? name your anonymous functions, oxymoron, here, oxymoron there...

It's easy, give a name to your anonymous functions:

var myObject = {
    doSomething
:function $_doSomething() {
       console
.loh();
   
}
};

document
.body.onclick=function $_bodyClick(){
    myObject
.doSomething();
}

Prefixing all the anonymous functions with $_ is just a convention
that is going to help in a few seconds.
Traced in Firebug, you get:

$_doSomething()
$_bodyClick
()

A little bit nicer than the cryptic first output!

But naming anonymous functions for the sole purpose of debugging is going to add unnecessary bytes right??
Indeed, we should name them for debugging and erase their name for the live version.
But this is too much of hassle and nobody will do it unless...

Javascript Preprocessor at the rescue.

There are many preprocessors out there that allows you to simplify the build process of your javascript files.
One of them,jsmake (which I've also written-sorry), allows you to automatically name all your anonymous functions or do the opposite, remove their names.

In order to remove all the anonymous function names, you will need to prefix them with $_. If you let the preprocessor name them instead of doing it by hand, it will prefix them with $_ so that you can remove them again very easily via the same preprocessor!


A simple example will be:

var testing = function () {
   
return true;
}
var myObject = {
    doSomething
:function () {
       console
.log();
   
}
};
document
.body.onclick=function(){
    myObject
.doSomething();
}
document
.body.addEventListener('click',function(e){
   
var object= {};
   
object.testing = function() {
       
return true;
   
}
});

Once preprocessed, you get:
var testing = function $_testing1 () {
   
return true;
}
var myObject = {
    doSomething
: function $_doSomething1 () {
       console
.log();
   
}
};
document
.body.onclick = function $_onclick1 (){
    myObject
.doSomething();
}
document
.body.addEventListener('click',function $_anon1(e){
   
var object= {};
   
object.testing = function $_testing2 () {
       
return true;
   
}
});

You can read more about this here.
Don't hesitate to introduce other preprocessors that do the same thing or offer even more functionality!

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