提示：不同类型的项目需要不同的配置文件，这里以基于React-Create-App脚手架搭建的React项目为例。

1. 启动配置

1. 在运行和调试中点击“创建launch.json文件”

2. 选择调试器 Web应用（Chrome）

1. 项目根目录会生成.vscode/launch.json

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "针对 localhost 启动 Chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}"
      }
  ]
}

type：调试环境的具体类型

request：调试模式，launch 启动另外的应用（前端开发常用），attach 附加到一个正在运行的进程上进行调试

name：调试任务的名称，用于在下拉列表中展示

url：调试的url地址

webRoot：指定代码的根目录，workspaceFolder代表当前项目的绝对路径

1. 对配置文件launch.json进行修改

修改url，使用creact-create-app默认端口号3000

修改webRoot的值，定位到更具体的src目录

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

2. 调试操作

从左到右依次是：

1. 继续/暂停（F5）：执行到下一个断点

2. 逐过程（F10）：从断点处执行单步调试

在第一步断点处停顿，点击逐过程，会运行到下一行

1. 单步调试（F11）：进入函数内部

在第一步断点处停顿，点击单步调试，会进入到函数体内部

1. 单步跳出：跳出函数内部

2. 重启

3. 结束

3. 增加断点

添加一个普通断点，最左侧行号处，点击添加断点

也可以在JS代码中设置断点，关键字：debugger

debugger // 会在这里断点
console.log('debugger')

4. 条件断点

添加一个条件断点，符合条件断点才会生效，条件可使用当前代码上下文中的变量。

5. 添加记录点

添加一个日志打印，打印当前代码环境的变量，不会break到调试器中，可以代替console.log。这里打印变量 i 的值

6. 内联断点

只有当执行到达与内联断点关联的列时，才会命中内联断点。当调试在一行中包含多条语句的小型代码时很有用，例如for循环：