原帖地址：https://jingyan.baidu.com/article/9113f81b64b9da2b3214c72e.html
1.介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解
使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js断点演示</title> </head> <body> <div>js断点演示</div> <script> var num1=parseFloat(55); if(!isNaN(num1)){ num1 = Math.round(num1*100)/100; var str = num1.toString(); var rs = str.indexOf('.'); if(rs<0){ rs = str.length; str += '.'; } } </script> </body> </html>2.按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图
注意使用的是谷歌浏览器，打开Sources,找到对应的html文件，
3.在js代码文件左侧栏单击可以添加断点，再点击可以移除断点
4.断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值
通过按钮进入下一步
1先利用network定义请求，2利用source选项去定位源码位置
本例中我的请求都是在action文件夹里面的，source页签点开源码，要对应找出响应发出请求的位置
本例中我的项目是Action目录下的index.js是和action请求相关的js源码，去找对应的按钮点击事件代码部分
一刷新按钮一点击就会直接进入断点处
第二种调试方式：
端点：是断点，我的字打错了，就这样不改了
进入断点虎再用右上方的单步调试功能，试试就会用了
以前写C++，swift，OC这类语言时，断点直接在编译器上加，开发前端之后。sublime上没有直接打断点的；然后又有别人封装好的一个打log的库，所以我也一直没考虑前端打断点。 直到一次和同事沟通解决一个问题的时候，他们需要定点问题。 然后抱怨我定位问题速度太慢（其实打个log之后，虽然自动打包，可是也需要打包的时间）。那前端如何打log呢。 最后实在Google的自动工具上知道了如何进行代码断点去确认问题。
如图：需要的文件目录都在区域1，如果没有，点击5处的按钮。
按钮2呈现的是被压缩过后的js文件，看起来很不方便，所以先使用3格式化代码工具，就可以把2区域的代码整理为有序的了。
4区域的上方几个按钮代表着暂停/继续，单步执行，单步跳入，单步跳出，禁用/启用所有的端点。
4区域的Call Stack是调用栈；比如在f()设置了端点，但是在g()调用了函数f()那么在console执行g()会触发断点；在Call Stack里面调用栈。
Scope列表 可以查看全局变量和局部变量的值。
XHR 断点右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。按事件类型触发断点右侧调试区的 Event Listener 列表，这里列出了各种可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断,在dom里面也是能看到引发dom的位置的。//@ sourceURL 给 eval 出来的代码命名有时候一些非常动态的代码是以字符串的形式通过 eval() 函数在当前 Javascript context 中创建出来，而不是作为一个独立的 js 文件加载的。这样你在左边的内容区就找不到这个文件，因此很难调试。其实我们只要在 eval 创建的代码末尾添加一行 “//@ sourceURL=name“ 就可以给这段代码命名（浏览器会特殊对待这种特殊形式的注释），这样它就会出现在左侧的内容区了，就好像你加载了一个指定名字的 js 文件一样，可以设置断点和调试了。下图中，我们通过 eval 执行了一段代码，并利用 sourceURL 将它命名为 dynamicScript.js ，执行后左侧内容区就出现了这个“文件”，而它的内容就是 eval 的中的内容。var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
eval(coffee);实际上，//@ sourceURL 不仅仅可以用在 eval 的代码中，任何 js 文件、甚至是 Javascript Console 输入的代码都可以用，效果一样！
1.前端js打断点：按F12----点击Source-----选择要打开的Js文件----选中js代码左边点击一下---要实现的功能没有实现---在哪句上打断点想清楚---然后点击要获得的效果触发事件--------有两种情况其中如果出现半透明遮盖说明触发按钮没问题排除嫌疑，继续下一个问题，出现2个按钮事件说明这一步没问题，锁定事件内部
2.按F10是“逐语句执行”---排除法 对其一句进行排除可以在source同级的console看到报错不-------------------------------------------------------------3.后台打断点，在想要执行的代码前点击一下，并运行debug起来4.进入到调试中，按F5进入下一步，转载于:https://www.cnblogs.com/sunyuhuan/p/7217488.html
