Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二

Node Js

有俩个方法可以轻易的debug 

我还加入了很多小技巧更加方便

这一个方法使用 chrome dev tool

另外一个方法command line中直接运行, 我也做了详细介绍: https://blog.csdn.net/Cvan123/article/details/83552584

chrome dev tool

1. 在command line中输入

node --inspect-brk filename

意思是 我们想运行inspect模式 但我们不想再command line中运行

-brk 是break

2. 打开goole浏览器

进入以下网站

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第1张图片

你应该也可以在Remote Target中看到一个

运行中的Node js 文件

3. 点击 Open decitcated DevTools for Nodes

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第2张图片

这就是debug 工具了

和另外一个方法大同小异

这个console窗口是非常有用的

我们可以在source窗口打开它

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第3张图片

在这里Console 就是上一次提到的 REPL 一个输出窗口

我们可以在这里面运行简易的js代码 例如 1+1

—————————————————————————————————————

上面的代码中是一段简单的JS的代码

我们可以注意到 有一行

debugger;

意思是debug程序运行到这就不会继续往下运行了


开始debug

1.运行蓝色按钮

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第4张图片

就跟command line中的c一样的效果 

运行code到debugger处 如果没有阻止 会运行整个文件

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第5张图片

但是这里会有一些明显的提示

看到图中浅橙色  这是 关于 person这个变量的值 chrome tool会直接帮我们显示出来

我们能在console中输入 有一样的返回

3. 手动加入 停止符

Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第6张图片

点击蓝色的开头按钮

帮助模拟插入debugger

会运行完整行然后停住 等待下一步指令

————————————————————————————————————————————————

进阶:

nodemon --inspect-brk filename

nodemon 是一个npm 如果不了解的人可以看看我的博客

它允许我们在terminal中运行进程同时更改文件

它会自动刷新 然后返回结果

(建议安装!) 

npm install nodemon -g 

帮助: 可以帮助我们修改了一个bug之后立刻重启查看结果 方便于继续debug

它会自动打开debug界面 如果我们修改了数据 
Node.js debug //迅速调试bug的俩种方法 (详细全面!)方法二_第7张图片


你可能感兴趣的:(node)