How to Debug ( ) your JavaScript Code like a Pro (Part 2)

Debugging Tips for beginners

This is part 2 of the tutorial series: How to Debug ( ) your JavaScript Code like a Pro.

Use debugger and IDE Debugging Tools.

Most IDEs come with built-in debugging tools that can assist in streamlining the debugging process. For example, the debugger statement can be placed in your code to pause execution, allowing you to examine your code.

Adding a debugger allows you to dissect your code in real-time, making it easier to isolate and fix issues efficiently.

For example, suppose we have a function named calculateTax which looks like this:

Imagine a scenario where you are getting unexpected results. You can insert a debugger statement. The debugger statement will pause the execution of the code, and you will be able to examine the variables when the code is executed.

When you insert the debugger, the execution will be paused, and you can inspect the value of “total “ as shown below.

Set Breakpoints

A breakpoint is a feature provided by most IDEs, allowing developers to set a specific line in their code where execution will stop. To set a breakpoint, you typically click next to a specific line of code, and a visual marker will appear, indicating the breakpoint.

To set a breakpoint in Chrome, go to the Sources panel. On the specific line of code where you want to set a breakpoint, click on the left where the line number is displayed, and a blue icon will appear. Now, you have set a breakpoint, and the code will stop executing at that line, allowing you to examine variables.

Code Isolation

If you find yourself dealing with bulky code that's producing errors, it can be helpful to isolate the problematic sections. Break the code down into smaller components and test each part independently. This approach makes it easier to identify where the error is occurring and ensures that each piece functions correctly before reintegrating it into the larger codebase.

Conclusion

Refining your debugging skills goes hand in hand with building projects—the more you build, the better you become. To advance your JavaScript skills, check out this repository, which contains beginner and intermediate JavaScript projects to practice and improve your skills.