快捷導(dǎo)航

js調(diào)試系列源碼定位與調(diào)試[基礎(chǔ)篇]

更新時(shí)間：2014年06月18日 11:16:51 投稿：mdxy-dxy

如果看了1, 2兩篇，你對(duì)控制臺(tái)應(yīng)該有一個(gè)初步了解了，今天我們來個(gè)簡(jiǎn)單的調(diào)試。昨天留的三個(gè)課后練習(xí)，差不多就是今天要講的內(nèi)容

我們先來處理第一個(gè)問題：1. 查看文章下方推薦這個(gè)功能所調(diào)用的函數(shù)源碼
其實(shí)非常簡(jiǎn)單，點(diǎn)放大鏡選中那個(gè)推薦即可。

這個(gè) votePost(cb_entryId,'Digg') 就是推薦按鈕所調(diào)用的函數(shù)了，是不是非常簡(jiǎn)單。

第二個(gè)問題，定位到函數(shù)所在文件位置。
其實(shí)也是非常簡(jiǎn)單的，當(dāng)然，不熟悉控制臺(tái)的朋友也許不知道怎么看。
我在控制臺(tái)輸入 votePost 然后回車，

函數(shù)源碼粗顯啦，并且在右下角有個(gè)鏈接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:1 這個(gè)是什么意思呢？
后面的 v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1 直接忽略好了。

ps: 如果想知道這個(gè)是什么東西，其實(shí)就是個(gè)版本號(hào)，至于什么作用，往往是防止緩存的，具體自己上網(wǎng)搜索吧。
blog-common.js:1 差不多就是這個(gè)意思。。
blog-common.js 是這個(gè)函數(shù)所在的js文件
1 是代碼所在的行號(hào)。

直接點(diǎn)擊這個(gè)鏈接，就可以跳轉(zhuǎn)到 Sources 面板，這個(gè)就是源碼面板，調(diào)試最重要的一個(gè)功能，之后會(huì)慢慢介紹。

可是所有代碼都在一行，我們改怎么看? 4946 個(gè)字符呢，全縮在一行上。。
chrome 給我們提供了一個(gè)代碼格式化的功能，點(diǎn)擊下方那個(gè) Pretty print 按鈕即可格式化代碼。

格式化完畢之后就是非常美觀的代碼了，至于看不看的懂，那是另一回事了。
有的看不懂可能是代碼被UglifyJS，Google's Closure之類的工具編譯過，如 jquery.min.js 文件。
還有可能是水平太次了，暫時(shí)看不懂大神寫的代碼，那我也無能為力，你只能自己加油了努力提升實(shí)力了。
如果格式化夠找不到函數(shù)所在位置，也不要著急，有我在，慌啥？
回到剛才控制臺(tái)面板。

你欣喜的發(fā)現(xiàn)，blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7AA8fdJp_dgoE-crAT3k1:91
行號(hào)變成 91 了，現(xiàn)在再點(diǎn)擊這個(gè)鏈接，就可以跳轉(zhuǎn)到對(duì)應(yīng)格式化后的位置了，是不是超方便。。

最后一個(gè)問題，修改函數(shù)使其無效，這個(gè)最簡(jiǎn)單了，比剛才的簡(jiǎn)單多了，可是很多人不會(huì)操作所以我特地拿出來講一下。
首先，我們知道了推薦這個(gè)功能調(diào)用的函數(shù)是 votePost(cb_entryId,'Digg') ，而且他是直接寫是 html 上通過 onclick 綁定的。
所以這個(gè)函數(shù)是一個(gè)全局函數(shù)，到處都可以調(diào)用，那這意味著什么呢？
意味著我們可以修改啊，好比一個(gè)全局變量，你在哪都能修改對(duì)吧，那全局函數(shù)也是應(yīng)該道理。
所以我們直接修改為空函數(shù)即可。
votePost = function () {}; 或者 votePost = $.noop; 都可以。$.noop 是 jQuery 為我們提供的空函數(shù)，方便我們使用。

現(xiàn)在 votePost 就是一個(gè)空函數(shù)，所以你點(diǎn)擊推薦按鈕是不會(huì)發(fā)生任何事情的。
當(dāng)然刷新頁面后會(huì)重新生效，我們只是在頁面上調(diào)試修改而已，沒有去改博客園的源碼，是不可能永久生效的。
所以調(diào)試的意思就是查找與排除錯(cuò)誤的過程，如果定位到錯(cuò)誤源了，修改下然后測(cè)試，如果不對(duì)，刷新后重新修改，這樣就不必修改實(shí)際文件而導(dǎo)致不可恢復(fù)了。

今天的內(nèi)容差不多就這些了，其實(shí)現(xiàn)在很少有直接全局函數(shù)給你調(diào)試的，因?yàn)楝F(xiàn)在 jQuery 風(fēng)靡，各種 click, on 之類的事件綁定，導(dǎo)致源碼定位非常繁瑣。
好在我之前寫了一篇，比較詳細(xì)的分析了這個(gè)問題，詳情請(qǐng)參閱《淺談 jQuery 事件源碼定位問題》
其他框架我也不熟，所以沒分析，不過思路其實(shí)是差不多的，必然都會(huì)有一個(gè)事件管理機(jī)制。

今天知識(shí)點(diǎn)不多，但是要自己動(dòng)手鞏固下，不然會(huì)秒忘的。

課后練習(xí)：
1. 分析 votePost 函數(shù)是如何實(shí)現(xiàn) 推薦的。
2. 動(dòng)態(tài)調(diào)試分析 votePost。(要結(jié)合斷點(diǎn)知識(shí))

明天要講斷點(diǎn)與動(dòng)態(tài)調(diào)試，我也沒找到合適的題目，就先湊合著做吧，如果你有合適的東西需要?jiǎng)討B(tài)調(diào)試的，請(qǐng)跟帖。。

您可能感興趣的文章: