你是怎么調(diào)試 JavaScript 程序的？最原始的方法是用 alert() 在頁面上打印內(nèi)容，稍微改進一點的方法是用 console.log() 在 JavaScript 控制臺上輸出內(nèi)容。嗯~，用這兩種土辦法確實解決了很多小型 JavaScript 腳本的調(diào)試問題。不過放著 Chrome 中功能越發(fā)強大的開發(fā)者工具不用實在太可惜了。本文主要介紹其中的 JavaScript斷點設(shè)置和調(diào)試功能，也就是其中的 Sources Panel（以前叫 Scripts）。如果你精通 Eclipse 中的各種 Java 調(diào)試技巧，那么這里的概念都是類似。寫作本文時使用的 Chrome 版本為 25.0.1364.172。

基本環(huán)境

SourcesPanel 的左邊是內(nèi)容源，包括頁面中的各種資源。其中，又分 Sources 和 Content scripts。Sources 就是頁面本身包含的各種資源，它是按照頁面中出現(xiàn)的域來組織的，這是我們要關(guān)注的。異步加載的 js 文件，在加載后也會出現(xiàn)在這里的。Content scripts 是 Chrome 的一種擴展程序，它是按照擴展的ID來組織的，這類擴展實際也是嵌入在頁面中的資源，它們也可以讀寫DOM。編寫、調(diào)試這類擴展的開發(fā)者才要關(guān)心它們，如果你的瀏覽器沒安裝任何擴展，那么Content scripts 就看不到任何東西。

Sources Panel 的中間主區(qū)域用于展示左邊資源文件的內(nèi)容。

Sources Panel 的右邊是調(diào)試功能區(qū)，最上面的一排按鈕分別是暫停/繼續(xù)、單步執(zhí)行、單步跳入、單步跳出、禁用/啟用所有斷點。下面是各種具體的功能區(qū)。稍后介紹。

注意，左右兩邊的區(qū)域默認(rèn)可能收縮在兩側(cè)沒有顯示出來，點擊兩側(cè)的伸縮按鈕展示出來。左邊區(qū)域展示出來時默認(rèn)是自動收縮狀態(tài)，點擊旁邊的 pin 按鈕就不會縮回去了。

最下面還有一些功能按鈕很有用。

在源代碼上設(shè)置斷點

通過左邊的內(nèi)容源，打開對應(yīng)的 JavaScript 文件，鼠標(biāo)點擊文件的行號就可以設(shè)置和刪除斷點。添加的每個斷點都會出現(xiàn)在右側(cè)調(diào)試區(qū)的 Breakpoints 列表中，點擊列表中斷點就會定位到內(nèi)容區(qū)的斷點上。如果你有多個文件、多個斷點的話，利用Breakpoints 列表中的斷點快速定位非常方便。

對于每個已添加的斷點都有兩種狀態(tài)：激活和禁用。剛添加的斷點都是激活狀態(tài)，禁用狀態(tài)就是保留斷點但臨時取消該斷點功能。在Breakpoints 列表中每個斷點前面都有一個復(fù)選框，取消選中就將禁用該斷點。斷點位置的右鍵菜單中也可以禁用斷點。也可以在右側(cè)功能區(qū)上面按鈕臨時禁用所有已添加的斷點，再點一下恢復(fù)原狀態(tài)。

條件斷點：在斷點位置的右鍵菜單中選擇“Edit Breakpoint...”可以設(shè)置觸發(fā)斷點的條件，就是寫一個表達式，表達式為 true 時才觸發(fā)斷點。查看斷點的環(huán)境調(diào)用棧（Call Stack）：在斷點停下來時，右側(cè)調(diào)試區(qū)的 Call Stack 會顯示當(dāng)前斷點所處的方法調(diào)用棧，比如有一個函數(shù) g() 其中又調(diào)用了函數(shù) f() ，而我在 f() 中設(shè)置了一個斷點，那么我在 console 中執(zhí)行函數(shù) g() 的時候會觸發(fā)斷點，其調(diào)用棧顯示如下：

最上面是 f()，然后是 g()。調(diào)用棧中的每一層叫做一個 frame，點擊每個 frame 可以跳到該 frame 的調(diào)用點上。

此外，還可以在 frame 上用右鍵菜單重新開始執(zhí)行當(dāng)前 frame，也就是從該 frame 的開始處執(zhí)行。比如在函數(shù) f() 的 frame 上 Restart Frame， 斷點就會跳到 f() 的開頭重新執(zhí)行，context 中的變量值也會還原。這樣結(jié)合變量修改和編輯代碼等功能，就可以在當(dāng)前 frame 中反復(fù)進行調(diào)試，而不用刷新頁面重新觸發(fā)斷點了。查看變量

Call Stack 列表的下方是 Scope Variables 列表，在這里可以查看此時局部變量和全局變量的值。執(zhí)行選擇的代碼

