2021-04-06 19:09发布
介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解
使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）
按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图
给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件
在js代码文件左侧栏单击可以添加断点，再点击可以移除断点
断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值
还可以选择一个表达式，可以直接显示出这个表达式执行的结果
点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 乱世小熊 的问题《js代码如何断点debug调试》','http://www.shouhuola.com/answer/35579/115038.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解
使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）
按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图
给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件
在js代码文件左侧栏单击可以添加断点，再点击可以移除断点
断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值
还可以选择一个表达式，可以直接显示出这个表达式执行的结果
点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示
一周热门 更多>