如何在Chrome或Safari浏览器中设置缩小的JS功能断点

当你需要调试前端页面上的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行设置一个断点来调试该函数。

function add(x, y) {
    debugger; // 设置断点
    return x + y;
}

console.log(add(2, 3)); // 执行函数

当你在Chrome或S

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14267