本篇依然来自于我们的 《前端周刊》 项目！
由团队成员 0bipinnata0 翻译，欢迎大家 进群 持续追踪全球最新前端资讯!!
浏览器 DevTools（又称开发者工具） 为 Web 开发者提供了强大的开发功能。它们支持快速实时编辑、测试和调试软件。最棒的是，几乎所有现代浏览器都内置了 DevTools！
在本系列的前两部分中，我们探索了 Inspector （一种用于实时检查和编辑 HTML 和 CSS 的工具）和 Console（控制台） ，它提供了一个灵活的环境，可以直接在浏览器中运行 JavaScript 命令并排查问题。在第三部分中，我们将关注 DevTools 的另一个重要功能：Debugger。
访问检查器
有两种简单的方法可以打开浏览器 DevTools 来访问检查器：
-
右键单击网页上的任意元素，然后点击
inspect。这将弹出浏览器 DevTools。 -
您可以使用以下键盘快捷键：
-
Windows/Linux：按
Ctrl + Shift + I或F12 -
Mac：按
Cmd + Option + I
如果您正确完成了所有这些操作，您应该会看到类似以下内容的内容：
介绍"源代码"标签页
在这一系列 DevTools 的第三部分中，我们将重点介绍 Sources 标签页------一个允许开发者在浏览器中直接调试代码的工具。这使得您可以在网站的 JavaScript 运行时暂停并逐步执行代码，设置断点，并实时查看变量。
查看项目源文件
在 Sources 标签页中，我们首先可以查看网页的文件夹和文件结构。这可以通过左侧的预览窗格完成。它类似于任何普通 IDE 的目录视图。
您可以展开文件夹，找到您的 JavaScript 文件，打开它们以查看页面上运行的代码。您还将看到与您的站点相关的 CSS 和其他资源。
开始调试时，请找到并打开包含您要检查代码的文件。这将让您直接在浏览器中进行调试。
设置断点
现在我们已经找到了要调试的文件。让我们学习如何设置断点并直接调试代码。
要设置断点，可以在您想要设置断点的行号旁边的区域点击。在我们的示例中，让我们在 writeToConsole() 函数的第 9 行设置一个断点。
这意味着每当我们的网页执行这段代码时，它将启动我们内置的调试器。在我们的情况下，这会在我们在文本字段中提交一些文本时触发。让我们看看会发生什么。
调试代码
我们看到，当我尝试触发提交时，浏览器会自动在我们设置断点的代码行上冻结网页。我们现在可以看到调试视图。右侧显示了调试工具，允许我们逐行调试代码。
类似于 IDE，我们可以在右上角看到不同的工具。从左到右，它们是如何分解的。
-
▶️ (Resume) - 恢复我们网页的执行
-
⏭️ Step Over -- 执行当前代码行并移动到下一行。
-
⬇️ Step Into -- 执行当前代码行，然后进入该行调用的任何函数。
-
⬆️ Step Out -- 退出您已进入的函数。
Step Over 单步跳过
在我们的情况下，我们将使用单步跳过功能来运行代码中的每一行。让我们来看一个例子！
我们首先逐行执行代码。在第一行，我们检查输入文本是否为空字符串。因为我们传入的是字符串"test"，if 语句中的条件不满足。因此，当我们逐行执行到该行时，调试器会完全跳过 if 块。
接下来，我们来到了 console.log 语句。如果我们再单步执行一次，可以看到该行代码被执行，并且其输出出现在控制台中。在右侧的面板中，我们还可以检查当前作用域内的变量及其赋值。
Step in and out 进出调试
现在我们来演示一下使用"单步进入"和"单步跳出"功能的示例。我们将更新代码，使用不同的函数调用我们的 writeToConsole() ，并在该处设置断点。
在本例中，当我们运行调试器时，它会在调用 writeToConsole() 处暂停。当我们单步进入函数调用时，调试器会进入 writeToConsole() 函数本身。我们现在可以像往常一样继续单步调试代码。
既然进入了函数内部，我们也可以选择 Step Out。这样会退出 writeToConsole() 函数，并返回到 testNestedFunction() 周围的代码块。
这些只是如何有效使用调试器逐行运行代码的一些示例。它提供了一种强大的方式，在浏览器中直接进行调试，可以轻松地将其集成到开发流程中，以便实时测试，从而提高整体效率。