一探前端开发中的JS调试技巧 | 菜鸟教程 (runoob.com)

方法

1、Webstorm Debug + 断点；

2、VSCode Debug + 断点；

3、命令行 + Chrome + 断点。

操作

1、step over;

执行下一行，第一次点击的时候不会执行断点这一行，需要再点一次；

2、step into / step out;

进入断点 / 退出断点，退出时断点处代码执行完毕

3、watch

variables 下面的 + 号，可以添加其它需要观察的变量。

Webstorm Edit Configurations 设置

run -> edit configuration -> Edit configuration templates -> JavaScript file 是启动文件 -> Application parameters 是 cli 后面接的参数，比如输入 add task1 （相当于命令行输入 node cli.js add task1）-> 也可以在这里点击行尾的加号，选择 Prompt - Displays a string input dialog -> 每次 run 的时候可以输入不同的值

VSCode 设置

运行和调试 -> 添加配置 -> name 随便改 -> program 的改为启动文件 -> 可以添加参数："args": ["add","task","100"]-> 点击开始调试图标后 -> 运行 node cli.js add task 100

debugger 方法与 Webstorm 相同。

命令行 + 浏览器 + 断点

1、命令行输入 node --inspect-brk cli.js add taks 210； 不加 -brk 的话，一进入debug 界面，断点处会自动执行；

2、点击链接： nodejs.org/en/docs/ins… ， 在任意浏览器页面打开开发者工具，点击左上角的“打开 node.js 专用开发者工具”，