之前在小组中的一个分享，在这里记录下~
问题：使用launch.json 启动调试失败
问题.png
没能出现调试面板。
调试面板.png
launch.json文件如下：
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Egg",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"windows": { "runtimeExecutable": "npm.cmd" },
"runtimeArgs": [ "run", "debug"],
"console": "integratedTerminal",
"protocol": "auto",
"restart": true,
"port": 9229,
"autoAttachChildProcesses": true
}
]
}
"script": {
"debug": "era-cloud debug --env local",
}
了解一下 Visual Studio Code Node Debug & launch.json 配置
知识点1：VsCode debug :
VsCode代码编辑器为Node.js运行时提供了内置的调试支持。vs code nodejs-debugging
NodeJS 给我们提供了 Debugger 模块，内建客户端，通过 TCP 将命令行的输入传送到内建模块以达到调试的目的。
在VSCode中有三种方式调试方式：
1、 在内置的终端中使用 auto attach的方式
2、 直接使用debug 面板
3、 使用launch.json配置文件调试： 常用， 配置项全，适合复杂项目。
知识点2： Launch.json配置
launch.json存放在.vscode文件夹下。全部的设置项 https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md
核心是 runtimeExecutable 使用的命令，以及 runtimeArgs 参数，这里不需要 --inspect 了（IDE内部会处理）
-
必选字段
type：调试器类型。这里是 node(内置的调试器)，如果装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 php request：请求的类型，目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试；attach 就是附加到已经启动的进程开启 debug 模式并调试 name：下拉菜单显示的名字
request 字段，有两个值可以选择：launch 和 attach ， 它表示VS Code中核心的两种调试模式。
launch 指的是直接由编辑器启动（直接 fork 一个进程）；而 attach 表示服务已经启动，我们是 attach 到原来那个进程中，比如上面的 Chrome 调试。然后打上断点，执行就行了。
-
可选字段
program：可执行文件或者调试器要运行的文件 (launch) runtimeArgs：要传递给调试程序的参数 (launch) env：环境变量 (launch) cwd：当前执行目录 (launch) address：ip 地址 (launch & attach) port：端口号 (launch & attach) skipFiles：想要忽略的文件，数组类型 (launch & attach), 比如想绕过对node_modules中文件的调试 //"${workspaceRoot}/node_modules/**/*.js", processId：进程 PID (attach) runtimeVersion: 使用nvm 时 指定版本 eg: 10.19.0 restart：设置为 true，修改代码保存后会自动重启调试 runtimeExecutable：用什么命令执行 app.js，可以为 nodemon，默认是 node console：当点击停止按钮或者修改代码保存后自动重启调试，而 nodemon 是仍然在运行的，通过设置为 console 为 integratedTerminal 可以解决这个问题。 -
目录变量
${workspaceRoot}：当前打开工程的路径 ${file}：当前打开文件的路径 ${fileBasename}：当前打开文件的名字，包含后缀名 ${fileDirname}：当前打开文件所在的文件夹的路径 ${fileExtname}：当前打开文件的后缀名 ${cwd}：当前执行目录
知识点3：Node.js 调试技巧
1、expression ：表达式为true时 调试
2、Hit count: 命中次数
日志.png
知识点4： inspector 调试的一点原理
1、通过给 node 增加 --inspect 参数会开启调试模式，这个模式下，还会开放一个默认的 9229 端口，允许其他 IDE 接入。
这个模式下，会输出下面的信息：
Debugger listening on ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5
For help, see: https://nodejs.org/en/docs/inspector
ws://127.0.0.1:9229/d598ab05-88e8-433f-b641-bf2766da97f5 是暴露的调试链接，里面包含了协议、host、端口和一个唯一的 uuid。这是一个标准 v8 调试协议。
2、但是 仅仅开启调试还是不够的，调试器还没有接收到足够的信息，或者说没有一个展现调试的地方。node 还提供了另一个会卡住的调试命令。--inspect-brk 会停在代码的第一行，等待下一步的指示：
image.png
3、可以通过命令执行下一步等调试操作， 也可以通过支持 v8调试协议的 UI。
有许多种方法可以作为 UI，而最简单的就是我们电脑上一般都会有的 Chrome 浏览器。
Chrome 自带了一个调试页 chrome://inspect/ ，打开后，如果是在本机，会直接列出可调式的端口和文件地址（如果在远程，也可以配置 ip）。
image.png
点击inspect 就可以调试了。 4、在 Chrome UI 打开的时候，控制台会输出一句话。
image.png
这的意识是表明这个调试协议已经连上了 node 开启的调试端口；所以整个调试分为两个部分：
“开启 node 调试端口” + “符合 v8调试协议的调试器 attach 到调试端口”
5、除了使用Chrome调试，也可以使用VSCode, vscode集成了调试的 UI,本质和最基本的一样，开启调试端口，连接调试端口。只是 VSCode 本身是个编辑器，可以直接在其之上打断点，集成度更高;使用方式 就是配置一个上面提到的 launch.json（等价于启动命令）。
总结： 所有的调试的原理都是一样的，藉由 Node.js 原生的打开调试端口的能力，不同的 IDE 才能连接到该端口，进而做出更加强大的能力。
比如 VSCode 不仅仅能做传统的调试，也能增加配置，在执行调试前后增加钩子，执行自己的命令，这都是扩展能力的体现。
由上面的基础知识， 可以看到 上面JSON的意思是node --inspect-brk=DEBUG_PORT run debug
即执行 'era-cloud debug --env local'， debug方式调试启动已过时； era-cloud命令中 可以使用run 命令
image.png
解决办法：
更换debug 调试方式为 inspector方式： era-cloud run --env local --port 7070
参考文档：
各种VSCode 调试demo
写 Node.js 代码，从学会调试开始
hi~ 点赞没
网友评论