Chrome的JS调试工具

你是怎么调试 JavaScript 程序的？最原始的方法是用 alert() 在页面上打印内容，稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~，用这两种土办法确实解决了不少小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能愈加强大的开发者工具不用实在太惋惜了。本文主要介绍其中的 JavaScript 断点设置和调试功能，也就是其中的 Sources Panel（之前叫 Scripts）。若是你精通 Eclipse 中的各类 Java 调试技巧，那么这里的概念都是相似。写做本文时使用的 Chrome 版本为 25.0.1364.172。
基本环境
<ignore_js_op> 
Sources Panel 的左边是内容源，包括页面中的各类资源。其中，又分 Sources 和 Content scripts。Sources 就是页面自己包含的各类资源，它是按照页面中出现的域来组织的，这是咱们要关注的。异步加载的 js 文件，在加载后也会出如今这里的。Content scripts 是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这类扩展实际也是嵌入在页面中的资源，它们也能够读写DOM。编写、调试这类扩展的开发者才要关心它们，若是你的浏览器没安装任何扩展，那么 Content scripts 就看不到任何东西。


Sources Panel 的中间主区域用于展现左边资源文件的内容。


Sources Panel 的右边是调试功能区，最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用全部断点。下面是各类具体的功能区。稍后介绍。


注意，左右两边的区域默承认能收缩在两侧没有显示出来，点击两侧的伸缩按钮 <ignore_js_op> <ignore_js_op> 展现出来。左边区域展现出来时默认是自动收缩状态，点击旁边的 pin 按钮 <ignore_js_op> 就不会缩回去了。

最下面还有一些功能按钮颇有用。

在源代码上设置断点
经过左边的内容源，打开对应的 JavaScript 文件，鼠标点击文件的行号就能够设置和删除断点。添加的每一个断点都会出如今右侧调试区的 Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。若是你有多个文件、多个断点的话，利用 Breakpoints 列表中的断点快速定位很是方便。
<ignore_js_op> 
对于每一个已添加的断点都有两种状态：激活和禁用。刚添加的断点都是激活状态，禁用状态就是保留断点但临时取消该断点功能。在 Breakpoints 列表中每一个断点前面都有一个复选框，取消选中就将禁用该断点。断点位置的右键菜单中也能够禁用断点。也能够在右侧功能区上面 <ignore_js_op> 按钮临时禁用全部已添加的断点，再点一下恢复原状态。

条件断点：在断点位置的右键菜单中选择“Edit Breakpoint...”能够设置触发断点的条件，就是写一个表达式，表达式为 true 时才触发断点。

查看断点的环境
调用栈（Call Stack）：在断点停下来时，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，好比有一个函数 g() 其中又调用了函数 f() ，而我在 f() 中设置了一个断点，那么我在 console 中执行函数 g() 的时候会触发断点，其调用栈显示以下：
<ignore_js_op> 
最上面是 f()，而后是 g()。调用栈中的每一层叫作一个 frame，点击每一个 frame 能够跳到该 frame 的调用点上。
<ignore_js_op> 
此外，还能够在 frame 上用右键菜单从新开始执行当前 frame，也就是从该 frame 的开始处执行。好比在函数 f() 的 frame 上 Restart Frame， 断点就会跳到 f() 的开头从新执行，context 中的变量值也会还原。这样结合变量修改和编辑代码等功能，就能够在当前 frame 中反复进行调试，而不用刷新页面从新触发断点了。

查看变量
<ignore_js_op> 
Call Stack 列表的下方是 Scope Variables 列表，在这里能够查看此时局部变量和全局变量的值。

执行选择的代码
<ignore_js_op> 
在断点调试时，能够用鼠标选择想要查看的变量或表达式，而后右键菜单执行“Evaluate in Console”，就能够看到该表达式的当前的值了。


中断下次要执行的 JavaScript 语句
右侧调试区的上面的“中断/继续”按钮还有一个功能，在没有触发断点时，点一下这个按钮就会进入“准备”中断的状态，页面下一次执行 JavaScript 语句时会自动中断，好比触发了一个点击动做时会执行的代码。

