chrome调试
打开chrome浏览器，按f12就可以轻松的打开控制台
如果想清空控制台，可以点击左上角那个
来清空，当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示
下面我们用console.log来替换，感受一下它的魅力。
console里面具体提供了哪些方法可以调试时使用。
1、先说一下源码定位
页面右下方有一个推荐的图标吗？右击推荐图标，选择审查元素，打开谷歌控制台，如下图所示
我们现在想知道votePost方法到底在哪？跟着我这样做，在Console面板里面输入votePost然后回车
直接点击上图标红的链接，控制台将定位到Sources面板中，展示如下图所示
大家看了上面这个图片之后估计头都要晕了吧，这么多js都整在一行，让人怎么看呀，不用担心，按下图操作即可（也就是点击中间面板左下方的Pretty print就行了）
这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了（其实这里的数字1或者91就是代表votePost方法在源码中的行号 ）现在看出Pretty print按钮的强大之处了吧
知道了怎么样查看某一个按钮的源码，那接下来的工作便是调试了，调试第一步需要做的便是设置断点，其实设置断点很简单，点击一下上图所示的92即可，这时你会发现92行号旁边会多了一个图标，这里解释一下为什么不在91处设置断点，你可以试下，事实上根本就没法在91处上设置断点，因为它是函数的定义处，所以没法在此设置断点。
设置好了断点后，你就会在右边Breakpoints方框里看到刚刚设置的断点。
我们先来介绍一下用到的调试快捷键吧（事实上我们也可以不用下表所示的快捷键，直接点击上图所示右侧栏最上层的一排按钮来进行调试，具体用哪个按钮，把鼠标放到按钮上方一会就会显示它相应的提示）
| 快捷键 | 功能 |
|---|---|
| F8 | 恢复运行 |
| F10 | 步过，遇到自定义函数也当成一个语句执行，而不会进入函数内部 |
| F11 | 步入，遇到自定义函数就跟入到函数内部 |
| Shift + F11 | 步出，跳出当前自定义函数 |
其中值得一提的是，当我们点击“推荐”按钮进行调试的时候会发现，不管我们是按的F10进行调试还是按F11进行逐步调试，都没法进行$.ajax函数内部，即使我们在函数内部设置了断点也没有办法进入，这里按F8才是真正起效果的，不信你试试。
当我们在调试的时候，右侧Scope Variables里面会显示当前作用域以及他的父级作用域，以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量，而且还能把鼠标直接移到任意变量上，就可以查看该变量的值。
刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件，这样我们就找到它绑定的js函数，如果它是在jQuery页面加载完成函数里面绑定的，这时候我们怎么知道它绑定的是哪个js函数呢，如果我们不知道绑定的js函数就更加不用说调试进去了
下面介绍一下如何查看，还是以刚刚那个测试网页为例子吧，但是这次我们来看“提交评论”作说明吧，
右击“提交评论”-->审核元素，我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码
function lookEvents (elem) {
return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件
如下图所示：
按照上述介绍的方法定位到具体的blog-common.js里面，找到postComment 然后一层层的找到具体的代码，再设置断点就好了。
最后介绍一下一个神器，很好用的debugger
如果你自己写的代码，你执行的时候想让它在某一处停下来，只要写上的debugger就好了，不信你试试！哈哈
要想打开谷歌控制台，有两种方式
- ctrl+shift+i
- f12
大家知道Elements面板最大的功能就是操作属性和修改html。这里我再说一些大家可能不太熟悉的特性，
- 拖拽节点, 调整顺序
- 拖拽节点到编辑器
- ctrl + z 撤销修改
这些功能是我觉得最有意思的，你们可以试试哦。
下面来具体说说几个复杂点的功能
查看元素上绑定的事情
- 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
- Selected Node Only 只会列出当前节点上绑定的事件
- 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
- handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
- isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
- useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行
来源：http://www.cnblogs.com/liyunhua/p/4529079.html#_label0
浙公网安备 33010602011771号