1、首先了解一下

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

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

2、断点是如何使用的?

第一步:

两种方法:

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

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

第二种:在调试台打开

①:点击Sources

②:找到相应的js文件

③:点击代码左侧行数

如图所示:

JavaScript debugger安装 js中debugger怎么用_javascript

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

JavaScript debugger安装 js中debugger怎么用_ci_02

关于按照步骤、需求执行

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

JavaScript debugger安装 js中debugger怎么用_刷新页面_03

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

同学们,注意一下

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

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