Most of the time, web developer is not only writing code, but also spending time on debugging code. Debugging is important skill for assuring system is running well and free of bugs. As a developer, he or she will need to know where and how to debug code, especially for novice developers. This post, I’m not going to teach you how to debug code, but sharing the methods that I’m using the most for debugging my code, when something goes wrong in the application.

i) Using Debugger
I believe one of the most effective ways for debugging code is using IDE’s or browser’s debugger. For instance, I personally like to use Firefox’s plugin – Firebug for testing my code. The console is very useful to detect where it went wrong. Firebug is not only good for testing and debugging your JavaScript code, but also very useful for inspecting your CSS and HTML layout of your site, too. I had mentioned it in detailed in my previous post. Feel free to reach there if you’re interested to know further on what I’m doing with Firebug. If you’re from .NET background, MS Visual Studio IDE has prepared a set of integrated debugger tool, such as allow developer to set breakpoint, tracing code line by line and so on. To know more what it’s in, you may visit this page: Debugging in Visual Studio

ii) JavaScript’s alert() Prompt is Helper
From time to time, I like to use alert() prompt for previewing my result from back-end, especially when I’m dealing with Ajax code. This will become very useful method if I’m not having Firebug add-on installed in the FF browser. Or, IE8 debugger for those who like Internet Explorer. For example, I simply add an alert() command within the jQuery’s ajax with post method, as follows:

 $.post(myPage, 'param1=val1&param2=val2', function(result){
   //put alert prompt to see the result
    return alert(result);
  //my following code..
});

By returning alert() prompt in the Ajax call, it’s showing the returned result while stopping further code execution. From there, I can decide whether the result is what I expected. If not, then I’m able to inspect it’s either caused by the front-end code (JavaScript) or from the back-end code, say PHP is what I’m using for my application. Otherwise, I will just remark/comment the alert prompt command if the result is precise and therefore, I can proceed to my work in the Ajax call.

iii) Printing Out the SQL
Always print out the SQL command at the first run. It’s important for us to know we’re running the correct SQL command for pulling the result from database. So, to make us convenient, just print out the SQL as well when testing our application. For instance in PHP code:

<?php
  $sql = "SELECT * 
            FROM tbl_user 
            WHERE username = '".$username."'";
 
 //print out the sql as well
  echo $sql;
//my following code.. 
 ...
 ...
?>

By printing out the sql statement, it will assist us to decide whether the particular SQL is correctly written and also, to make sure we have been passing the precise variable’s value to it. If we’re still not sure with the SQL, just copy the printed command and paste it into your Database Query Analyzer (or any similar function or platform) for testing the result. Once everything is done and confirmed, apply it to our PHP code.

iv) Show Me the Border!
As you may have already known, most of the time, we’re not using <table> for designing our website or web application in the era of Web 2.0, for the sake of advantages of DIV based layout. Unfortunately, it’s somehow tiring when come to designing web layout, especially need to make sure it’s compatible and displaying well in different browsers. Thus, in order to assure my web layout is correctly aligned in different browsers, I will simply set the border attribute to 1px with visible color in my CSS script, so that I will be able to know how does the layout look like. For instance,

.../*some css here*/ ...
.wrapper{width:900px, border:1px solid #333;}
.column_left{width:250px, border:1px solid #333; padding:8px;float:left;}
.column_right{width:625px, border:1px solid #333; padding:8px;float:right;}
.footer{width:900px, border:1px solid #333;}
.clearBoth{clear:both;}
.../*some css here*/ ...

As you have seen, I have placed ‘border:1px solid #333;’ in the CSS’ attributes as well in order to show the div’s border in browser. Once I’m confirmed and satisfied with the layout, I will either set the border attribute to ‘0px’ to hide the border or just simply remove it from the script.

v) Searching For the Answer
Last but not least, if above mentioned methods failed to solve our problem, just find the solution online. We can do some searching in your preference search engine, most notably, Google Search. Keep in mind that, the problem we’re facing, probably it has been encountered by the others. Hence, it’s worth to spend a little time to search for solutions online, such as in webmaster’s or any IT related forums, developer’s blogs and so on. How to implement a good search is important, too. We have to make sure the keyword we enter will be matching more relevant results. So, what I normally do is simply to use the error message as my keyword for trying and, it’s not disappointing me most of the time. Apart from searching, we can also ask our colleagues or peers who may have encountered similar errors, previously.

Conclusion
It’s important for web developers to practice and master debugging skills for assuring quality of their applications.