js代码如何断点debug调试

在网页开发过程中，经常需要编写js代码来实现动态效果。如果js代码较少，逻辑较简单，往往没有啥问题。但有时候前端需要实现复杂的功能，这个时间js代码往往会很多，逻辑也会较复杂，对于初级程序员来说，调试问题往往难度较大。下面就来介绍下如何使用网页调试工具断点调试js代码

操作方法

（01）介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）

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

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

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

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

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

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

特别提示

断点对于初级程序员也一个很好的帮助工具，提供调试问题的效率

对于调试js代码，不打断点的话，可以通过方式打印日志信息，也是不错的调试方法