Chrome 控制台 如何调试 javascript

转自 http://www.cnblogs.com/ctriphire/p/4117370.html

下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码

先说一下源码定位

你们打开测试网页   看到页面右下方有一个推荐的图标吗？右击推荐图标，选择审查元素，打开谷歌控制台，以下图所示

咱们如今想知道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就行了，不信你试试！哈哈