[JavaScript] Start debugging your web application with developer tools available in web browsers

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. Below video demonstrates, how to start debugging in Firefox browser.

Let’s see how to debug in chrome browser.

Chrome

Step 1: Open your application in the Chrome web browser.

Step 2: Open developer console by inspecting your web page and select source tab or Go to View → Developer → View Source.

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.

Happy Debugging!!

If you enjoyed this article, please share with your developer friends and click the green “❤” heart below and so others can find it too. Thanks for reading.

Originally published at www.nodesimplified.com.