前端三剑客
JavaScript

Debug调试

# Debug调试

# 1. 简介

在软件开发过程中，程序的故障和缺陷被称为 bug。排除这些故障和缺陷的过程被称为 debug。调试代码是开发者日常工作的一部分，有助于发现并修正代码中的错误。

# 2. 调试代码的方式

# 2.1 使用 `alert()`

alert() 是最简单的调试方式，用于快速检查某些变量或表达式的值。会弹出一个对话框，显示传入的信息。

var x = 5;
alert(x); // 弹出对话框显示 5

1
2

# 2.2 使用 `console.log()`

console.log() 用于将信息输出到浏览器的控制台，这种方法更灵活，可以输出复杂的数据结构，如对象和数组。

var x = 5;
console.log(x); // 控制台输出 5

1
2

# 2.3 使用开发人员工具的断点

设置断点和单步执行代码是更高级的调试方法，提供了更强大的调试能力。

# 3. 开发人员工具

现代浏览器都提供了强大的开发人员工具（DevTools），包括 Chrome、Firefox、Edge 等。以下是使用 Chrome DevTools 进行调试的步骤：

# 3.1 打开开发人员工具

在 Chrome 浏览器中，按 F12 或 Ctrl + Shift + I 打开开发人员工具。
选择 Sources 面板，这里可以查看和调试网页的源代码。

# 3.2 设置断点

断点是暂停执行代码的特定位置，可以设置断点来检查代码的运行状态。

在 Sources 面板中，找到并打开需要调试的 JavaScript 文件。
点击行号，设置断点。设置断点后，当代码执行到该行时会自动暂停。

# 3.3 单步运行

在断点处暂停后，可以使用单步运行功能逐行执行代码，观察代码的执行情况。

Step Over (F10)：执行下一行代码，但不会进入函数内部。
Step Into (F11)：进入函数内部，逐行调试函数内部代码。
Step Out (Shift + F11)：执行完当前函数，返回到调用该函数的代码行。

# 3.4 观察变量

在调试过程中，可以观察变量的值。

在暂停状态下，Scope 视图会显示当前作用域内的变量及其值。
Watch 视图可以添加表达式，实时查看表达式的值。
Console 面板允许手动输入 JavaScript 表达式，立即查看结果。

# 4. 示例

以下是一个简单的示例，展示如何使用 console.log() 和开发人员工具进行调试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调试示例</title>
    <script type="text/javascript">
        // 定义一个计算两个数之和的函数
        function calculateSum(a, b) {
            console.log("calculateSum 被调用，参数为:", a, b);
            var sum = a + b;
            console.log("和为:", sum);
            return sum;
        }

        // 主函数，页面加载时执行
        function main() {
            var num1 = 5;
            var num2 = 10;
            var result = calculateSum(num1, num2);
            console.log("结果为:", result);
        }

        // 页面加载完成后调用主函数
        window.onload = main;
    </script>
</head>
<body>
    <h1>调试示例</h1>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

打开开发人员工具，进入 Sources 面板。
找到并打开包含 calculateSum 函数的 JavaScript 文件。
在 calculateSum 函数的第一行设置断点。
刷新页面，程序会在断点处暂停。
使用单步运行功能逐行执行代码，观察变量的值。

编辑此页

上次更新: 2025/01/25, 22:32:05

← 函数 DOM→