JavaScript Vb Script debugging Methods

We can debug javascript with different tool available with MS Windows like Visual Studio.Net, MS Script Debugger, IE7, IE8 and Google Chrome Browser .

I am starting with Internet Explorer.

First Open you page in IE and press F12 or goto Menu->tools->developer tools option, tis will open new window with four options Tabs and select Script tab.

Debugging Window of IE8

In this tab you will see all your javascript and html. For debugging you need to set break points, to set right click on your javascript code line and set break point.

After this on toolbar click on debug button, this will ask you to reload the page and will start debugging.

To check variable values right click on them and add watch for example in above image i have select document and added it to watch and here you can see all variable values dumps.

Just keep expanding element members and you will get all stuff what you want(You will get lot of function name which you can try for different use).

Step Into -> F11, Step Over F10, Step  Out Shift + F11, or just click button on toolbar.

Option in Right  tab You will find Watch Tab in which you can see dump of elements and variables. and another useful tab is  Call stack tab where you can see call sequence and in IE8 you will find immediate window also in which you can see variable values just typing them.

On Left Tab after Start Debugging/Stop debugging button you will see a drop-down containing list of all included script (.js) files. you can select and load them for debugging.

In search option you can search very easily.

In fact script debugging feature of IE8 is very handy and you are comfortable with Visual Studio or MS Script debugger then you do not find any difficulty in doing script debugging with IE8.

Now i am going with Google’s Chrome Browser developer tools option in which script debugger is given.

To start debugging in Chrome please refer below snap shot.

debugging window of Google Chrome

Goto Control Current Page option–>Developer–>Developer Tools. This will open one splitted window with several options and select scripts option.

This will show you all script files list you can select any one to debug.

By using up-down arrow you can select scrip files.

For setting breakpoint just right click at script line and select set break point option in context menu.

From upper pan you can actually perform action on page like button click, date selection etc and in Watch expression you can add expression to watch their values.

After breaking at break point and by just putting mouse cursor on a variable you can see value of that variable.

In above image i have marked “Debug toolbar” by using different buttons on that toolbar you can perform different debugging steps like step in, step out , step over and pause script execution .

In call stack window you can see the call stack and in scope variable windows you see the values of scoped variable while script execution is paused and in break point window you can see the list of break points which you have set and by selecting them you can directly navigate to those points.

But in my opinion if you have IE8 then use IE8 javascript debugger over chrome as Microsoft has given this option after Google Chrome and Microsoft has very strong experience in development tools and actually after using both you can actually decide which is good.

Leave a Reply

Your email address will not be published. Required fields are marked *