在js里怎么加断点

在JavaScript里添加断点的方法有多种，包括使用调试器语句、开发者工具手动添加断点、以及使用IDE等。 其中，调试器语句是一种非常有效的方式。你可以在代码中添加 debugger 语句，这将使浏览器自动在这一行暂停执行，从而允许你检查变量、执行步骤等调试操作。

一、使用 `debugger` 语句

什么是 `debugger` 语句

debugger 语句是JavaScript内置的调试工具。它相当于在代码中插入一个断点，当JavaScript引擎执行到这一行时，它将暂停执行，并让你可以检查当前的执行环境。这是最直接、最简单的方法之一。

如何使用 `debugger` 语句

你只需在想要暂停执行的地方插入 debugger;。例如：

function exampleFunction() {
    let a = 1;
    let b = 2;
    debugger; // 代码将在这里暂停
    let c = a + b;
    return c;
}

当你在浏览器中运行这段代码并打开开发者工具时，代码将暂停在 debugger 语句处，你可以检查变量 a 和 b 的值，单步执行代码等。

二、使用浏览器开发者工具

如何在Chrome中添加断点

打开开发者工具：在Chrome中，你可以按 F12 或 Ctrl+Shift+I 打开开发者工具。
找到源代码：切换到“Sources”面板，找到你想要调试的JavaScript文件。
添加断点：在源代码视图中，点击行号左侧的空白区域，即可添加一个断点。代码执行到这一行时会自动暂停。

如何在Firefox中添加断点

打开开发者工具：在Firefox中，按 F12 或 Ctrl+Shift+I 打开开发者工具。
找到源代码：切换到“Debugger”面板，找到你想要调试的JavaScript文件。
添加断点：在源代码视图中，点击行号左侧的空白区域，即可添加一个断点。

三、使用IDE调试工具

使用Visual Studio Code

安装扩展：首先，你需要安装“Debugger for Chrome”扩展。
配置启动文件：在项目根目录下创建 launch.json 文件，配置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

添加断点：在代码视图中，点击行号左侧的空白区域添加断点。
启动调试：按 F5 启动调试，Chrome会自动打开并加载你的应用，代码将在断点处暂停。

使用WebStorm

创建调试配置：在WebStorm中，点击右上角的“Edit Configurations”，添加一个新的JavaScript Debug配置。
添加断点：在代码视图中，点击行号左侧的空白区域添加断点。
启动调试：点击工具栏上的调试按钮，WebStorm会自动打开你的默认浏览器并开始调试。

四、调试Node.js应用

使用Node.js内置调试器

Node.js提供了一个内置的调试器，你可以通过以下命令启动：

node inspect app.js

使用Chrome DevTools调试Node.js

启动Node.js应用：使用 --inspect 或 --inspect-brk 启动你的Node.js应用。

node --inspect-brk app.js

打开Chrome DevTools：在Chrome中打开 chrome://inspect，点击“Open dedicated DevTools for Node”。
添加断点：在DevTools中打开你的源代码文件，点击行号左侧的空白区域添加断点。

五、使用其他调试工具

使用Redux DevTools调试React应用

如果你在使用Redux进行状态管理，可以使用Redux DevTools来调试你的应用。

安装扩展：在Chrome或Firefox中安装Redux DevTools扩展。
配置应用：在你的应用中配置Redux DevTools。

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(rootReducer, composeWithDevTools());

调试应用：打开Redux DevTools，你可以看到所有的动作、状态变化等信息。

使用React Developer Tools调试React应用

React Developer Tools是一个专门用于调试React应用的工具。

安装扩展：在Chrome或Firefox中安装React Developer Tools扩展。
调试应用：打开React Developer Tools，你可以看到组件树、组件状态和属性等信息。

通过这些方法，你可以在JavaScript中轻松地添加断点，从而更加有效地调试代码。无论是前端浏览器环境，还是后端Node.js环境，都有相应的工具和方法可供选择。