前端调试指南

1. 调试 nodejs(后端)

1.1 示例配置

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "launch programe",
      "program": "${workspaceFolder}/app.js"  // 指定入口文件
    },
  ]
}

其中 type, request, program 须配置正确。按f5进入调试模式：

此时 vscode terminal 打印：

/Users/jpsong/.nvm/versions/node/v8.9.4/bin/node --inspect-brk=20746 app.js Debugger listening on ws://127.0.0.1:20746/6e715eb9-7654-4125-8e3a-44b2729d5de5 Debugger attached.

即按f5等同于执行 node --inspect-brk=20746 app.js，(但是有区别，待会讲)。

1.2 --inspect

查看 -- inspect,(包含远程调试) 相关知识得知：

• 当用 --inspect 启动nodejs应用时，会开启一个调试客户端进程，默认位于 127.0.0.1:9229

• 安全问题，由于调试客户端进程能完全访问node的运行环境，这样就有可能通过端口植入恶意代码到node进程，因此在公网或内网环境下暴露调试端口是有危害的

• 访问调试客户端的几种方式，node-inspect, chrome devtools 55+, vscode 1.10+

1.3 命令行参数

--inspect: 开启调试客户端,但是此时不能检测到 vscode打的断点(似乎没有理由能监听到), 会一直执行下去所以好像没啥用。 --inspect-brk: 开启调试客户端，同时在代码第一行就停止下来。所以在 vscode 里，按f5调试的参数是 --inspect-brk

// 指定host和端口 --inspect-brk=[host:port] --inspect=[host:port]

1.4 chrome://inspect

通过node --inspect-brk app.js，在浏览器中输入chrome://inspect,通过 Devices => Open Dedicated DevTools for Node或者 Target 进入调试页面。

通过以上配置再按f5进入调试模式，这种方式可以在vscode打断点(但是不能在浏览器中调试),可以在 vscode 中调试。

区别： 即 f5 与 --inspect-brk 的区别在于，f5由于在vscode中，所以可以在vscode中打断点。而 --inspect-brk 只能在 chrome-devtool中断点调试。

2. 调试前端 React

查看vscode-debugger相关介绍： 首先在vscode下载 debugger for chrome 插件，然后配置 launch.json,其中 request字段有两种: launch 和 attach。

官方的解释是：如果已经在浏览器打开了应用，那么可能就不是用 "launch",因为已经存在浏览器实例了，这时候应该 "attach"。另一方面，如果是在本地server的环境下，应该用"launch".

简单解释："launch"用于调试后端代码，"attach"用于调试前端代码,支持vscode断点，同时调试之前需要将该服务启动，并在浏览器中访问该URL，以便于'attach'到。

2.1 示例配置

{
  "version": "0.2.0",
  "configurations": [      // 支持任意多项配置， 会在按f5之后再进行选择
    {
      "type": "node",
      "request": "launch",
      "name": "launch programe",
      "program": "${workspaceFolder}/server/app.js"  
    },
    {
      "type": "chrome",
      "request": "attach",        // attach方式
      "name": "attach to chrome",
      "port":9222,                 // 该端口取决于你命令行启动浏览器时的参数， --remote-debugging-port=9222
      "url":"http://localhost:1234",  // 取决于在浏览器中打开的url，如果打开的url为http://localhost:1234/#/123,则该值也应该是http://localhost:1234/#/123
      "webRoot":"${workspaceFolder}"
    }
  ]
}

2.2 步骤

1. 命令行启动浏览器 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

2. 配置 .vscode/launch.json

   {
   "version": "0.2.0",
   "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url":"http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
   ]
   }

3. (可选)浏览器打开 http://localhost:9222/ 检查是否正常

4. npm start 启动项目

5. 在浏览器访问该项目，(确保attach之前，浏览器中已经存在窗口)

6. vscode f5启动调试. (必须先启动浏览器再启动项目)。

3. 远程调试后端代码

前端代码的运行环境是浏览器，所以不存在远程调试前端代码的情况，毕竟前端代码都是下载到本地然后执行的。

node官方教程中提到有 --inspect=[host:port] 的参数, [host:port]是调试关键 ,下面是开启远程调试的步骤:

1. 在远程服务器用以下命令启动服务 node --inspect=0.0.0.0:9229 app.js，即能允许该服务被远程调试。

2. 在 chrome://inspect Device 中，在Discover network targets配置远程服务器的 IP+端口 如 10.12.32.21:9229,即，使得chrome能发现 10.12.32.21:9229。

3. 即可在当前 remote target[10.12.32.21]中进入远程服务器的 dev tools 调试界面，可使用 ctrl shift p 快捷键搜索文件进行打断点。

此时无论是通过ip访问远程服务还是域名访问，均会触发该断点。

参考资料

node-debugger，--inspect参数，远程调试 vscode-debugger, launch与 attach 前端外刊评论，NODE调试指南