快捷導(dǎo)航

js調(diào)試系列斷點與動態(tài)調(diào)試[基礎(chǔ)篇]

更新時間：2014年06月18日 22:15:04 作者：亂碼

上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識，支持亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法，需要的朋友可以參考下

上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識，這次亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法，需要的朋友可以參考下

昨天留的課后練習(xí) 1. 分析 votePost 函數(shù)是如何實現(xiàn) 推薦的。
其實我們已經(jīng)看到了源碼，只要讀下源碼即可知道他是怎么實現(xiàn)的了。

function votePost(n, t, i) { 
 i || (i = !1); 
 var r = { 
  blogApp: currentBlogApp, 
  postId: n, 
  voteType: t, 
  isAbandoned: i 
 }; 
 $("#digg_tips").css("color", "red").html("提交中..."); 
 $.ajax({ 
  url: "/mvc/vote/VoteBlogPost.aspx", 
  type: "post", 
  dataType: "json", 
  contentType: "application/json; charset=utf-8", 
  data: JSON.stringify(r), 
  success: function(n) { 
   if (n.IsSuccess) { 
    var i = $("#" + t.toLowerCase() + "_count"); 
    r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html()) + 1) 
   } 
   $("#digg_tips").html(n.Message) 
  }, 
  error: function(n) { 
   n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉！發(fā)生了錯誤！麻煩反饋至contact@cnblogs.com") : $("#digg_tips").html(n.responseText)) 
  } 
 }); 
}

差不多就這個樣子的。
ps: 我用的是 sublime text 格式化的代碼，和chrome控制臺格式化后的結(jié)果有點不同。
也可以試試這個在線格式化工具，效果差不多：Online JavaScript beautifier

簡單讀過代碼后，可以大致知道，這個函數(shù)有 3 個參數(shù)，第一個是 postId，就是文章ID，第二個是推薦(digg) 或者反對(bury)，
但是第三個一直沒用到，而且默認(rèn)值是 false
往下看，他在 #digg_tips 處顯示 "提交中..." 字符串，接著通過 ajax 提交數(shù)據(jù)給后臺。
返回數(shù)據(jù)后，如果 n.IsSuccess 是真就在對應(yīng)的喜歡(#digg_count)或反對(#bury_count)的計數(shù)id上 +1，
不過這里看到如果 isAbandoned 的值是真的話，就計數(shù) -1。
那我們可以猜測第三個參數(shù)是撤銷推薦或者反對用的，簡單說就是我點了推薦，但是我現(xiàn)在不想推薦了，可以傳遞第三個參數(shù) true 實現(xiàn)取消推薦的作用。
我們稍后測試下。
接著是在 #digg_tips 處顯示服務(wù)器返回的 n.Message 信息。
如果 ajax 發(fā)生錯誤，是 500 錯誤就提示 "抱歉！發(fā)生了錯誤！麻煩反饋至contact@cnblogs.com" 其他狀態(tài)直接提示服務(wù)器返回的錯誤信息。
這就是大致的流程，因為這個函數(shù)簡單，所以基本上一眼就看出來了。

可能有的新人朋友問了，你怎么知道 currentBlogApp, n, t ,i 是什么值呢?
那我們來進(jìn)行下一步，動態(tài)調(diào)試好了。對于編譯過的項目，動態(tài)調(diào)試是非常有用的手段。
先定位到 votePost 源碼處，(這個昨天說過了，不太懂的話，再回去看看先。)

so easy，我們就定位到了源碼。
接下來我們點下92那個數(shù)字，進(jìn)行下斷點操作。
為什么不是在91行下斷點呢？
因為91行是函數(shù)聲明部分，沒法下斷點，我們在函數(shù)要執(zhí)行的代碼處下斷點才行。

看到 91 行的行號變成藍(lán)色了，表示這個地方已經(jīng)下了斷點了。同時，我們可以在右側(cè) Breakpoints 一欄里看到已下的斷點。
Breakpoints 這個一欄是管理所有斷點的，可以方便的跳轉(zhuǎn)到對應(yīng)斷點的位置出，以后常常會用到哦。

現(xiàn)在下完斷點了，我們回頭點下推薦。。(雖然感覺我在騙推薦，不過我真心沒這么想，當(dāng)初是隨便找了個按鈕當(dāng)練習(xí)的。)
當(dāng)你點推薦按鈕的時候，神奇的事情發(fā)生了，并沒有運行推薦功能，而是跳到了控制臺 Sources 面板里我們剛剛下的那個斷點處。

現(xiàn)在，你不僅能在右側(cè) Scope Variables(變量作用域) 一欄處看到當(dāng)前變量，而且還能把鼠標(biāo)直接移到任意變量上，就可以查看該變量的值。
Scope Variables欄目會顯示當(dāng)前作用域以及他的父級作用域，以及閉包。
是不是超方便。。(我初學(xué)閉包的時候，Scope Variables幫了我不少呢。)

我們進(jìn)行下一步，按3次 F10 就可以看到這樣的東西。

我們每按一次 F10 會執(zhí)行一條語句，剛才按了3次，就是執(zhí)行到了 $("#digg_tips").css("color", "red").html("提交中...");
所以我們可以在頁面上看到 #digg_tips 顯示提交中的字樣。
可是當(dāng)我們再次按 F10 的時候，發(fā)現(xiàn)他一路執(zhí)行下去，而沒有進(jìn)入 ajax 內(nèi)部的回調(diào)函數(shù)。

這是個糾結(jié)的問題，也是我要重點說的。
像這種回調(diào)函數(shù)，特別是異步的，我們要在回調(diào)函數(shù)內(nèi)部再次下一個斷點。
所以我們在 96 行再下個斷點即可，現(xiàn)在我們再點一下推薦依然停在了 92 行，我們直接按 F8 就可以在 ajax 的回調(diào)函數(shù)處斷下了。

現(xiàn)在，我們就可以調(diào)試回調(diào)數(shù)據(jù)了，同時可以發(fā)現(xiàn)右側(cè) Scope Variables 多了一個 Closure 的東西，這個就是閉包。
如果現(xiàn)在理解不了，那就過，這東西要大篇幅介紹，不是三言兩句就能講明白的，反正控制臺很強(qiáng)大就對了。
在看到閉包的同時，我們也看到 ajax 的返回數(shù)據(jù) n，很明顯，我的 IsSuccess 屬性為 false 沒有成功，因為他返回了一個信息 "不能推薦自己的內(nèi)容"。
是不是很有意思，動態(tài)調(diào)試，讓尋找BUG變得 so easy。

接下來，我們來實驗第三個參數(shù)。
我們在控制臺輸入 votePost(cb_entryId, 'Digg', true); 然后回車。
同樣停在了92行的斷點處，這個里就不調(diào)試了，直接F8進(jìn)入 ajax 的回調(diào)函數(shù)出。

在這里我們非常清楚的看到，當(dāng)?shù)谌齻€參數(shù)為 true 的時候，確實是取消推薦了，同時你可以看到推薦數(shù)確實 -1 了，哪怕刷新也一樣。