I often see students complaining about Node
debugging troubles or not knowing how to debug various scripts, Jest
etc. Webpack
, and the articles related to debugging that I occasionally see are all written inspect
. launch.json
These solutions actually have a certain learning cost.
In fact, a VSCode
rather brainless Debug
method has already been built in, that is , to use it, we only need to be responsible for the interrupt point, and we don’t need to pay attention JavaScript Debug Terminal
to anything else . The main thing is a brainless and simple.inspect
launch.json
use
The process of enabling JavaScript Debug Terminal
is really mindless, but let's talk about it, it only takes one step to enable it: open Terminal
a new one in JavaScript Debug Terminal
and then use it to start all scripts.
combat test
There is no evidence for empty talk, let's test how easy it is to use through a few cases.
node script
First, we create a test.js
script, then click to add a breakpoint in front of the number of lines that need to be debugged, and enter Debug Terminal
Pass node test.js
to execute.
VSCode
It can be seen that the mode is opened directly after execution debug
, and it successfully stops at the breakpoint.
npm script
Let's try npm script
the method again, let's create a new one first package.json
, then scripts
add an item in : "start": "node test.js"
, and then Debug Terminal
execute it in npm run start
.
Note that this time we are using debugger
to add a breakpoint, and we can find that the breakpoint is also entered successfully.
typescript debug
不止于此,我们再试试 typescript
,新建一个 test.ts
,然后通过 npx tsx test.ts
启动。
可以发现 typescript
一样可以成功调试。
webpack
上面都属于比较简单的场景,实际场景我们可能经常会在打包或写单测时遇到一些问题需要调试。现在我们先来随便找个 webpack
模版试试 webpack
。
可以看到在 webpack
源码中打断点同样也可以支持。
jest
再来试试 jest
,随便拿 react
源码里的单测跑一下。
不出所料,毫无问题。
其他方式
除了上面说的主动打开 Debug Terminal
的方式进行调试外,VSCode
还在 npm script
中集成了一些操作。
比如在 package.json
中的 scripts
上方的 Debug
按钮,点击后会让你选择项目中的 script
并启动 Debug Terminal
进行调试。
也可以在某个 script
的名字上 hover
后点击出现的悬浮按钮中的 Debug
直接调试对应的 script
。
总结
可以看出 VSCode
的 JS Debug Terminal
基本支持了所有我们常用的调试场景,无论是 node
、typescript
、webpack
还是 jest
,全部拿捏。并且使用绝对无脑,可以放心食用。
Of course, there are some small problems encountered in the process of use. For example, when running, jest
because multiple sub-processes will be started, clicking disconnect in the breakpoint tool bar may cause Debug Terminal
subsequent failures and sometimes get stuck. However, the flaws do not conceal the advantages, and you will know that it is really fragrant after using it JS Debug Terminal
.