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:
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.:
Call funtion : <input type=“button” value =“submit” onclick=“call()”>
This is my way.
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.