[Debug]launch.json 启动调试失败 （VsCode Node Debug）

之前在小组中的一个分享，在这里记录下~

问题：使用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: 命中次数

3、Log message: 运行到这里打印的日志

日志.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~ 点赞没