zoukankan      html  css  js  c++  java
  • 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 事件源码定位问题

  • 相关阅读:
    Ural1387 Vasya's Dad
    SGU481 Hero of Our Time
    sjtu1590 强迫症
    sjtu1591 Count On Tree
    sjtu1585 oil
    sjtu1364 countcountcount
    sjtu1333 函数时代
    Fabric-ca client端初始化过程源码分析
    Fabric-ca server端与client端交互
    Fabric-ca server端初始化过程源码分析
  • 原文地址:https://www.cnblogs.com/weekend001/p/3796352.html
Copyright © 2011-2022 走看看