用 Chrome 专家调试法，让你快速找到 Bug！

当您的代码没有按照预期执行的时候，您是否还在用 console.log 来进行调试？如果是，那这篇文章就是为您准备的。 我写这篇文章的目的是让您了解 Chrome 开发工具提供的高效工具，让您可以更好、更快地调试 Javascript 代码。

当代码出现 bug 或没有按照预期执行时，最常见的调试方法是使用 console.log 来输出变量的值，然后逐行检查代码以找出问题所在。这种方法虽然简单，但效率低下，尤其是在代码量较大的情况下。

Chrome 开发工具提供了许多强大的工具，可以帮助您更有效地调试代码。这些工具包括：

• 控制台：控制台是一个交互式工具，允许您在浏览器中执行 JavaScript 代码并查看结果。您还可以使用控制台来检查变量的值，设置断点，并查看堆栈跟踪。
• 断点：断点允许您在代码的特定行处暂停执行，以便您检查变量的值并了解代码是如何执行的。
• 堆栈跟踪：堆栈跟踪显示了导致当前错误的函数调用序列。这可以帮助您了解错误是如何发生的，并找到导致错误的代码行。
• Profiler：Profiler 可以帮助您分析代码的性能，并找出导致性能瓶颈的代码行。
• 内存分析：内存分析可以帮助您分析代码的内存使用情况，并找出导致内存泄漏的代码行。
• 代码覆盖率：代码覆盖率工具可以帮助您了解代码的哪些部分被执行了，哪些部分没有被执行。这可以帮助您找出未被测试的代码，并确保您的代码具有足够的测试覆盖率。

通过使用这些工具，您可以更快地找到 bug 并修复它们，从而提高您的开发效率。

下面，我们将详细介绍如何使用 Chrome 开发工具进行调试。

使用控制台

控制台是一个交互式工具，允许您在浏览器中执行 JavaScript 代码并查看结果。您还可以使用控制台来检查变量的值，设置断点，并查看堆栈跟踪。

要打开控制台，您可以使用以下方法之一：

• 在 Chrome 浏览器中，按 Ctrl + Shift + J (Windows) 或 Cmd + Option + J (Mac)。
• 在 Chrome 开发工具中，单击“控制台”选项卡。

控制台分为三个部分：

• 输入框：用于输入 JavaScript 代码。
• 输出区域：显示执行 JavaScript 代码的结果。
• 调用堆栈：显示导致当前错误的函数调用序列。

要使用控制台来检查变量的值，您可以使用以下方法之一：

• 在输入框中输入变量的名称，然后按 Enter 键。
• 在输出区域中右键单击变量的值，然后选择“在范围中检查”。

要使用控制台来设置断点，您可以使用以下方法之一：

• 在代码编辑器中，将鼠标悬停在要设置断点的那行代码上，然后单击行号旁边的蓝色圆点。
• 在控制台中，单击“源”选项卡，然后在要设置断点的那行代码上右键单击，然后选择“添加断点”。

要使用控制台来查看堆栈跟踪，您可以使用以下方法之一：

• 在控制台中，单击“堆栈跟踪”选项卡。
• 在代码编辑器中，将鼠标悬停在导致错误的那行代码上，然后单击行号旁边的红色圆点。

使用断点

断点允许您在代码的特定行处暂停执行，以便您检查变量的值并了解代码是如何执行的。

要设置断点，您可以使用以下方法之一：

• 在代码编辑器中，将鼠标悬停在要设置断点的那行代码上，然后单击行号旁边的蓝色圆点。
• 在控制台中，单击“源”选项卡，然后在要设置断点的那行代码上右键单击，然后选择“添加断点”。

设置断点后，当代码执行到该行时，执行将暂停，您可以在控制台中检查变量的值并了解代码是如何执行的。

要继续执行代码，您可以单击控制台中的“继续”按钮。

使用堆栈跟踪

堆栈跟踪显示了导致当前错误的函数调用序列。这可以帮助您了解错误是如何发生的，并找到导致错误的代码行。

要查看堆栈跟踪，您可以使用以下方法之一：

• 在控制台中，单击“堆栈跟踪”选项卡。
• 在代码编辑器中，将鼠标悬停在导致错误的那行代码上，然后单击行号旁边的红色圆点。

堆栈跟踪将显示导致错误的函数调用序列。您可以单击堆栈跟踪中的任何一行以转到该函数的代码。

使用 Profiler

Profiler 可以帮助您分析代码的性能，并找出导致性能瓶颈的代码行。

要使用 Profiler，您可以使用以下方法之一：

• 在 Chrome 开发工具中，单击“Profiler”选项卡。
• 在控制台中，输入以下命令：

chrome.devtools.inspectedWindow.Profiler.start()

Profiler 将开始记录代码的性能数据。

当您运行代码时，Profiler 将收集以下数据：

• CPU 使用情况
• 内存使用情况
• 网络请求
• 事件循环

您可以使用 Profiler 来分析这些数据，并找出导致性能瓶颈的代码行。

使用内存分析

内存分析可以帮助您分析代码的内存使用情况，并找出导致内存泄漏的代码行。

要使用内存分析，您可以使用以下方法之一：

• 在 Chrome 开发工具中，单击“内存”选项卡。
• 在控制台中，输入以下命令：

chrome.devtools.inspectedWindow.HeapProfiler.startTrackingHeapObjects()

内存分析将开始记录代码的内存使用情况。

当您运行代码时，内存分析将收集以下数据：

• 内存使用情况
• 分配的对象
• 释放的对象

您可以使用内存分析来分析这些数据，并找出导致内存泄漏的代码行。

使用代码覆盖率

代码覆盖率工具可以帮助您了解代码的哪些部分被执行了，哪些部分没有被执行。这可以帮助您找出未被测试的代码，并确保您的代码具有足够的测试覆盖率。

要使用代码覆盖率工具，您可以使用以下方法之一：

• 在 Chrome 开发工具中，单击“覆盖率”选项卡。
• 在控制台中，输入以下命令：

chrome.devtools.inspectedWindow.Profiler.startPreciseCoverage()

代码覆盖率工具将开始记录代码的执行情况。

当您运行代码时，代码覆盖率工具将收集以下数据：

• 已执行的代码行
• 未执行的代码行

您可以使用代码覆盖率工具来分析这些数据，并找出未被测试的代码。

总结

通过使用 Chrome 开发工具提供的强大工具，您可以更快地找到 bug 并修复它们，从而提高您的开发效率。