Javascript debugging

In developing Web 2.0 applications you can use various server solutions such as PHP, Ruby, ASP.NET, Perl, Java, Coldfusion, but what is unique for all those applications is that they can’t live without Javascript!

There are applications that have only few snippets of Javascript code, but modern Web 2.0 applications are full with Javascript. Some development companies write their own javascript functions, which is rarely cause most of them using well known javascript libraries like JQuery, Mootools, ExtJs, Prototype, etc.

When you have that amount of javascript code in your application, regardless if that is your code or you import some third part js plugins like for example drag and drop functionality or some image editor, during the development process you will probably deal with situations when your client code doesn’t work. Probably you will notice that error when some front end functionality of your web application doesn’t work. Details about errors you can see in error console of your browser, when i am developing application i usually using Firefox Mozzila (i thing it is best browser for web development together with Chrome) and its web developers tools.

Based on details about error you can easily find location of error and fix it. But it is most harder to find error in case when your browser display no errors and application doesn’t work as we expect. What to do in those cases?

First you should locate part of javascript that is causing trouble, then depends on your habits to deal with javascript debugging, you could try with alert functions (recommended for beginners) to see does your script execution get to that part of the code  or to see values of some variables. If you want to preview with this solution array or object you can use:

var someObject = myObject;
alert(someObject.toSource());

With toSource() function you can see more detailed your variable just like print_r() function in PHP.

You should use alert often in function, to see exactly what is status of your code execution and variable values.

For more advanced developers, and this is recommended way how you should debug javascript, you can use Firebug where you can set up breakpoint in your code and from that point after page reload, you can step into your code line by line and see all your status of code execution and state of your variables. I will not go in details with how you can use Firebug, but this is thing that every web developer should master in order to make quality Web 2.0 applications.

Little note, when debug with Firebug and using some Javascript frameworks, pay attention to $, check always its values, cause often you could get in situation that value of $ is changed specially in cases when you are using for example JQuery and Mootools together,and they both using $  as a selector. Note, in those case, always use JQuery.NoConflict() and use JQuery with jQuery selector and Mootools with $.

If you have any comment about this post, please make a comment. I hop this post will be useful to you.

 

No related posts.

585428514808b4359c8cf19a47f804b7

14. April 2012 by admin
Categories: Java Script | Tags: | 1 comment

One Comment

  1. hey there and thanks to your information ? I have certainly picked up anything new from proper here. I did then again experience a few technical issues the usage of this website, since I experienced to reload the web site a lot of occasions previous to I may get it to load properly. I were puzzling over in case your hosting is OK? Not that I’m complaining, but slow loading circumstances times will very frequently have an effect on your placement in google and can damage your high quality rating if advertising and marketing with Adwords. Anyway I am adding this RSS to my e-mail and can look out for a lot more of your respective fascinating content. Ensure that you replace this again soon..

Leave a Reply

Required fields are marked *

*