前端调试指南

Question

1. 调试 Node.js 后端

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 访问远程服务还是域名访问，均会触发该断点。