快捷導(dǎo)航

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

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

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

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

昨天留的課后練習(xí) 1. 分析 votePost 函數(shù)是如何實(shí)現(xiàn) 推薦的。
其實(shí)我們已經(jīng)看到了源碼，只要讀下源碼即可知道他是怎么實(shí)現(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ā)生了錯(cuò)誤！麻煩反饋至contact@cnblogs.com") : $("#digg_tips").html(n.responseText)) 
  } 
 }); 
}

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

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

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

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

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

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

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

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

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

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

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

接下來，我們來實(shí)驗(yàn)第三個(gè)參數(shù)。
我們?cè)诳刂婆_(tái)輸入 votePost(cb_entryId, 'Digg', true); 然后回車。
同樣停在了92行的斷點(diǎn)處，這個(gè)里就不調(diào)試了，直接F8進(jìn)入 ajax 的回調(diào)函數(shù)出。

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