浏览器调试实战一（基础篇）

浏览器调试实战一（基础篇）

工欲善其事，必先利其器。最近在写代码的时候越发觉得不是代码有多难，而是当代码出了问题该如何调试，如何追溯本源，这才是最难的。响应这个要求，我决定写一个关于调试实战系列。本来不打算写这个基础篇章，为了整个的完整性。（不喜勿喷）所以示例在以下环境通过：

• 浏览器：Chrome
• JavaScript 调试工具：Chrome DevTools

基本调试技巧

1. 使用 console.log 输出信息

console.log 是 JavaScript 中常用的调试工具，它可以将信息输出到浏览器的控制台中。例如：

console.log("Hello, world!");

这行代码将在控制台中输出 "Hello, world!"。

2. 使用 debugger 语句中断代码执行

debugger 语句可以在代码的任何位置中断代码的执行。当代码执行到 debugger 语句时，浏览器会暂停执行，并在控制台中打开调试器。例如：

debugger;

这行代码将中断代码的执行，并在控制台中打开调试器。

3. 使用 Chrome DevTools 进行 JavaScript 调试

Chrome DevTools 是 Chrome 浏览器内置的 JavaScript 调试工具。它提供了丰富的功能，可以帮助我们调试 JavaScript 代码。例如：

• 断点： 断点可以让我们在代码的特定位置暂停代码的执行。
• 堆栈跟踪： 堆栈跟踪可以让我们看到代码执行的调用栈，并定位到代码出错的位置。
• 变量检查器： 变量检查器可以让我们检查变量的值，并修改变量的值。

如何使用 Chrome DevTools 进行 JavaScript 调试

1. 打开 Chrome DevTools

有以下几种方法可以打开 Chrome DevTools：

• 在 Chrome 浏览器中，按 F12 键。
• 在 Chrome 浏览器中，右键单击页面上的某个元素，然后选择 "检查"。
• 在 Chrome 浏览器中，单击菜单栏中的 "更多工具"，然后选择 "开发者工具"。

2. 选择 "Sources" 面板

在 Chrome DevTools 中，选择 "Sources" 面板。该面板显示了当前页面的源代码。

3. 设置断点

要设置断点，请单击源代码行号旁边的空白处。该行号将变为蓝色，表示该行代码已设置了断点。

4. 启动调试

要启动调试，请单击 "Sources" 面板中的 "播放" 按钮。代码将开始执行，并且将在断点处暂停。

5. 检查变量

要检查变量的值，请将鼠标悬停在变量名上。变量的值将显示在变量检查器中。

6. 修改变量的值

要修改变量的值，请右键单击变量名，然后选择 "Set value"。在弹出的对话框中，输入新的值，然后单击 "Enter" 键。

7. 继续调试

要继续调试，请单击 "Sources" 面板中的 "继续" 按钮。代码将继续执行，直到下一个断点或代码执行结束。

总结

本篇文章介绍了基本调试技巧，例如使用 console.log 和 debugger 语句。通过 Chrome 调试器进行 JavaScript 调试，以及如何使用断点和堆栈跟踪。这些技巧可以帮助我们快速定位和解决代码中的问题。