web 打断点调试用法

以前写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 的中的内容。

还可以看看这个给动态编译出来的 CoffeeScript 代码命名的示例：

var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
eval(coffee);

实际上，//@ sourceURL 不仅仅可以用在 eval 的代码中，任何 js 文件、甚至是 Javascript Console 输入的代码都可以用，效果一样！