VSCode 调试 Egg 完美版 - 进化史 #25

今天药忘吃喽~ 2023-05-22 06:39 9阅读 0赞

# VSCode 调试 Egg 完美版 - 进化史 \#25 #

<table> 
 <tbody> 
  <tr> 
   <td> <h2>背景</h2> <p>VSCode 早期版本，对 Node Cluster 的调试支持一直不是很友好，譬如：</p> 
    <ul> 
     <li>开发期重启进程后，不支持重新 attach。</li> 
     <li>Cluster 重启后 debugPort 会自增，VSCode 也不支持 attach 新端口。</li> 
     <li>Egg 的&nbsp;<a href="https://eggjs.org/zh-cn/core/cluster-and-ipc.html" rel="nofollow">多进程模型</a>&nbsp;多了 Agent 处理公关事务，在开发期也有 3 个进程（master, agent, worker）。</li> 
    </ul><h2>那些折腾过的历史</h2> <h3>黑暗时代</h3> <p>早在 2016 年时就开始的折腾：<a href="https://github.com/atian25/blog/issues/14" rel="nofollow">#14</a>&nbsp;和&nbsp;<a href="https://github.com/atian25/blog/issues/15" rel="nofollow">#15</a>&nbsp;，没有太好的办法。</p> <h3>青铜时代</h3> <p>然后&nbsp;<a href="https://github.com/okoala" rel="nofollow">@okoala</a>&nbsp;写了&nbsp;<a href="https://github.com/eggjs/egg-development-proxyworker" rel="nofollow">egg-development-proxyworker</a></p> <p>主要思路是在 agent 里面启动一个 socket proxy 来动态代理 worker 的调试端口。<br> 很巧妙的解决了<code>自动重启后调试端口变化问题</code>，但缺点是要开发者手动安装插件，并配置 vscode。</p> <p>此时只能说达到可用的阶段。</p> <h3>黄金时代</h3> <p>接着，我写了&nbsp;<code>egg-bin debug</code>&nbsp;把 proxy 功能内置了，实现原理参见当时的&nbsp;<a href="https://github.com/eggjs/egg/issues/1376" rel="nofollow">RFC 提案</a></p> <p>并且提供了&nbsp;<a href="https://github.com/eggjs/vscode-eggjs" rel="nofollow">vscode-eggjs</a>&nbsp;扩展来方便配置。</p> <p>解决了：</p> 
    <ul> 
     <li>自动 attach 重启后的 worker 新端口</li> 
     <li>自动生成 launch.json</li> 
    </ul><p>对于一般应用开发者基本上已经非常易用了，但还存在以下问题：</p> 
    <ul> 
     <li>vscode 的&nbsp;<code>launch.json</code>&nbsp;对同时 attach 多个的支持不是很友好，虽然有&nbsp;<code>compounds</code>。</li> 
     <li>默认只 attach worker，并且不支持启动期的断点，如果要&nbsp;<code>brk</code>&nbsp;的话要手动 attach 3 次，非常麻烦。</li> 
    </ul><p>而今天，VSCode@1.12.0 正式支持了&nbsp;<a href="https://code.visualstudio.com/updates/v1_20#_node-debugging" rel="nofollow">Automatically attach debugger to Node.js subprocesses</a></p> <p>因此我们之前的做法可以大幅简化了，没解决的问题也基本解决了，可以称为&nbsp;<code>完美版</code>&nbsp;了。</p> <h2>完美版的人生</h2> <p>文档已经更新：<a href="https://eggjs.org/zh-cn/core/development.html#%E4%BD%BF%E7%94%A8-vscode-%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95" rel="nofollow">使用 VSCode 进行调试</a></p> <p>安装&nbsp;<a href="https://github.com/eggjs/vscode-eggjs" rel="nofollow">vscode-eggjs</a>，并初始化调试配置（如果之前有则需删除 launch.json 文件）</p> <p><a href="https://user-images.githubusercontent.com/227713/35962084-0f32e02e-0ceb-11e8-9c99-3d6ba597b4e6.png" rel="nofollow"><img alt="image" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWltYWdlcy5naXRodWJ1c2VyY29udGVudC5jb20vMjI3NzEzLzM1OTYyMDg0LTBmMzJlMDJlLTBjZWItMTFlOC05Yzk5LTNkNmJhNTk3YjRlNi5wbmc?x-oss-process=image/format,png"></a></p> <p>然后简单的一个&nbsp;<code>F5</code>&nbsp;搞定~</p> <h3>简析</h3> <pre><code>// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Egg",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "windows": { "runtimeExecutable": "npm.cmd" },
      // 启动我们的 egg-bin debug 并默认是 brk
      "runtimeArgs": [ "run", "debug", "--", "--inspect-brk" ],
      // 日志输出到 Terminal，否则启动期的日志看不到
      "console": "integratedTerminal",
      "protocol": "auto",
      // 进程重启后自动 attach
      "restart": true,
      // 因为无需再 proxy，故改回原来的 9229 端口
      "port": 9229,
      // 自动 attach 子进程 
      "autoAttachChildProcesses": true
    }
  ]
}</code></pre> <h3>其他</h3> <p>vscode 扩展生成的配置里面，还支持了单元测试的断点，配置如下：</p> <pre><code>{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Egg Test",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "test-local",
        "--",
        "--inspect-brk"
      ],
      "protocol": "auto",
      "port": 9229,
      "autoAttachChildProcesses": true,
      "disableOptimisticBPs": false,
    }
  ]
}</code></pre> <h2>完美版.最终版1</h2> <p><a href="https://code.visualstudio.com/updates/v1_22#_node-debugging" rel="nofollow">VSCode 1.22</a>&nbsp;支持了&nbsp;<code>Automatically Attach to Node.js processes</code>，也就是如果你开启了这个的话，无需配置什么&nbsp;<code>launch.json</code>，直接在 terminal 执行&nbsp;<code>npm run debug --inspect-brk</code>&nbsp;就会自动 attach 了。</p> <h2>补充</h2> <p>Egg 的调试，跟 Node 没啥区别，因此一定要了解 Node 的基础调试知识。</p> <p>其中，<code>--inspect-brk</code>&nbsp;是指在进程第一行就暂停，等待 attach，因此：</p> 
    <ul> 
     <li>master 先启动，在第一行会停住，需要你 attach master，才会往下走</li> 
     <li>接着 master 启动 agent，也是在第一行停住，需要 attach agent 才会往下走</li> 
     <li>最后 agent 启动完成后，worker 才开始启动，一样也是在第一行停住，需要 attach agent 才会往下走</li> 
    </ul><p>上面这几个 attach，由于上面我们提到的 VSCode 的支持，只需要开启配置，即可无感知的一键 attach。<br> 虽然如此，但作为开发者，大家还是需要理解 Node 的调试原理。</p> </td> 
  </tr> 
 </tbody> 
</table>