前端如何打断点

原帖地址:https://jingyan.baidu.com/article/9113f81b64b9da2b3214c72e.html

 

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

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



	
		
		js断点演示
	
	
		
js断点演示

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

注意使用的是谷歌浏览器,打开Sources,找到对应的html文件,

前端如何打断点_第1张图片

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

前端如何打断点_第2张图片

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

通过按钮进入下一步

前端如何打断点_第3张图片

你可能感兴趣的:(前端)