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 事件源碼定位問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM