如何在vscode中调试代码?

调试前端代码

1 在项目根目录下面创建./vscode/launch.json文件，内容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      // 填写你本地启动项目的地址
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

2 启动你的本地项目
示例npm start

3 按f5启动调试
vscode会自动打开浏览器，然后跳转至上述配置中url指向的地址。

4 添加断点
在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。

5 刷新浏览器，当运行到断点处，代码就会停住，然后你就可以开始调试你的代码了。

调试前端代码（使用attch模式）

默认情况下，使用的是launch模式，也就是vscode会自动打开一个浏览器窗口进行调试，不过有时候这并不是我们想要的。我们可能已经运行了一个窗口，然后想对这个已存在的窗口进行调试，这种情况就可以使用attach模式。

步骤：
1 在项目根目录下面创建./vscode/launch.json文件，内容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      // 默认用9222，也可以用其他，只要保证和--remote-debugging-port设置的端口一致就行了（后面会涉及）
      "port": 9222,
      // 填写你本地启动项目的地址
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

2 给chrome浏览器快捷方式的目标字段添加参数
参数为--remote-debugging-port=9222（关键步骤）

完整的值会像这样：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3 启动你的本地项目
示例npm start

4 按f5启动调试
vscode会关联到已经打开的项目地址，也就是上述配置中url指向的地址。

注意：打开这个地址的chrome窗口，目标参数必须有remote-debugging-port=9222，否则会报如下错误：

5 添加断点
在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。

6 刷新浏览器，当运行到断点处，代码就会停住，然后你就可以开始调试你的代码了。

program方式调试node代码

1 添加调试配置

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging server.js",
      "type": "node",
      "request": "launch",
      // 指向你需要调试的文件，${workspaceFolder}为根目录
      "program": "${workspaceFolder}/server.js",
    }
  ]
}

2 在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。

3 按f5启动调试
vscode会直接进入第2步的断点处。

调试webpack构建流程

直接按照package.json中scripts的命令调试 比如下面的命令，相当于npm start，也就是对npm start启动的代码进行调试。

1 添加调试配置

// package.json
{
  "scripts": {
    "start": "react-app-rewired start"
  }
}

这里想调试上面的start流程，runtimeArgs就填start

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging webpack",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["start"],
    }
  ]
}

注意，由于npm start是一个特殊命令，不需要填写run。如果是你自己定义的命令，就需要了。

// package.json
{
  "scripts": {
    "gogogo": "react-app-rewired start"
  }
}

这里runtimeArgs就要加上run

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging webpack",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "gogogo"],
    }
  ]
}

2 在vscode中找到需要添加断点的代码行，点击行号左侧添加断点。
这里需要进入node_modules中，找到你想要断点的包中，添加断点。

3 按f5启动调试
vscode会直接进入第2步的断点处。

注意事项

启动的地址一直在处于加载中，可能是地址被vscode调试工具劫持了，尝试重启一下vscode看能否解决。