March 01, 2016

How to Debug JavaScript code/functions of an application using breakpoint on browser

We can debug javascript functions/scripts of an application when running it on any browser like Internet Explorer, Mozilla, Chrome etc. Browsers provides the facility to enable user to use breakpoints and start debugging the JavaScript. We can use breakpoints from where we want to inspect the code flow and results.

This debugging helps developers to understand the flow and errors if any. Following are the steps to do it.

Press F12 (Developer Mode), after running the page of your application. You will see below screen (IE11 Developer Tool):




Click on Debugger Tab, you will see HTML and JS list associated to the HTML Page. To debug any javascript function, we need to add a breakpoint as shown below (red circle in left):




When you refresh the page or trigger the action, the browser will pause the code at this breakpoint, using above icons you can execute each code and check the issues or values at run time.

No comments:

Post a Comment