js调试-定位到函数所在文件位置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文：http://www.cnblogs.com/52cik/p/js-console-show-source.html

在控制台输入要查找的函数名如votePost 然后回车：

函数源码粗显啦，并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 这个是什么意思呢？
后面的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 直接忽略好了这是版本号，防止缓存的。
blog-common.js:1
blog-common.js 是这个函数所在的js文件，1 是代码所在的行号。

直接点击这个链接，就可以跳转到 Sources 面板，这个就是源码面板，调试最重要的一个功能，之后会慢慢介绍。

可是所有代码都在一行，我们改怎么看? 4946 个字符呢，全缩在一行上。。
chrome 给我们提供了一个代码格式化的功能，点击下方那个 Pretty print 按钮即可格式化代码。

格式化完毕之后就是非常美观的代码了，至于看不看的懂，那是另一回事了。
有的看不懂可能是代码被UglifyJS，Google's Closure之类的工具编译过，如 jquery.min.js 文件。
如果格式化够找不到函数所在位置，也不要着急，有我在，慌啥？回到刚才控制台面板。

你欣喜的发现，blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
行号变成 91 了，现在再点击这个链接，就可以跳转到对应格式化后的位置了，是不是超方便。。

今天的内容差不多就这些了，其实现在很少有直接全局函数给你调试的，因为现在 jQuery 风靡，各种 click, on 之类的事件绑定，导致源码定位非常繁琐。
好在我之前写了一篇，比较详细的分析了这个问题，详情请参阅《浅谈 jQuery 事件源码定位问题》