临时修改 JavaScript 代码
一般咱们在调试代码时习惯：修改代码→刷新页面→从新检查，这么一个循环。但其实 Chrome 中能够临时修改 JS 文件中的内容，保存（Ctrl+S）就能够当即生效，结合 Console 等功能就能够当即从新调试了。但注意这个修改是临时的，刷新页面修改就没了。


异常时断点
在界面下方能看到 <ignore_js_op> 按钮，它是设置程序运行时遇到异常时是否中断的开关。点击该按钮会在3种状态间切换：

• 默认遇到异常不中断
• <ignore_js_op>  遇到全部异常都会中断，包括已捕获的状况
• <ignore_js_op>  仅在出现未捕获的异常时才中断

主要解释一下状态2和状态3的区别

1. try{
2.   throw 'a exception';
3. }catch(e){
4.   console.log(e);
5. }

复制代码

上面 try 里面的代码会遇到异常，可是后面的 catch 代码可以捕获该异常。若是是全部异常都中断，那么代码执行到会产生异常的 throw 语句时就会自动中断；而若是是仅遇到未捕获异常才中断，那么这里就不会中断。通常咱们会更关心遇到未捕获异常的状况。

在 DOM 元素上设置断点
有时候咱们须要监听某个 DOM 被修改状况，而不关心是哪行代码作的修改（也可能有多处都会对其作修改）。那么咱们能够直接在 DOM 上设置断点。
<ignore_js_op> 
如图所见，在元素审查的 Elements Panel 中在某个元素上右键菜单里能够设置三种不一样状况的断点：

• 子节点修改
• 自身属性修改
• 自身节点被删除

选中以后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 作相应修改时，代码就会在那里停下来，以下图所示。

<ignore_js_op> 

XHR 断点
右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串便可监听该 URL 的 Ajax 请求，输入内容就至关于 URL 的过滤器。若是什么都不填，那么就监听全部 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

按事件类型触发断点
右侧调试区的 Event Listener 列表，这里列出了各类可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断。

调试快捷键
<ignore_js_op> 
全部开发工具中的快捷键均可以在界面右下角的设置中查到。断点调试时通常用的是 F八、F十、F11或 Shitf+F11，但在 Mac OS 上 F10 等功能键可能与系统默认的快捷键冲突。不要紧，它们分别能够用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。

//@ sourceURL 给 eval 出来的代码命名
有时候一些很是动态的代码是以字符串的形式经过 eval() 函数在当前 Javascript context 中建立出来，而不是做为一个独立的 js 文件加载的。这样你在左边的内容区就找不到这个文件，所以很难调试。其实咱们只要在 eval 建立的代码末尾添加一行 “//@ sourceURL=name“ 就能够给这段代码命名（浏览器会特殊对待这种特殊形式的注释），这样它就会出如今左侧的内容区了，就好像你加载了一个指定名字的 js 文件同样，能够设置断点和调试了。下图中，咱们经过 eval 执行了一段代码，并利用 sourceURL 将它命名为 dynamicScript.js ，执行后左侧内容区就出现了这个“文件”，而它的内容就是 eval 的中的内容。

<ignore_js_op> 


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

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

复制代码

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

格式化代码（Pretty Print）
<ignore_js_op> 按钮用于把杂乱的代码从新格式化为漂亮的代码，好比一些已被压缩的 js 文件基本无法看、更无法调试。点一下格式化，再点一下就取消格式化。
<ignore_js_op> 
美化前
<ignore_js_op> 

2013-3-15 01:35 上传

下载附件 (41.86 KB)

 

=====================================================================

 

 

调戏代码（当脚本没有达到预期效果时，就能够经过console.log(变量名)在控制台输出信息啦）

var colors = new Array();
var count=colors.push("red","green");
count=colors.push("black");
//var item=colors.pop();
var item=colors.shift();
count=colors.length;
console.log(count);//在控制台输出count
console.log(item);//在控制台输出item

 

 

使用调试方式Sources

 

 

 

还能够利用Chrome来 查看函数内容
好比咱们想知道在jquery中，delegate方法和bind方法有什么区别

 

出处：http://www.cnblogs.com/duerbin/archive/2013/06/14/3135738.html

http://blog.163.com/lvshutao@126/blog/static/16463746720131571654232/