In this post, we will see how to set the breakpoint and debug web application with firefox and chrome browser in detail.

Firefox

Step 1:

Run your web application in Firefox browser. Here, we have created calculator sample application to show how debug works with the browser.

Step 2:

Go to Tools–> Web Developer –> Debugger option, Where you can able to find the source code of your application.

Step 3:

Once the debugger is selected you can able to find the Source code of your application available in the “sources” section. When you right-click on the code then you can able to add breakpoints to your code.

Step 4:

After adding a breakpoint, when you hit submit button code will break in the line where the breakpoint is set.

List of breakpoints available in the source tab.

Once you step over the breakpoint you can able to see the values of the variable in the arguments section.

Chrome

Step 1:

Step 2:

Step 3:

Set the breakpoint on your source code something similar to what we did in Mozilla browser.

Set the breakpoint by right-clicking the line of code where you want to set. You can find blue color mark set on line number 3 and 5, this is where breakpoints set. In the right side tab, we can find the list of breakpoints and value of the local variable.

You can use any browser for debugging your web application. Adding breakpoints and debugging your application will reduce your development time drastically.

We can also set conditional breakpoints in our code, It is almost similar to break point but we need to state some condition and if the variable meets the condition then the code will break else it will skip the breakpoint.