Chrome 控制檯 如何調試 javascript

轉自 http://www.cnblogs.com/ctriphire/p/4117370.htmljavascript

下面簡單介紹一下如何利用好chrome控制檯這個神器好好調試javascript代碼html

先說一下源碼定位java

你們打開測試網頁   看到頁面右下方有一個推薦的圖標嗎？右擊推薦圖標，選擇審查元素，打開谷歌控制檯，以下圖所示ajax

咱們如今想知道votePost方法到底在哪？跟着我這樣作，在Console面板裏面輸入votePost而後回車chrome

直接點擊上圖標紅的連接，控制檯將定位到Sources面板中，展現以下圖所示閉包

你們看了上面這個圖片以後估計頭都要暈了吧，這麼多js都整在一行，讓人怎麼看呀，不用擔憂，按下圖操做便可（也就是點擊中間面板左下方的Pretty print就好了）函數

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

知道了怎麼樣查看某一個按鈕的源碼，那接下來的工做即是調試了，調試第一步須要作的即是設置斷點，其實設置斷點很簡單，點擊一下上圖所示的92便可，這時你會發現92行號旁邊會多了一個圖標，這裏解釋一下爲何不在91處設置斷點，你能夠試下，事實上根本就無法在91處上設置斷點，由於它是函數的定義處，因此無法在此設置斷點。測試

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

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

其中值得一提的是，當咱們點擊「推薦」按鈕進行調試的時候會發現，無論咱們是按的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就行了，不信你試試！哈哈