js代码如何断点debug调试

1. 介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解

   使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）

   

2.  

   按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图

   

3.  

   给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件

   

4.  

   在js代码文件左侧栏单击可以添加断点，再点击可以移除断点

   

5.  

   断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值

   

6.  

   还可以选择一个表达式，可以直接显示出这个表达式执行的结果

   

7.  

   点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示