前端怎么打断点，debugger使用教程
https://i-blog.csdnimg.cn/direct/cd3f3ba1f1b040518149e7aa186af327.jpeg流程1：打上断点
方式一：编辑器内
在一行代码的前面大概后面写上debugger
运行到这的时间就会克制啦
方式二：浏览器控制台内
直接在控制台的source(中文版为源代码/泉源)目录下点击左边的行数即可
https://i-blog.csdnimg.cn/direct/37e4661e0fb546b195b522b745f1a3f2.png
然后刷新一下
流程2：遇上断点
https://i-blog.csdnimg.cn/direct/d5cdc402fccd490381b8a50dc74a969a.png
遇到断点后，程序会克制运行，此时注意，控制器里打断点的那行代码并没有被执行，
第一个按钮是不停执行到下一个断点的意思，直到运行完毕
第二个按钮是举行下一步，也就是执行下一个逻辑，又大概说，【按逻辑（比如会遇到 if 那些）去执行下一行代码】。
https://i-blog.csdnimg.cn/direct/cbd570bc40cf4d309069c262d986d522.png
箭头：克制断点调试
眼睛：不跳入函数中去，继续执行下一行代码（F10）
向下的箭头：跳入函数中去（F11）
向上的箭头：从执行的函数中跳出
带斜杠的图标：禁用全部的断点，不做任何调试
流程3：查看变量（英文版为scope）
https://i-blog.csdnimg.cn/direct/139fc31f12434536af037cfef11e946b.png
可以查看到差别作用域下的变量的动态变化 ,如下图所示，展示了代码块范围内的全部变量：
https://i-blog.csdnimg.cn/direct/c260bb80d059460e9148722ce3afb317.png
提示
提醒一句：对有异步代码的文件举行断点时有个小提醒，可能你在断点的环境下正常运行了，但不停点的环境下就不正常了，这时间就要想到异步的时机问题，可能断点的时间异步就执行完了。
补充
https://i-blog.csdnimg.cn/direct/b1e04a06bbe744f49a6690576a99c6a3.png
代表 “下一步（Step）”：运行下一条指令，快捷键 F9。运行下一条语句。一次接一次地点击此按钮，整个脚本的全部语句会被逐个执行。
https://i-blog.csdnimg.cn/direct/9b76b00e8ffb4eb989c87883b14f7aa1.png
代表 “跨步（Step over）”：运行下一条指令，但 不会进入到一个函数中，快捷键 F10。
跟上一条下令“下一步（Step）”类似，但假如下一条语句是函数调用则体现差别。这里的函数指的是：不是内建的如 alert 函数等，而是我们自己写的函数。
假如我们对比一下，“下一步（Step）”下令会进入嵌套函数调用并在其第一行暂停执行，而“跨步（Step over）”对我们不可看法执行嵌套函数调用，跳过了函数内部。
执行会在该函数调用后立即暂停。
假如我们对该函数的内部执行不感爱好，这下令会很有用。
页:
[1]