1.Chrome调试调试指的是在脚本中查找并修复错误的过程。所有现代浏览器和大多数其他环境都支持调试器——开发人员工具中的一个特殊用户界面，使调试更容易。它还允许我们单步执行代码以查看实际发生的情况。这里我们将使用Chrome（谷歌浏览器），因为它具有大多数其他浏览器具有类似功能的足够功能。2.Sources面板在你的Chrome版本上可能看起来有点不同，但它应该仍然在明显的地方。在Chrome中打开示例页面。使用快捷键F12（Mac：Cmd+Opt+I）打开开发者工具。选择源面板。如果您是第一次这样做，您应该会看到类似这样的内容：单击箭头所指的切换按钮将打开文件列表选项卡。让我们在预览树中单击并选择hello.js。这应该看起来像这样：Sources面板包含三个部分：FileNavigator区域列出了HTML、JavaScript、CSS和附加到该页面的其他文件，包括图像。Chrome扩展程序也会显示在这里。代码编辑器（CodeEditor）区域显示源代码。JavaScript调试区域用于调试，我们将很快对其进行探索。现在您可以再次单击切换按钮以隐藏资源列表，为代码腾出一些空间。3、控制台（Console）如果我们按下Esc，下面会出现一个控制台，我们可以输入一些命令，回车执行。该语句执行后，其执行结果将显示在下方。例如，1+2将返回3，而hello("debugger")函数不返回任何内容，因此结果未定义：4.断点让我们看看示例页面上发生了什么。在hello.js中，点击第4行。是的，只需点击数字“4”，而不是代码。恭喜！你已经设置了一个断点。现在，也单击第8行的数字。它应该看起来像这样（蓝色是您应该单击的地方）：断点是调试器将自动暂停JavaScript执行的地方。当代码暂停时，我们可以检查当前变量、在控制台上执行命令等等。换句话说，我们可以调试它。我们总能在右侧面板中找到断点列表。当我们在多个文件中有许多断点时，这非常有用。它允许我们：快速跳转到代码中的断点（通过单击右侧面板中的相应断点）。通过取消选中断点来暂时禁用相应的断点。通过右键单击并选择删除来删除断点。……ETC。条件断点Conditionalbreakpoints右键单击??行号可以创建条件断点。仅当给定表达式为真（即满足条件）时才会触发。当我们需要在某些变量值或参数上停止程序执行时，这种调试方法很有用。5.调试器命令我们也可以使用调试器命令来暂停代码，像这样：短语);}当我们在代码编辑器中并且不想切换到浏览器以在开发人员工具中找到脚本来设置断点时，这很方便。6.暂停和查看在我们的示例中，hello()函数在页面加载期间被调用，因此激活调试器的最简单方法（在我们已经设置断点之后）是-重新加载页面。因此，让我们按F5（Windows、Linux）或Cmd+R（Mac）。设置断点后，程序在第4行停止执行：打开右侧（箭头指向的位置）的信息下拉列表。这允许您查看代码的当前状态：Watch(--显示任何表达式的当前值。您可以单击加号+并输入一个表达式。调试器将随时显示其值，并在执行期间自动重新计算表达式。调用堆栈(CallStack)-显示嵌套的调用链。此时调试器在hello()的调用链中，由index.html中的脚本调用（这里没有函数，所以显示“anonymous”）如果点击一个栈项，调试器会跳转到相应的代码，并查看其所有变量。范围-显示当前变量。local显示了当前函数中的变量，在源码中也可以看到它们的值高亮显示。Global显示全局变量（不在任何函数中）。还有一个this关键字，我们还没有学过，但是我们很快就会了解它。七、跟踪执行现在是跟踪脚本的时候了。在右侧面板的顶部是一些关于跟踪脚本的按钮。让我们使用它们。——“继续”：继续执行，快捷键F8。继续执行。如果没有其他断点，程序将继续执行，调试器将不再控制程序。我们点击之后，会看到这样的情况：继续执行，执行到say()函数中的另一个断点，然后停在那里。看一下右侧的“调用堆栈”。它添加了一条呼叫消息。我们现在在say()里面。——“下一步（Step）”：运行下一条命令，快捷键F9。运行下一条语句。如果我们现在单击它，将显示警报。依次点击这个按钮，整个脚本的所有语句都会一条一条执行。——“Stepover”：运行下一条指令，但不会进入功能，快捷键F10。类似于前面的命令“下一步（步骤）”，但如果下一条语句是函数调用，则行为不同。这里的函数指的是：不是alert之类的内置函数，而是我们自己写的函数。“Step”命令进入函数内部并在第一行暂停执行，而“Stepover”命令不可见地执行函数调用，跳过函数内部。函数执行后立即暂停执行。如果我们对函数的内部执行不感兴趣，则此命令很有用。——“步入”，快捷键F11。类似于“下一步（步骤）”，但在异步函数调用的情况下表现不同。如果你只是学习JavaScript，你可以忽略这个区别，因为我们还没有使用过异步调用。稍后，请记住“Step”命令会忽略异步操作，例如setTimeout（计划的函数调用），它会在一段时间后执行。而“进入”将进入代码并等待（如果需要）。有关详细信息，请参阅DevTools手册。——“跳出”：继续执行到当前函数结束，快捷键Shift+F11。继续代码执行并在当前函数的最后一行停止。当我们使用不小心进入嵌套调用时非常方便，但是我们对这个函数不感兴趣，想尽可能的一直执行到最后。-启用/禁用所有断点。该按钮不影响程序执行。只是批量操作断点开/关。-启用/禁用错误时脚本执行的自动暂停。当启用此功能并打开开发人员工具时，脚本中的任何错误都会导致脚本执行自动暂停。然后我们可以分析变量，看看哪里出了问题。因此，如果我们的脚本由于错误而挂起，我们可以打开调试器，启用此选项并重新加载页面以查看崩溃的位置以及上下文。Continuetohere右键单击??代码中的一行，然后在显示的上下文菜单中单击名为“Continuetohere”的非常有用的选项。当你想向前移动很多步到某一行，但懒得设置断点时非常方便。8.日志记录想向控制台输出一些东西？console.log功能可以满足你。例如：输出0到4的值到控制台：//打开控制台查看for(leti=0;i<5;i++){console.log("value",i);}普通用户可以看到不是这个输出，它在控制台里面。要查看它-打开开发人员工具中的控制台选项卡，或在其他选项卡之一中按Esc键：这将在下方打开一个控制台。如果我们的代码中有足够的日志记录，我们可以从日志中看到刚刚发生的事情，而无需诉诸调试器。九。总结如我们所见，有3种暂停脚本的方法：断点。调试器语句。错误（如果开发人员工具已打开且按钮已打开）。当脚本执行暂停时，我们可以调试-检查变量，跟踪代码以查看执行出错的地方。开发人员工具中的选项比本文中介绍的要多得多。如需完整手册，请搜索chrome-devtools。本章的内容足以让你开始代码调试，但之后，尤其是在你做了很多关于浏览器的东西之后，建议你查看上面开发者工具的更高级功能。对了，你也可以点击开发者工具的其他地方看看会显示什么。这可能是您学习开发人员工具的最快方式。不要忘记右键单击和上下文菜单。【编者推荐】2021年值得关注的7大安全趋势，什么是RDB和AOF？在本文中了解Redis持久化！洞察：VUCA时代数字人才管理的思考隐私泄露到底有多严重？只是聊天记录和熟悉那么简单吗？数据时代将刷新你的认知
