前端打断点debugger使用流程详细教程
流程1：打上断点
方式一：编辑器内
在一行代码的前面或者后面写上debugger运行到这的时候就会停止啦
方式二：浏览器控制台内
直接在控制台的source(中文版为源代码/来源)目录下点击左边的行数即可
然后刷新一下
流程2：遇上断点
遇到断点后，程序会停止运行，此时注意，控制器里打断点的那行代码并没有被执行，
第一个按钮是一直执行到下一个断点的意思，直到运行完毕
第二个按钮是进行下一步，也就是执行下一个逻辑，又或者说，【按逻辑（比如会遇到 if 那些）去执行下一行代码】。
- 箭头：停止断点调试
- 眼睛：不跳入函数中去，继续执行下一行代码（F10）
- 向下的箭头：跳入函数中去（F11）
- 向上的箭头：从执行的函数中跳出
- 带斜杠的图标：禁用所有的断点，不做任何调试
流程3：查看变量（英文版为scope）
可以查看到不同作用域下的变量的动态变化 ,如下图所示，展示了代码块范围内的所有变量：
提示
提醒一句：对有异步代码的文件进行断点时有个小提醒，可能你在断点的情况下正常运行了，但不断点的情况下就不正常了，这时候就要想到异步的时机问题，可能断点的时候异步就执行完了。
补充
代表 “下一步（Step）”：运行下一条指令，快捷键 F9。运行下一条语句。一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行。
代表 “跨步（Step over）”：运行下一条指令，但 不会进入到一个函数中，快捷键 F10。
跟上一条命令“下一步（Step）”类似，但如果下一条语句是函数调用则表现不同。这里的函数指的是：不是内建的如 alert 函数等，而是我们自己写的函数。
如果我们对比一下，“下一步（Step）”命令会进入嵌套函数调用并在其第一行暂停执行，而“跨步（Step over）”对我们不可见地执行嵌套函数调用，跳过了函数内部。
执行会在该函数调用后立即暂停。
如果我们对该函数的内部执行不感兴趣，这命令会很有用。
总结
到此这篇关于前端打断点debugger使用的文章就介绍到这了,更多相关前端打断点debugger使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript中关于Object.create()的用法
这篇文章主要介绍了JavaScript中关于Object.create()的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了JS获取地址栏参数的两种方法(简单实用)，小编给大家推荐使用第一种采用正则表达式获取地址栏参数的方法，此方法简单实用，对js获取地址栏参数相关知识感兴趣的朋友，一起学习吧2016-06-06
无感刷新机制的目的是在用户不知情的情况下,自动更新其认证令牌本文,主要介绍了js实现无感刷新的实践(附前后端实现),具有一定的参考价值,感兴趣的可以了解一下2024-04-04
下面小编就为大家带来一篇js验证真实姓名与身份证号,手机号的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
本文主要介绍了JavaScript数据类型的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
在 JavaScript 中,变量的类型是动态的,这几天我在做项目时,遇到了一个从方法返回的值问题,为了避免这种问题,我需要先判断一下返回值的类型,那么,你知道哪些判断变量类型的方法呢,本文给大家介绍了使用 JavaScript 如何判断变量类型,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了JavaScript的Proxy可以做哪些有意思的事儿,Proxy是ES6中提供的新的API，可以用来定义对象各种基本操作的自定义行为 （在文档中被称为traps，我觉得可以理解为一个针对对象各种行为的钩子），,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了JavaScript中的立即执行函数表达式介绍,本文着重讲解了什么是立即调用函数表达式,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript实现的XML与JSON互转功能,结合实例形式分析了基于javascript的xml与json相关转换功能实现技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了微信小程序实现简单弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论