It is a very useful tool which will debug a webpage and show you the flow of the program. If you are a web developer or a blogger then you will really need this. It may also help you to learn JavaScript code execution.
Some times it may happen that you may want to know whether a particular JavaScript function is being called or not; yes it is the right time to use this tool and technique. Don’t worry it is very easy and even a layman can do this.
- Press Alt in your keyboard, a horizontal menu bar will appear at the top. Go to “Tools”->”Developer Tools”. The developer tools window will be loaded. There is also a short-cut keys to load it, it is f12.
- Then go to “Script” tab as show in the above figure. Here you can see the “Start Debugging” button. Don’t press it now.
- Now it is the time to put a debug point. To put a debug point click on the extreme left vertical bar just left to the line number according to your requirement. For example in the following diagram I want to know how the for loop is executed so I have put a debug point at line number 3 and 5.
- After putting the debug point go to your webpage and refresh it. Each time you refresh the page or the for loop is executed the control will come and stop at the debug point. The webpage will not be loaded completely until you allow it to go further.
- To continue again from the debug point press f5. Keep pressing f5 until the webpage is completely loaded. To recheck the flow again refresh the webpage.
- You can also see all of the errors and breakpoints in the panel present just right to this script panel.
