如何在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 刷新浏览器，当运行到断点处，代码就会停住，然后你就可以开始调试你的代码了。

调试node文件（webpack等）

1，添加启动命令

  // package.json
  "scripts": {
    "debugger": "node ./node_modules/webpack/bin/webpack --config webpack.config.js"
  },

2 调试配置

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug webpack",
      "type": "node",
      "request": "launch",
      "stopOnEntry": true,
      "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
      "args": ["--config", "./webpack.config.js"],
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

注意事项

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