Chrome 控制台 如何調試javascript

上面的文章已經大致介紹了一下console對象具體有哪些方面以及基本的應用，下面簡單介紹一下如何利用好chrome控制台這個神器好好調試javascript代碼（這個才是我們真正能用到實處的地方）

1、先說一下源碼定位

大家開啟測試網頁   看到頁面右下方有一個推薦的表徵圖嗎？右擊推薦表徵圖，選擇審查元素，開啟Google控制台，如下圖所示

我們現在想知道votePost方法到底在哪？跟著我這樣做，在Console面板裡面輸入votePost然後斷行符號

直接點擊上表徵圖紅的連結，控制台將定位到Sources面板中，展示如下圖所示

大家看了上面這個圖片之後估計頭都要暈了吧，這麼多js都整在一行，讓人怎麼看呀，不用擔心，按下圖操作即可（也就是點擊中間面板左下方的Pretty print就行了）

這時我們再回到Console面板時會驚奇的發現原來的連結後面的1現在變成91了（其實這裡的數字1或者91就是代表votePost方法在源碼中的行號 ）現在看出Pretty print按鈕的強大之處了吧

知道了怎麼樣查看某一個按鈕的源碼，那接下來的工作便是調試了，調試第一步需要做的便是設定斷點，其實設定斷點很簡單，點擊一下上圖所示的92即 可，這時你會發現92行號旁邊會多了一個表徵圖，這裡解釋一下為什麼不在91處設定斷點，你可以試下，事實上根本就沒法在91處上設定斷點，因為它是函數的 定義處，所以沒法在此設定斷點。

設定好了斷點後，你就會在右邊Breakpoints方框裡看到剛剛設定的斷點。

我們先來介紹一下用到的調試快速鍵吧（事實上我們也可以不用下表所示的快速鍵，直接點擊上圖所示右側欄最上層的一排按鈕來進行調試，具體用哪個按鈕，把滑鼠放到按鈕上方一會就會顯示它相應的提示）

快速鍵	功能
F8	恢複運行
F10	步過，遇到自訂函數也當成一個語句執行，而不會進入函數內部
F11	步入，遇到自訂函數就跟入到函數內部
Shift + F11	步出，跳出當前自訂函數

其中值得一提的是，當我們點擊“推薦”按鈕進行調試的時候會發現，不管我們是按的F10進行調試還是按F11進行逐步調試，都沒法進行$.ajax函數內部，即使我們在函數內部設定了斷點也沒有辦法進入，這裡按F8才是真正起效果的，不信你試試。

當我們在調試的時候，右側Scope Variables裡面會顯示當前範圍以及他的父級範圍，以及閉包。你不僅能在右側 Scope Variables(變數範圍) 一欄處看到當前變數，而且還能把滑鼠直接移到任意變數上，就可以查看該變數的值。

用圖說話（哈哈）

剛剛我們介紹的只是在html裡面能夠看得到它綁定了onclick事件，這樣我們就找到它綁定的js函數，如果它是在jQuery頁面載入完成函數裡面綁定的，這時候我們怎麼知道它綁定的是哪個js函數呢，如果我們不知道綁定的js函數就更加不用說調試進去了

下面介紹一下如何查看，還是以剛剛那個測試網頁為例子吧，但是這次我們來看“提交評論”作說明吧，

右擊“提交評論”-->審核元素，我們可以清楚的看到在這個按鈕上未綁定任何事件。在Console面板內輸入如下代碼

function lookEvents (elem) {     return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" ); } var event = lookEvents($("#btn_comment_submit")[0]); // 擷取綁定的事件

如下圖所示：

按照上述介紹的方法定位到具體的blog-common.js裡面，找到postComment  然後一層層的找到具體的代碼，再設定斷點就好了。

最後介紹一下一個神器，很好用的debugger

如果你自己寫的代碼，你執行的時候想讓它在某一處停下來，只要寫上的debugger就好了，不信你試試！哈哈