js代码如何断点debug调试

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

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

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

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

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

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

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

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