Node 调试利器，前端、Node 开发必备 - VSCode JS Debug Terminal
<p>经常看到有同学抱怨 <code>Node</code> 调试麻烦或者是搞不清怎么调试各种脚本、<code>Jest</code>、<code>Webpack</code> 等等，而偶尔看到的调试相关的文章又全都是在写 <code>inspect</code>、<code>launch.json</code> 这些方案，其实有一定学习成本。</p><p>而其实在 <code>VSCode</code> 中早已内置了相当无脑的 <code>Debug</code> 方式，就是 <code>JavaScript Debug Terminal</code>，利用它我们只需要负责打断点，别的什么 <code>inspect</code>、<code>launch.json</code> 都不需要关注，主打的就是一个无脑、简单。</p>
<h2 id="使用">使用</h2>
<p>要启用 <code>JavaScript Debug Terminal</code> 过程实在是太无脑了，不过还是说一下吧，要开启只需要一步：在 <code>Terminal</code> 中新开一个 <code>JavaScript Debug Terminal</code>，然后所有的脚本全都用它来启动即可。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684074500790.png"></p>
<h2 id="实战测试">实战测试</h2>
<p>空口无凭，下面我们通过几个案例来测试一下有多好用。</p>
<h3 id="node-脚本">node 脚本</h3>
<p>首先我们创建一个 <code>test.js</code> 脚本，然后在需要调试的行数前方点击添加上断点，并进入 <code>Debug Terminal</code> 通过 <code>node test.js</code> 来执行。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684074668409.png"></p>
<p>可以看到执行后直接就开启了 <code>VSCode</code> 的 <code>debug</code> 模式，并且成功在断点出停住。</p>
<h3 id="npm-script">npm script</h3>
<p>再来试试 <code>npm script</code> 方式，我们先新建一个 <code>package.json</code>，然后在 <code>scripts</code> 中添加一条：<code>"start": "node test.js"</code>，随后在 <code>Debug Terminal</code> 执行 <code>npm run start</code>。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684075322522.png"></p>
<p>注意这次我们使用的是 <code>debugger</code> 来添加断点，可以发现同样成功进入断点。</p>
<h3 id="typescript-debug">typescript debug</h3>
<p>不止于此，我们再试试 <code>typescript</code>，新建一个 <code>test.ts</code>，然后通过 <code>npx tsx test.ts</code> 启动。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684075558239.png"></p>
<p>可以发现 <code>typescript</code> 一样可以成功调试。</p>
<h3 id="webpack">webpack</h3>
<p>上面都属于比较简单的场景，实际场景我们可能经常会在打包或写单测时遇到一些问题需要调试。现在我们先来随便找个 <code>webpack</code> 模版试试 <code>webpack</code>。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684112828720.png"></p>
<p>可以看到在 <code>webpack</code> 源码中打断点同样也可以支持。</p>
<h3 id="jest">jest</h3>
<p>再来试试 <code>jest</code>，随便拿 <code>react</code> 源码里的单测跑一下。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684152319997.png"></p>
<p>不出所料，毫无问题。</p>
<h2 id="其他方式">其他方式</h2>
<p>除了上面说的主动打开 <code>Debug Terminal</code> 的方式进行调试外，<code>VSCode</code> 还在 <code>npm script</code> 中集成了一些操作。</p>
<p>比如在 <code>package.json</code> 中的 <code>scripts</code> 上方的 <code>Debug</code> 按钮，点击后会让你选择项目中的 <code>script</code> 并启动 <code>Debug Terminal</code> 进行调试。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684155078050.png"></p>
<p>也可以在某个 <code>script</code> 的名字上 <code>hover</code> 后点击出现的悬浮按钮中的 <code>Debug</code> 直接调试对应的 <code>script</code>。</p>
<p><img src="https://stg.heyfe.org/images/blog-vscode-js-debug-terminal-1684155096585.png"></p>
<h2 id="总结">总结</h2>
<p>可以看出 <code>VSCode</code> 的 <code>JS Debug Terminal</code> 基本支持了所有我们常用的调试场景，无论是 <code>node</code>、<code>typescript</code>、<code>webpack</code> 还是 <code>jest</code>，全部拿捏。并且使用绝对无脑，可以放心食用。</p>
<p>当然在使用过程中也遇到一些小问题，比如在跑 <code>jest</code> 时由于会启动多个子进程此时点击断点工具条中的断开可能会导致 <code>Debug Terminal</code> 后续失效，也有时会卡住。不过瑕不掩瑜，用了就知道 <code>JS Debug Terminal</code> 真香。</p><br><br>
来源：https://www.cnblogs.com/zxbing0066/p/17403212.html
頁:
[1]