1.debugger 我们可以通过再代码中加上debugger 对当前代码进行断点调试。当代码执行到debuuger时会终止执行
2。在浏览器中可以用鼠标点击当前代码的这一行的左侧 会出现一个小红点 表示该处已经添加了一个断点。如下图所示
我们可以鼠标右键点击红色小圆点 ,会弹出一个菜单选项
选择edit breakpoint ,该选择为编辑断点,可以自定义断点。大概意思是,我们可以自己定义断点的条件,一般我们直接添加的断点默认时代码执行到该处时 就会停止执行。如果我们给断点添加了自定义条件,那么当代码执行到该处时 会判断是否满足断点的条件 ,满足则停止执行。不满足就继续往下执行。
一般我们在循环代码块中打断点,如果不进行自定义断点,直接添加某个断点,那么每次代码块进行一次循环就会停止执行。
3.浏览器调试窗口的source模块的右边部分为功能区域,提供了很多调试的功能,如图红色圈出的部分
3.1.watch部分可以添加变量,以监听代码运行时该变量的变化
3.2 call Stack 部分可以查看函数调用栈的步骤。大概意思是当我们在函数代码块中打一个断点,当该函数执行时,可以看到该函数是经过那些步骤被如何调用执行的。
3.3 scope 部分可以看到局部变量 和全局变量。例如我们给某个代码块内部打一个断点,当代码运行到该断点时,scope中会显示该代码块中的局部变量以及全局变量。如图,下面的location中的为代码块中的局部变量,globel中为全局变量