JS debugging

Javascript/JS debugging

JavaScript debugging

When finding out the coding errors in each project step by step with any tools or keywords is known as Debugging. When we are writing any new programming language code, there may be a possibility to encounter errors. These errors may be belonging to syntactical errors or logical errors. Unfortunately, in real life debugging is just a part of the development process, and even experienced developers find and fix errors in their code. The good thing is that when you know how to debug properly, it takes less effort and makes the work easier. The common debugging techniques include writing messages to the console and setting breakpoints. Let's take a closer look at them.

What is a console?

Generally, a console is an object that provides access to the debugging console of the browser, and this object has different methods for displaying information. The most popular and simple way to make sure that everything in your JavaScript code works as expected is to use the browser console to output information.

To open the console in the browser, use different ways:

• If you use Google Chrome, open the browser menu → select More Tools → select Developer Tools → go to the Console tab.
• When you use the keyboard shortcut Ctrl + Shift + J (on Windows or Linux) or Cmd + Opt + J (on Mac) open the Console tab right away.
• Press F12 → go to the Console tab.

For example, this is how it looks in Google Chrome:

The console.log () method

Among the various console methods, the most widely used one is the console.log () method, which writes a message to the console:

console.log("Hello!"); // Hello!

Logging is useful for debugging purposes: it allows you to see the values of variables when the code doesn't work correctly. It's better to learn debugging using an example. Below you have a function that accepts two arguments and checks if their sum equals 20:

let a = 10;

let b = "10";

function Total (num1, num2) {

  let sum = num1 + num2;

  if (sum === 20) {

    return true;

  } else {

    return false;

  }

}

Total (a, b); // false

console.log(sum); // 1010

However, the function returns false. To find out what's wrong with the code, use the console.log () method. We need to log the value of the sum variable, which is used later in the conditional expression.

Looks like we've found a bug! If we look closely, we see that the variable y is a string, but it should be a number. After fixing this type our code works correctly, and the function finally returns true:

let a = 50;

let b = 10;

function Total(num1, num2) {

  let sum = num1 + num2;

  console.log(sum); // 42

  if (sum === 60) {

    return true;

  } else {

    return false;

  }

}

Total(a, b); // true

Even in this simple example, we can see how logging information to the console allows us to debug programs.

Setting breakpoints

• The other debugging technique is setting breakpoints in the code. A breakpoint is a special point in the code that interrupts the program execution. When the program is stopped, you can examine its current state and then resume it. Also, you can set multiple breakpoints.
• An easy way to set a breakpoint is to use the debugger keyword. If the debugging is turned on in the browser or a code editor, the code will be stopped at that point. Here is an example:

let names = "John";

function view(name) {

  debugger; // breakpoint

  return "How are you, " + name + "!";

}

console.log(view(names)); // How are you, John!

When you open Developer Tools and go to the Sources tab, we'll see the following:

• The Sources window shows the source file, where the line with the breakpoint is highlighted. Also, there is a browser message saying that the code is paused on the breakpoint. On the right side, you can see the existing breakpoints, the current values of the variables, and what function is being called at the moment. You need to click on the play button to resume code execution.
• The debugger keyword is convenient when you use a code editor, but if you also interact with the browser, you can set the breakpoint in the Developer Tools.