debugger断点应用

1、首先了解一下

设置断点的目的是为了调试状态下运行程序，是的编程开发人员可以看到程序运行过程中的数据变化情况， 检查代码是否正确

可以让程序终端在需要的地方，从而方便开发人员进行分析，也可以在一次调试中设置断点，下一次只需要让程序自动运行到设置断点的位置，便可以在上次设置断点的位置中断下来，极大的方便了操作，从而节省了时间。

2、断点是如何使用的？

第一步：

两种方法：

第一种：在js代码中加上debugger

  debugger
    const obj1 = {
        age: 20,
        name: 'xxx',
        address: {
            city: 'beijing'
        },
        arr: ['a', 'b', 'c'],
        name2: null
    };

第二种：在调试台打开

①：点击Sources

②：找到相应的js文件

③：点击代码左侧行数

如图所示：

打上断点之后刷新页面即可看到，在浏览器页面看到如图所示，代表断点在开始执行。

关于按照步骤、需求执行

这里就需要介绍到如下图所示

• ①代表，会尽量的执行完当前断点所管理的区域，如果没有遇到其他的断点和报错
• ②代表，执行完当前的方法，直到下一项或者说进入下一项单步执行操作
• ③代表，进入当前函数内执行。
• ④代表，跳出当前的方法，执行完当前的方法。
• ⑤代表，一步步的执行当前的函数。
• ⑥和⑦代表，当前要执行的函数区域
• 第⑤步右侧，一个代表结束当前断点的执行，一个代表除非例外情况， 否则尽量不要暂停断点的执行

同学们，注意一下

​ 如果打断点的地方不是函数的起始位置，也就是最初执行当前段代码的位置，否则是打不上断点的，会自动的跳到函数开始执行的位置。

最后的最后，加油吧！年轻人，现在不掉点发，未来没头发可掉才是最可悲....