如何在vscode中调试代码? - HelloWorld开发者社区

调试前端代码

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中找到需要添加断点的代码行，点击行号左侧添加断点。
如何在vscode中调试代码?

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

调试前端代码（使用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
如何在vscode中调试代码?

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

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

注意：打开这个地址的chrome窗口，目标参数必须有remote-debugging-port=9222，否则会报如下错误：
如何在vscode中调试代码?

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

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

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启动的代码进行调试。

上下文

// package.json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

1 添加调试配置

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debugging webpack",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      // 对应到你想调试package.json中的scripts脚本
      // 比如想调试上面的start流程，就填start
      // npm start这个命令不用填run
      // 其他自定义的命令需要加run
      // 比如你的scripts中命令为npm run deploy，这里就要填["run", "deploy"]
      "runtimeArgs": ["start"],
    }
  ]
}

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

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