JavaScript Online Debugging Front-end Beginner's Guide

JavaScript online debugging is a crucial step in front-end development. Through online debugging, front-end developers can quickly identify and resolve issues and errors in their code. This article provides an introduction to the basic process, common problems, and errors in JavaScript online debugging, and includes code examples for illustration.

What is JavaScript Online Debugging?

In frontend development, JavaScript online debugging refers to the process of debugging and troubleshooting JavaScript code within a web page using the browser's built-in debugging tools. Through online debugging tools, developers can execute code line by line, set breakpoints, monitor variable values, and debug output, enabling them to quickly identify issues and errors in their code.

Typically, the process of JavaScript online debugging involves the following steps:

1. Open the browser's debugging tools: The debugging tools may vary depending on the browser, but they are typically accessible through keyboard shortcuts such as F12 or Ctrl + Shift + I.
2. Select the script file to debug: Within the debugging tools, developers can switch tabs or panels to select the script file they want to debug, initiating the debugging process.
3. Set breakpoints: Developers can set breakpoints in the code by clicking on the line numbers within the debugging tools. This allows the program to pause when it reaches the breakpoint.
4. Execute code line by line: Developers can execute the code line by line using buttons or keyboard shortcuts within the debugging tools. This enables them to observe variable values and output during the program's execution.
5. Monitor variable values: Developers can monitor variable value changes in real time through the monitoring panel or console within the debugging tools. This helps to quickly identify the location of the problem.
6. Debug output: Developers can utilize the debug output panel or console within the debugging tools to display debug information and error messages, providing a better understanding of the program's execution status.

The Basic Process of Online Debugging

To better illustrate the basic process of online debugging in JavaScript (JavaScript), let's explain it with a code example.

Code Example:

First, let's consider a simple JavaScript code example that calculates the sum of two numbers and outputs the result:

function sum(a, b) {
  return a + b;
}

var result = sum(2, 3);

console.log(result);

This code is very simple. It first defines a function called "sum" that calculates the sum of two numbers. Then, the function is called in the code, and the result is assigned to the variable "result". Finally, the value of "result" is printed using console.log().

Next, we will use the browser's built-in debugging tools to debug this code online.

Select the script file to debug:

First, we need to open the browser's debugging tools. In the case of the Chrome browser, you can use the shortcut key F12 or right-click on the page and select "Inspect" from the menu to open the debugging tools.

Next, we need to select the script file to debug within the debugging tools. Switch to the "Sources" tab and locate the file where the code is located, then double-click to open the file.

Set breakpoints:

To pause the program when it reaches a specific location, we need to set breakpoints. In the debugging tools, you can set breakpoints by clicking on the line number. In the code example, we want to pause the program inside the "sum" function, so we can set the breakpoint on the first line of the function.

To set a breakpoint, click on the left side of the line number, and a red dot will appear, indicating that the breakpoint has been successfully set.

Execute code line by line:

Next, we can start executing the code line by line and observe variable values and output during the program's execution. In the debugging tools, you can click the "Step Over" button or use the F10 shortcut key to execute the code line by line.

In the code example, we can execute the code inside the "sum" function line by line and observe the values of the variables "a", "b", and "result" as they change. After the function execution completes, we can observe the value of "result" and use console.log to output this value.

Monitor variable values:

While executing the code line by line, we can monitor the changes in variable values in real-time through the "Scope" panel or console in the debugging tools. In the debugging tools, you can select the "Scope" panel to view variables and their values in the current scope.

In the code example, we can execute the code inside the "sum" function line by line and observe the values of the variables "a" and "b" in the "Scope" panel.

Additionally, you can use console.log in the debugging tools' console to output variable values for a better understanding of the program's execution. In the code example, we used console.log to output the value of the "result" variable.

Debug output:

Finally, in the debugging tools, you can use the debug output panel or console to display debug information and error messages, providing a better understanding of the program's execution.

In the code example, we used console.log to output the value of the "result" variable. Additionally, if any errors occur during the debugging process, you can check the console for error messages and obtain specific information about the errors.

The Common Problems and Errors

There are some common problems and errors that beginner front-end developers often encounter when debugging JavaScript online. The following are some common problems and errors and their solutions:

1. The code does not execute or executes incorrectly

If the code does not execute or executes incorrectly, it is usually due to a bug in the code or a syntax error. In this case, an error hint is usually thrown to indicate that the developer needs to fix the problem in the code.

For example, in the following code, the function sum has undefined real parameters, which will cause the program to throw an "undefined" error at runtime:

function sum(a, b) {
  return a + b;
}

var result = sum(x, y);
console.log(result);

To solve this problem, you need to define and initialize the real parameters first when using the function sum. For example:

var x = 1;
var y = 2;
var result = sum(x, y);
console.log(result);

2. Code logic errors

Logic errors are a common type of error in JavaScript code, usually caused by a logic error or a faulty algorithm. In this case, the code will usually run successfully, but the result is incorrect.

For example, in the following code, an incorrect algorithm is used to calculate the average of two numbers, which will cause the program to output the wrong result at runtime:

function average(a, b) {
  return a / b;
}

var result = average(4, 2);
console.log(result); // output 2

To solve this problem, the correct algorithm needs to be used to calculate the average. In this example, the two numbers should be added together and divided by 2:

function average(a, b) {
  return (a + b) / 2;
}

var result = average(4, 2);
console.log(result); // output 3

In JavaScript code, logic errors are often harder to find and require careful analysis of the code and the use of appropriate tests to verify the correctness of the code.

Undefined Variables or Value Errors

In JavaScript code, encountering undefined variables or value errors is a common problem. In such cases, the code typically throws an "undefined" or "value error" error message, indicating that developers need to fix the issues in the code.

For example, in the code snippet below, the variable a is not defined, which will result in an "undefined" error during runtime:

var b = a + 1;
console.log(b);

To resolve this issue, you need to define and assign a value to the variable a before using it. For example:

var a = 2;
var b = a + 1;
console.log(b);

In JavaScript, the type of variable values can also cause value errors. For example, in the code snippet below, both variable a and variable b have string values. However, the + operator is used for string concatenation, which will result in an incorrect output during runtime:

var a = "2";
var b = "3";
var c = a + b;
console.log(c); // output 23

To avoid this error, you need to make sure that the operator is used for the correct data type. In this example, a string can be converted to a number and then operated on:

var a = parseInt("2");
var b = parseInt("3");
var c = a + b;
console.log(c); // 输出5

Syntax Errors

Syntax errors are a common type of error in JavaScript code and are usually caused by improper or incorrect syntax. In such cases, the code typically throws a "SyntaxError" error message.

For example, in the code snippet below, a closing parenthesis is missing, which will result in a "SyntaxError" during runtime:

var a = (1 + 2;
console.log(a);

To solve this problem, the missing right bracket needs to be added:

var a = (1 + 2);
console.log(a);

In JavaScript code, spelling errors can also lead to syntax errors. For example, in the code snippet below, the console.log the statement is misspelled as consle.log, which will result in a "SyntaxError" during runtime:

var a = 2;
consle.log(a);

To avoid such errors, the code needs to be carefully checked for spelling and syntax to ensure that it is correct.

Conclusion

After mastering the basics of online debugging in JavaScript, you will likely advance to workflows that involve collaborating with the backend, such as making API calls.

At this point, we highly recommend using Apidog, an all-in-one API collaboration platform. With Apidog, you can handle API documentation, API debugging, API mocking, and API automated testing all in one place. If you want to dive deeper into the world of development, give Apidog a try today.