方式一:
vscode:
(1)添加断点或debugger
(2)点击左侧瓢虫运行或调试,进入调试模式
方式二:
node --inspect-brk 文件路径
(1)在文件中要调试的位置添加debugger
(2)刷新浏览器打开调试器,点击绿色node图标
方式三:
全局下载:npm install -g node-nightly
添加debugger或断点
执行命令
node-nightly --inspect --inspect-brk 文件路径
在浏览器:chrome://inspect打开调试页面
浏览器断点调试:
断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例)
用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下
1、添加断点
断点现在已经打上了,然后做什么呢
2、点击页面触发事件从而触发断点
3、点击图标,逐语句执行或者叫逐步执行
4、鼠标选中可看到变量值
选中以后,鼠标悬浮在目标上方,你就看到上图的结果
5、点击图标,逐过程执行
假设上图我只在227行打了个断点,然后一直点击逐语句执行”按钮到229行,这时候如果再点击一次“逐语句执行”按钮呢?则会进入下图的js里:
这些都是zepto库文件的内容,没啥好看的,里面运行很复杂,我们不可能一直使用“逐语句执行”按钮,这样你会发现你按了大半天还在库文件里面绕。。。这时候咋办?
那就该“逐过程执行”按钮上场了
当我们运行到229行时,直接单击“逐过程执行”按钮,你会发现,js直接跳过了库文件,运行到了237行。