A menudo veo estudiantes quejándose de Node
problemas de depuración o de no saber cómo depurar varios scripts, Jest
etc. Webpack
, y los artículos relacionados con la depuración que ocasionalmente veo están todos escritos inspect
. launch.json
Estas soluciones en realidad tienen un cierto costo de aprendizaje.
De hecho, ya se ha incorporado un método VSCode
bastante descerebrado , es decir, para usarlo, solo necesitamos ser responsables del punto de interrupción, y no necesitamos prestar atención a nada más . Lo principal es un descerebrado. y sencilloDebug
JavaScript Debug Terminal
inspect
launch.json
usar
El proceso de habilitar JavaScript Debug Terminal
es realmente tonto, pero hablemos de eso, solo se necesita un paso para habilitarlo: abra Terminal
uno nuevo JavaScript Debug Terminal
y luego utilícelo para iniciar todos los scripts.
prueba de combate
No hay evidencia de palabras vacías, probemos qué tan fácil es de usar a través de algunos casos.
script de nodo
Primero, creamos un test.js
script, luego hacemos clic para agregar un punto de interrupción frente a la cantidad de líneas que deben depurarse e ingresamos para ejecutar Debug Terminal
a través de node test.js
.
VSCode
Se puede ver que el modo se abre directamente después de la ejecución debug
y se detiene con éxito en el punto de interrupción.
guion npm
Probemos npm script
el método nuevamente, primero creemos uno nuevo package.json
, luego scripts
agreguemos un elemento en: "start": "node test.js"
y luego Debug Terminal
ejecútelo en npm run start
.
Tenga en cuenta que esta vez estamos usando debugger
para agregar un punto de interrupción, y podemos encontrar que el punto de interrupción también se ingresó correctamente.
depuración mecanografiada
不止于此,我们再试试 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
,全部拿捏。并且使用绝对无脑,可以放心食用。
Por supuesto, se encuentran algunos pequeños problemas en el proceso de uso. Por ejemplo, cuando se ejecuta, jest
debido a que se iniciarán múltiples subprocesos, hacer clic en desconectar en la barra de herramientas del punto de interrupción puede causar Debug Terminal
fallas posteriores y, a veces, atascarse. Sin embargo, los defectos no ocultan las ventajas, y sabrás que es realmente fragante después de usarlo JS Debug Terminal
.