调试是前端开发中最重要的技能之一。当我们的应用程序在浏览器中出现错误时，我们需要知道它们在何处发生，并找到解决问题的方法。设置 JavaScript 断点是一个非常有用的工具，可以帮助我们实现这一目标。本文将详细介绍如何在 Chrome 浏览器中设置 JavaScript 断点，并提供示例代码以帮助您更好地理解。
步骤1：打开 Chrome 开发者工具
首先，我们需要打开 Chrome 开发者工具。您可以使用快捷键 Ctrl + Shift + I（Windows 和 Linux）或 Cmd + Opt + I（Mac）打开它，也可以右键单击页面中任何元素并选择“检查”选项。
步骤2：找到要设置断点的 JavaScript 代码
然后，我们需要找到要设置断点的 JavaScript 代码。您可以在“Sources”面板中浏览所有 JavaScript 文件，并单击行号旁边的空白区域设置断点。您还可以通过添加关键字 debugger 在代码中设置断点。例如：
function foo() {
let x = 10;
debugger;
console.log(x);
}在运行此函数时，它将在 debugger 关键字处停止执行，等待您进一步操作。
步骤3：在代码中设置断点
要在代码中设置断点，请单击行号旁边的空白区域。该行将变为黄色，表示已经设置了断点。您还可以通过右键单击代码行并选择“添加断点”选项来设置断点。
步骤4：运行应用程序并调试代码
现在，我们已经准备好运行我们的应用程序并开始调试代码了。当应用程序遇到断点时，它将暂停执行，并转到“Sources”面板中的相应函数。您可以使用此时在“Scope”和“Watch”面板中查看当前变量的值。还可以使用“Step Over”、“Step Into”和“Step Out”等按钮逐步执行代码，并查看每个语句的效果。
示例代码
以下是一个简单的示例代码，演示如何使用 JavaScript 断点：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----------------
-------
------
------- --------------------- -----------
--------
-------- ----- -
--- - - ---
---------
---------------
-
---------
-------
-------当单击“Click me”按钮时，它将调用 foo() 函数并触发断点。您可以使用 Chrome 开发者工具查看变量 x 的值，并逐步执行代码以查看每个语句的效果。
结论
设置 JavaScript 断点是一种非常有用的调试工具，可以帮助我们更轻松地找到并解决应用程序中的错误。在 Chrome 开发者工具中设置断点非常容易，并且可以让您快速定位代码问题。我希望这篇文章可以帮助您更好地理解如何在 Chrome 中设置 JavaScript 断点，并提高您的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8094