当你需要调试前端页面上的JavaScript代码时，通常会使用调试工具来帮助你找到问题所在。然而，在某些情况下，你可能需要在一个较小的JavaScript功能上设置断点来分析代码的执行过程并找到错误。本文将详细介绍如何在Chrome和Safari浏览器中设置这样的断点，并提供示例代码。
Chrome浏览器
步骤1：打开开发者工具
在Chrome浏览器中，你可以通过菜单栏或快捷键来打开开发者工具。在菜单栏中，选择“更多工具”>“开发者工具”。或是使用快捷键 Cmd + Opt + I（MacOS）或 F12（Windows）来打开它。
步骤2：选择Sources选项卡
在开发者工具中，选择“Sources”选项卡。这个选项卡显示了页面上加载的所有脚本文件。
步骤3：定位要设置断点的代码
在“Sources”选项卡中，你可以看到页面上加载的所有脚本文件列表。找到你要设置断点的脚本文件，然后单击它以展开该文件。
接下来，找到要设置断点的代码行。你可以使用Ctrl + F（Windows）或Cmd + F（MacOS）在文件中查找特定的代码行。
步骤4：设置断点
在要设置断点的代码行左侧单击，会出现一个红色的圆点。这就是断点的标识。当你运行代码时，程序将在此处暂停执行。
步骤5：调试代码
运行代码后，程序将在设置的断点处停止执行。你可以使用开发者工具中的调试控制台来检查变量、执行代码行等操作。
Safari浏览器
步骤1：打开Web Inspector
在Safari浏览器中，你可以通过菜单栏或快捷键来打开Web Inspector。在菜单栏中，选择“开发”>“显示Web Inspector”。或是使用快捷键 Option + Cmd + I（MacOS）来打开它。
步骤2：选择Debugger选项卡
在Web Inspector中，选择“Debugger”选项卡。这个选项卡显示了页面上加载的所有脚本文件。
步骤3：定位要设置断点的代码
在“Debugger”选项卡中，你可以看到页面上加载的所有脚本文件列表。找到你要设置断点的脚本文件，然后单击它以展开该文件。
接下来，找到要设置断点的代码行。你可以使用Ctrl + F（Windows）或Cmd + F（MacOS）在文件中查找特定的代码行。
步骤4：设置断点
在要设置断点的代码行左侧单击，会出现一个蓝色的圆点。这就是断点的标识。当你运行代码时，程序将在此处暂停执行。
步骤5：调试代码
运行代码后，程序将在设置的断点处停止执行。你可以使用Web Inspector中的调试控制台来检查变量、执行代码行等操作。
示例代码
以下是一个简单的示例代码。它定义了一个函数，接受两个参数并返回它们的和。我们将在第3行设置一个断点来调试该函数。
-------- ------ -- -
--------- -- ----
------ - - --
-
------------------ ---- -- ----当你在Chrome或S
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14267