Debug Java Script in chrome browser

Hello Guys,

I hope you are enjoying your weekend.Here I am back with my new post.Today I am gonna tell you how to debug Java Script in Chrome Browser.People generally make use of alerts in their scripts to watch some value which can easily be seen through debugging.Obviously it works but what I am trying to say is that it wastes your time and makes your code look ugly.So we can debug our Java Script by using chrome debugger.you can start your chrome browser debugger from Settings > Tool > Java Script Consol or there is a short cut for it CTRL+SHIFT+J in windows.Consol will open at the bottom of your browser.There you can see all your errors and warnings which come after compilation fo your JS.So you can fix all your compilation problems by looking into the consol.Now it's turn to fix rum time error.For that we can debug your JS step by step.

1. Open Source tab in your console.

2. Go to your file in navigator.Double click on your file.It'll open,scroll it down little bit and there you can see your JS methods and events.

3. Now we need to set a break point.Firstly let me explain what a breakpoint is , to those who are unaware of the term .Break point is a point where your program will be paused after setting it and then you can execute the program line by line.For setting a break point just click on the left side over the line numbers.One blue mark will appear it means break point has been set up.You can see all your break points on the right side panel of your console.Once you set your break point, the browser will store it for that page so you can close your page and when you open it next time your break points will applied to your page automatically.

4. Once your break point is set up.you can execute it.Suppose you have set your break point inside your button click event.For triggering it just click that button your program will execute and paused at that line.

5.Once your program is paused you are at run time environment which means you can watch you variables or expression value.You can execute your program line by line by pressing F8 or you can go to your next break point by  pressing F10.

6.For watching your variables value click show console button second from the left at the bottom of you console.Your console will be opened,right click and clear the console.Now type your variable name which you want to watch.Just keep one thing in your mind that the line must be executed in your program where that variable is initiating or getting the value.After typing variable name just press enter.You will get your variable value.

7. Suppose your variable is containing any XML then you can watch any expression or Xpath in console.

8. The console gives u many options which you could apply to your variable which in turn could be a better option for you to get the value. The Console gives you the flexibilty to try new options on your variable .

This was very useful for me in designing UI's.It made me faster in UI designing and better in term of using syntax.Now I try to get the best solutions out of all the available ways of doing it.In this technique you don't have to put alerts at many places to check you variable's value and don't have to run your pages again and again.I hope this will help you also.Please dont hesitate in asking any question related to this post.Your comments are most welcomed.