昨天我們見識到了斷點的強悍，在斷點的配合下進行動態調試，讓讀代碼變的輕松不少，特別是ajax之類的。
在昨天的課后練習中，確實增加了不少難度，因為 提交評論 按鈕是用 jQuery 綁定的事件。
所以不能直接在元素上看到函數調用，也沒辦法一下子定位到函數源碼處。
如果找不到源碼位置，我們就沒法下斷點進行動態調試了。
我們來做下昨天的練習吧，先找到他的事件源碼。
沒發現任何有價值的東西，只是一個很普通的節點而已。。
如果不是通過 onclick 綁定是函數，我們沒法直接找到他的源碼處，那怎么辦？
好在他用的是 jQuery, 我們根據《淺談 jQuery 事件源碼定位問題》可知，只要調用如下代碼即可獲得事件了。
function lookEvents (elem) {
return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 獲取綁定的事件
經過代碼格式化后，定位到如下源碼處。
可是很明顯，這個不是真正的源碼，只是在 click 事件里調用了 commentManager.postComment 方法而已。
所以繼續定位。
進入472行發現如下代碼
this.postComment = function() {
$("#btn_comment_submit").val()=="修改" && $("#comment_edit_id").html != "" ?commentManager.UpdateComment():commentManager.PostNewComment()
};
很明顯，也不是我們要的最終代碼，不過這個也非常重要，他是根據按鈕值來進行提交的。
如果是 修改 按鈕，就執行 UpdateComment 方法，否則就執行 PostNewComment 方法。
我們應該繼續跟入 commentManager.PostNewComment 方法，走起。。
最終定位到 478 行出，這就是提交評論的按鈕代碼了，我們就里就不分析了，感興趣的童鞋自己去讀代碼吧。
第二題 2. 動態調試這個 提交評論 事件的執行過程。
我們也不做了，源碼找到了，根據昨天的步驟，自己去動態調試一遍試試。一定要動手練習一下，否則會秒忘的。
正如之前所說，如果看看就會了，那我們每個人都會是高考狀元不是么。。所以還是要動手練。
我們進入今天的正題，debugger 斷點。
這是什么東西呢？
字面翻譯叫做 調試器，其實就是代碼斷點而已，用法非常簡單，在你寫代碼的時候，想要斷點調試的地方寫上 debugger 即可。
如：
var a, b, c; debugger; a = 11; b = 22; c = a + b; console.log(c);
現在你點擊代碼右上角的 運行 按鈕試試，看到一個彈層輸出 33，斷點沒有斷下，斷點壞掉了？
其實是因為你沒開控制台，打開控制台后，再點擊 運行按鈕試試。發現已經斷下了，停在如下代碼處。
可能你覺得，我直接在控制台點下行號下斷點不是一樣么，為什么要用debugger呢？
剛才調試jQuery事件的時候，你也發現了，非常麻煩，當然如果是你自己寫的項目找源碼可能比較簡單，
但是再簡單也比不過直接在源碼加上debugger方便啊。
特別是各種回調的時候就是 debugger 大顯身手的時候。
好了，我們來看個綜合調試練習吧。
(function(){ // 為了獨立作用域
function add(a, b) {
return a + b;
}
debugger;
var sum = 0;
for (var i=0; i<10; i++) {
sum += add(i, 1);
}
console.log(sum);
})();
為了獨立作用域，我加了個自調用函數。
如果不加 自調用函數，add, i, sum 變量就會在 Global 下，你可以點開 Global 看看里面都有些什么。
加了個自調用函數就可以非常清晰的調試我們的代碼了，所以變量都在 Local 下。
我們來看右上角的調試按鈕
前四個按鈕最重要，一定要記住他們的功能，后面兩個按鈕暫時不管。。
| 快捷鍵 | 功能 |
|---|---|
| F8 | 恢復運行 |
| F10 | 步過，遇到自定義函數也當成一個語句執行，而不會進入函數內部 |
| F11 | 步入，遇到自定義函數就跟入到函數內部 |
| Shift + F11 | 步出，跳出當前自定義函數 |
我們分別來試試這些按鈕的功能。
運行下面代碼，停在了 debugger 斷點處。
(function() { // 為了獨立作用域
function add(a, b) {
a = a + a;
b = b + b
return a + b;
}
debugger;
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += add(i, 1);
}
debugger;
console.log(sum);
})();
我們按下 F8 看看會發生什么。
發現他停在了下一個 debugger 處，所以說 F8 是 恢復運行，但是遇到斷點會繼續停下。
我們重新運行代碼還是停在第一個 debugger 處，來按下 F10，一直按。
會發現在 for 那里會來回跳，因為這里是循環啊。。
改按 F11 試試，你會發現執行 sum += add(i, 1); 的時候會跳到 add 函數內部代碼處。
所以，我們可以知道，F10 不會進入自定義函數內部，而 F11 會進入。
就也是很多新人在調試 jQuery 代碼的時候老是遇到的一個問題。
比如:
debugger;
var digg_count = $('#digg_count').html();
console.log('本篇推薦數為', digg_count);
運行后，當你按 F11，就會進入到 jQuery 庫代碼內部，然后你調試，越痛苦，都不知道自己在哪了。
其實方法非常簡單，不小心進入到你不知道或者不想調試的函數內部時，按鈕 Shift + F11 即可退回到剛才調用函數的地方。
你可以試試，當你調試這個代碼的時候，不小心進入到 jQuery 內部，然后按 Shift + F11 就會到剛才那個地方，並且函數已經執行完畢了。
好了今天的內容差不多就這些了，可能感覺有點亂，今天寫的比較遲，沒有梳理好思路，大家將就這看吧。