前端打断点方式

1. 使用 debugger 关键字

在代码中添加 debugger; 语句会强制浏览器在执行到该行时暂停，前提是开发者工具处于打开状态。

function test() {
  const x = 10;
  debugger; // 程序在这里暂停
  const y = x * 2;
  console.log(y);
}
test();

• 打开浏览器的开发者工具（通常按 F12 或右键选择“检查”）。

• 运行代码时，浏览器会在 debugger; 所在行暂停。

 

2. 使用开发者工具的断点功能

在浏览器中（如 Chrome 或 Edge）的开发者工具中，你可以直接设置断点。

操作步骤：

1. 打开浏览器开发者工具。

2. 转到“Sources”选项卡。

3. 找到并打开要调试的 JavaScript 文件。

4. 点击文件中的行号来设置断点。

 

3. 条件断点

通过条件断点，你可以指定在某个条件满足时暂停执行，而不是每次都暂停。

示例：

1. 打开开发者工具。

2. 在“Sources”中找到目标代码并右键单击行号。

3. 选择“Add conditional breakpoint”。

4. 输入条件（如 x > 5）。

 

4. 使用控制台的 debug 方法

可以通过在控制台调用 debug(fn) 方法，在函数调用时设置断点。

示例代码：

function test() {
  const x = 10;
  const y = x * 2;
  console.log(y);
}

debug(test); // 在控制台中调用此方法，函数执行时会暂停
test();

 

5. 动态打断点

你可以通过浏览器的开发者工具中的“Watch”或“Breakpoints”功能，根据 DOM 操作或事件动态设置断点。

示例：

• 右键单击页面元素 → 选择“Inspect” → 在监听器（Event Listeners）中设置断点。

 

6. 使用 VS Code 调试

如果你在 VS Code 中运行代码，可以配置调试器。

操作步骤：

1. 在 VS Code 中打开你的项目。

2. 配置调试任务（launch.json 文件）：

3. 在代码行号处点击添加断点。

4.  按 F5 启动调试。

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Launch Program",
         "skipFiles": ["<node_internals>/**"],
         "program": "${workspaceFolder}/index.js"
       }
     ]
   }

7. DOM 改动或事件断点

开发者工具允许在 DOM 改动或事件触发时自动暂停执行。

示例：

1. 右键点击页面元素。

2. 选择“Break on” → 选择具体条件（如 subtree modifications）。