在斷點調(diào)試時，可以用鼠標(biāo)選擇想要查看的變量或表達式，然后右鍵菜單執(zhí)行“Evaluate in Console”，就可以看到該表達式的當(dāng)前的值了。中斷下次要執(zhí)行的 JavaScript 語句右側(cè)調(diào)試區(qū)的上面的“中斷/繼續(xù)”按鈕還有一個功能，在沒有觸發(fā)斷點時，點一下這個按鈕就會進入“準(zhǔn)備”中斷的狀態(tài)，頁面下一次執(zhí)行 JavaScript 語句時會自動中斷，比如觸發(fā)了一個點擊動作時會執(zhí)行的代碼。臨時修改 JavaScript 代碼通常我們在調(diào)試代碼時習(xí)慣：修改代碼→刷新頁面→重新檢查，這么一個循環(huán)。但其實 Chrome 中可以臨時修改 JS 文件中的內(nèi)容，保存（Ctrl+S）就可以立即生效，結(jié)合 Console 等功能就可以立即重新調(diào)試了。但注意這個修改是臨時的，刷新頁面修改就沒了。

異常時斷點

在界面下方能看到按鈕，它是設(shè)置程序運行時遇到異常時是否中斷的開關(guān)。點擊該按鈕會在3種狀態(tài)間切換：

默認(rèn)遇到異常不中斷

遇到所有異常都會中斷，包括已捕獲的情況

僅在出現(xiàn)未捕獲的異常時才中斷

主要解釋一下狀態(tài)2和狀態(tài)3的區(qū)別

try{
throw 'a exception';
}catch(e){
console.log(e);
}

上面 try 里面的代碼會遇到異常，但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷，那么代碼執(zhí)行到會產(chǎn)生異常的 throw 語句時就會自動中斷；而如果是僅遇到未捕獲異常才中斷，那么這里就不會中斷。一般我們會更關(guān)心遇到未捕獲異常的情況。

在 DOM 元素上設(shè)置斷點

有時候我們需要監(jiān)聽某個 DOM 被修改情況，而不關(guān)心是哪行代碼做的修改（也可能有多處都會對其做修改）。那么我們可以直接在 DOM 上設(shè)置斷點。

如圖所見，在元素審查的 Elements Panel 中在某個元素上右鍵菜單里可以設(shè)置三種不同情況的斷點：子節(jié)點修改自身屬性修改自身節(jié)點被刪除選中之后，Sources Panel 中右側(cè)的 DOM Breakpoints 列表中就會出現(xiàn)該 DOM 斷點。一旦執(zhí)行到要對該 DOM 做相應(yīng)修改時，代碼就會在那里停下來，如下圖所示。

XHR 斷點

右側(cè)調(diào)試區(qū)有一個 XHR Breakpoints，點擊+ 并輸入 URL 包含的字符串即可監(jiān)聽該 URL 的 Ajax 請求，輸入內(nèi)容就相當(dāng)于 URL 的過濾器。如果什么都不填，那么就監(jiān)聽所有 XHR 請求。一旦 XHR 調(diào)用觸發(fā)時就會在 request.send() 的地方中斷。

按事件類型觸發(fā)斷點

右側(cè)調(diào)試區(qū)的Event Listener 列表，這里列出了各種可能的事件類型。勾選對應(yīng)的事件類型，當(dāng)觸發(fā)了該類型的事件的 JavaScript 代碼時就會自動中斷。

調(diào)試快捷鍵

所有開發(fā)工具中的快捷鍵都可以在界面右下角的設(shè)置中查到。斷點調(diào)試時一般用的是 F8、F10、F11或 Shitf+F11，但在 Mac OS 上 F10 等功能鍵可能與系統(tǒng)默認(rèn)的快捷鍵沖突。沒關(guān)系，它們分別可以用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。//@ sourceURL 給 eval 出來的代碼命名有時候一些非常動態(tài)的代碼是以字符串的形式通過 eval() 函數(shù)在當(dāng)前 Javascript context 中創(chuàng)建出來，而不是作為一個獨立的 js 文件加載的。這樣你在左邊的內(nèi)容區(qū)就找不到這個文件，因此很難調(diào)試。其實我們只要在 eval 創(chuàng)建的代碼末尾添加一行 “//@ sourceURL=name“就可以給這段代碼命名（瀏覽器會特殊對待這種特殊形式的注釋），這樣它就會出現(xiàn)在左側(cè)的內(nèi)容區(qū)了，就好像你加載了一個指定名字的 js 文件一樣，可以設(shè)置斷點和調(diào)試了。下圖中，我們通過 eval 執(zhí)行了一段代碼，并利用sourceURL 將它命名為dynamicScript.js ，執(zhí)行后左側(cè)內(nèi)容區(qū)就出現(xiàn)了這個“文件”，而它的內(nèi)容就是 eval 的中的內(nèi)容。還可以看看這個給動態(tài)編譯出來的CoffeeScript 代碼命名的示例：

var coffee = CoffeeScript.compile(code.value)+ "http://@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
eval(coffee);

實際上，//@ sourceURL 不僅僅可以用在 eval 的代碼中，任何 js 文件、甚至是 Javascript Console 輸入的代碼都可以用，效果一樣！格式化代碼（Pretty Print）按鈕用于把雜亂的代碼重新格式化為漂亮的代碼，比如一些已被壓縮的 js 文件基本沒法看、更沒法調(diào)試。點一下格式化，再點一下就取消格式化。美化前
美化后參考資料：Chrome Developer Tools 官方文檔

最新評論