How to use debugger and developer tools In Javascript
If you are having trouble with your code and need to take a closer look, you can use the debugger tool in your browser’s developer tools. This tool lets you stop the code from running at a specific line so you can check what’s going on. You can then look at the values of different things in your code and see how your program is working. It’s like hitting a pause button to investigate what’s happening in your code.
The stepwise approach to use debugger and the developer tools is written below:
Step 1: Imagine you have a webpage with a JavaScript bug and open the developer tools (F12).
Step 2: In the “Sources” panel, you can see all the JS files of the site.
Step 3: You suspect the bug lest say is line 4, so you click on the line number 4 to set a breakpoint.
Step 4: You refresh the webpage, and the browser pauses right before executing line 4 (due to the breakpoint).
Step 5: The “Scope” pane shows you the values of variables used on line 4. You see an unexpected value and identify the root cause of the bug.
Step 6: You will find various options in the right sidebar in the Sources tab to step through the code and, examining the variables value at each step.
Step 7: Once you understand the issue, you remove the breakpoint and resume execution to test your fix.
What are Some Common Debugging Techniques for JavaScript ?
JavaScript development can be tricky, and errors are common. But do not worry! There are ways to find and fix these problems.
Some of the common methods to debug JavaScript code are listed below:
Table of Content
- Using console.log()
- Error Handling (try…catch blocks)
- Using debugger and developer tools