摘要：当我们在调试的时候，右侧里面会显示当前作用域以及他的父级作用域，以及闭包。最后介绍一下一个神器，很好用的如果你自己写的代码，你执行的时候想让它在某一处停下来，只要写上的就好了，不信你试试哈哈
转自 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就好了，不信你试试！哈哈
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92320.html
摘要：在控制台中使用，当到达传入的函数时，代码将停止。但除了私有和匿名函数这可能是找到调试函数的最快方法。在控制台中输入，当调用时，将以调试模式停止屏蔽不相关代码现在，我们经常在应用中引入几个库或框架。 译者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具...
摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...
摘要：所有全局对象函数以及变量均自动成为对象的成员。消息弹出窗口对象使用简单方便，但因其交互方式生硬，通常只用于调试。可以在中创建三种消息框警告框确认框提示框。习惯上，通过选择符得到的集合一般命名为以起始的字符串，例如。 avascript 等于 ECMAScript + 宿主环境。宿主环境提供了一系列的全局对象，例如Node.js提供的require, console等；浏览器提供的DOM...
阅读 1114·2021-11-16 11:42
阅读 2894·2021-10-12 10:18
阅读 2852·2021-09-24 09:48
阅读 3457·2019-08-30 15:56
阅读 1521·2019-08-30 14:17
阅读 3035·2019-08-29 12:14
阅读 901·2019-08-27 10:51
阅读 2018·2019-08-26 13:28
