How to debug JavaScript Code

Errors are not necessarily bad. In fact, most of the time, they help us identify issues with our code. You must know how to debug your JavaScript code and fix errors. Debugging is the process of examining the program, finding the error, and fixing it.

Ways to debug your JavaScript Code:

1)debugger

The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.

Syntax:
debugger

Example:
function BuggyCode() {
debugger;
// do potentially buggy stuff to examine
}

2) Using console.log()
You can use the console.log() method to debug the code. You can pass the value you want to check into the console.log() method and verify if the data is correct.

Syntax is:
console.log(object/message);

3)Setting Breakpoints
You can set breakpoints for JavaScript code in the debugger window.

JavaScript will stop executing at each breakpoint and lets you examine the values. Then, you can resume the execution of code.

Let’s see an example by setting a breakpoint in the Chrome browser.

You can set breakpoints through the Developers tool anywhere in the code.

4)We can resolve Javascript errors using a tool like a “sentry“.

5)By Using IDE like Visual Studio code with “ESLint” plugin enabled.
ESLint is a linter for JavaScript. Linters will analyze code as it is written and identify a variety of basic syntax problems. The use of ESLint will allow you to catch errors, particularly easy to resolve but annoying ones such as missing brackets or typos, before executing the code.
ESLint is available as a Node package.

It has also been set up as a plugin for many code editors such as Sublime Text 3 and VS Code, which will then mark the offending errors right in your editor window.

6)JSBIN
JS Bin is one of the best JavaScript debugging tools for collaborative debugging of your JavaScript. It allows you to test and debug scripts right along with other people. You can run the JavaScript, see a debug console and the output of the scripts, add libraries and dependencies, and so much more.

7)By Inspecting the Webpage output.