Debug JavaScript code – Google chrome debugger help you

Debug JavaScript code with Google chrome. Debugging is a process of finding and reducing the number of bugs of your programs. As web developer are very much engaged coding with JavaScript, they need to frequently debug the code when the desired output does not comes. JavaScript code can be debugged easily in chrome or other browsers like internet explorer, Mozilla Firefox and many other list of browsers that are made just to debug JavaScript code. Google chrome provides this feature of debugging JavaScript code, and i used to explore bugs mostly in chrome only.

From here you can start over. Firstly install google chrome, and run your web app in chrome, which you want to debug. You can run the debugger, by selecting, options -> tools -> JavaScript console as seen in figure below:

Debug JavaScript code
Open debugger : Debug JavaScript code

Script tab will be opened. Usually, in the right side of the opened tab, you can see some of the important buttons to use debugger efficiently, whose description along with the image is given below:

Debug JavaScript code with Google chrome
Debug JavaScript code with Google chrome

Debug JavaScript code :

Here is the explanation of all buttons whose respective numbers are marked in the figure:

1. ) Play and pause : It is used if you want to debug the code or not.
2.) Step over : This button will make you jump step by step in your javascipt code
3.) Step into : This will cause the debugger to move its execution to the first line in the functions definition.
4.) Step out : This will cause debugger to move its execution to the parent function.
5.) deactivate breakpoints: This will remove all the breakpoints you have marked in the code.
6.) Breakpoints : Just put the cursor to the left of the code and the breakpoints will be marked.

Let me demonstrate you to debug very simple code given below. Here i had introduced an error, i.e written document.wrte instead of document.write in the code given below to print “Take care”. Here is the code. I have marked the error with the underline.:

Debug JavaScript code with Google chrome

<html>
<head>
<script type = “text/javascript”>
function call(){
document.write(‘Hello World!’);
document.wrte(‘Take care’);
}
</script>
</head>
<body>
Hello world
Call funtion : <input type=“button” value =“submit” onclick=“call()”>
This is my way.
</body>
</html>

Run the web page. Now to debug the code, open javascript console as described above, and see the error after pushing submit button.

Output of Debug JavaScript code with Google chrome

debug javascipt code with google chrome
Output : debug JavaScript code

It will indicate, that html document has no method wrte. Great, we caught the error, now modify the code, i.e instead of wrte correct it to write. Now run the code and jump to JavaScript console, your code is correct, no JavaScript error is found, as can be seen below:

debug javascipt code with google chrome
Ouput after correcting: debug JavaScript code

In the demo above, i have not used breakpoints, while you can mark breakpoints and debug it step by step with the tools provided in Google chrome.

Leave a Reply

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