你是怎么調(diào)試 JavaScript 程序的？最原始的方法是用 alert() 在頁面上打印內(nèi)容，稍微改進(jìn)一點(diǎn)的方法是用 console.log() 在 JavaScript 控制臺上輸出內(nèi)容。嗯~，用這兩種土辦法確實(shí)解決了很多小型 JavaScript 腳本的調(diào)試問題。不過放著 Chrome 中功能越發(fā)強(qiáng)大的開發(fā)者工具不用實(shí)在太可惜了。本文主要介紹其中的 JavaScript? 斷點(diǎn)設(shè)置 和 調(diào)試 功能，也就是其中的 Sources Panel（以前叫 Scripts）。如果你精通 Eclipse 中的各種 Java 調(diào)試技巧，那么這里的概念都是類似。寫作本文時(shí)使用的 Chrome 版本為 25.0.1364.172。
基本環(huán)境 Sources Panel 的左邊是內(nèi)容源，包括頁面中的各種資源。其中，又分 Sources 和 Content scripts。Sources 就是頁面本身包含的各種資源，它是按照頁面中出現(xiàn)的域來組織的，這是我們要關(guān)注的。異步加載的 js 文件，在加載后也會(huì)出現(xiàn)在這里的。Content scripts 是 Chrome 的一種擴(kuò)展程序，它是按照擴(kuò)展的ID來組織的，這類擴(kuò)展實(shí)際也是嵌入在頁面中的資源，它們也可以讀寫DOM。編寫、調(diào)試這類擴(kuò)展的開發(fā)者才要關(guān)心它們，如果你的瀏覽器沒安裝任何擴(kuò)展，那么?Content scripts 就看不到任何東西。
Sources Panel 的中間主區(qū)域用于展示左邊資源文件的內(nèi)容。
Sources Panel 的右邊是調(diào)試功能區(qū)，最上面的一排按鈕分別是暫停/繼續(xù)、單步執(zhí)行、單步跳入、單步跳出、禁用/啟用所有斷點(diǎn)。下面是各種具體的功能區(qū)。稍后介紹。
注意，左右兩邊的區(qū)域默認(rèn)可能收縮在兩側(cè)沒有顯示出來，點(diǎn)擊兩側(cè)的伸縮按鈕?展示出來。左邊區(qū)域展示出來時(shí)默認(rèn)是自動(dòng)收縮狀態(tài)，點(diǎn)擊旁邊的 pin 按鈕??就不會(huì)縮回去了。
最下面還有一些功能按鈕很有用。
在源代碼上設(shè)置斷點(diǎn) 通過左邊的內(nèi)容源，打開對應(yīng)的 JavaScript 文件，鼠標(biāo)點(diǎn)擊文件的行號就可以設(shè)置和刪除斷點(diǎn)。添加的每個(gè)斷點(diǎn)都會(huì)出現(xiàn)在右側(cè)調(diào)試區(qū)的 Breakpoints 列表中，點(diǎn)擊列表中斷點(diǎn)就會(huì)定位到內(nèi)容區(qū)的斷點(diǎn)上。如果你有多個(gè)文件、多個(gè)斷點(diǎn)的話，利用?Breakpoints 列表中的斷點(diǎn)快速定位非常方便。
對于每個(gè)已添加的斷點(diǎn)都有兩種狀態(tài)：激活和禁用。剛添加的斷點(diǎn)都是激活狀態(tài)，禁用狀態(tài)就是保留斷點(diǎn)但臨時(shí)取消該斷點(diǎn)功能。在?Breakpoints 列表中每個(gè)斷點(diǎn)前面都有一個(gè)復(fù)選框，取消選中就將禁用該斷點(diǎn)。斷點(diǎn)位置的右鍵菜單中也可以禁用斷點(diǎn)。也可以在右側(cè)功能區(qū)上面按鈕臨時(shí)禁用所有已添加的斷點(diǎn)，再點(diǎn)一下恢復(fù)原狀態(tài)。
條件斷點(diǎn)：在斷點(diǎn)位置的右鍵菜單中選擇“Edit Breakpoint...”可以設(shè)置觸發(fā)斷點(diǎn)的條件，就是寫一個(gè)表達(dá)式，表達(dá)式為 true 時(shí)才觸發(fā)斷點(diǎn)。
查看斷點(diǎn)的環(huán)境 調(diào)用棧（Call Stack）：在斷點(diǎn)停下來時(shí)，右側(cè)調(diào)試區(qū)的 Call Stack 會(huì)顯示當(dāng)前斷點(diǎn)所處的方法調(diào)用棧，比如有一個(gè)函數(shù) g() 其中又調(diào)用了函數(shù) f() ，而我在 f() 中設(shè)置了一個(gè)斷點(diǎn)，那么我在 console 中執(zhí)行函數(shù) g() 的時(shí)候會(huì)觸發(fā)斷點(diǎn)，其調(diào)用棧顯示如下： 最上面是 f()，然后是 g()。調(diào)用棧中的每一層叫做一個(gè) frame，點(diǎn)擊每個(gè) frame 可以跳到該 frame 的調(diào)用點(diǎn)上。 此外，還可以在 frame 上用右鍵菜單重新開始執(zhí)行當(dāng)前 frame，也就是從該 frame 的開始處執(zhí)行。比如在函數(shù) f() 的 frame 上 Restart Frame， 斷點(diǎn)就會(huì)跳到 f() 的開頭重新執(zhí)行，context 中的變量值也會(huì)還原。這樣結(jié)合變量修改和編輯代碼等功能，就可以在當(dāng)前 frame 中反復(fù)進(jìn)行調(diào)試，而不用刷新頁面重新觸發(fā)斷點(diǎn)了。
查看變量 Call Stack 列表的下方是 Scope Variables 列表，在這里可以查看此時(shí)局部變量和全局變量的值。
執(zhí)行選擇的代碼 在斷點(diǎn)調(diào)試時(shí)，可以用鼠標(biāo)選擇想要查看的變量或表達(dá)式，然后右鍵菜單執(zhí)行“Evaluate in Console”，就可以看到該表達(dá)式的當(dāng)前的值了。
中斷下次要執(zhí)行的 JavaScript 語句 右側(cè)調(diào)試區(qū)的上面的“中斷/繼續(xù)”按鈕還有一個(gè)功能，在沒有觸發(fā)斷點(diǎn)時(shí)，點(diǎn)一下這個(gè)按鈕就會(huì)進(jìn)入“準(zhǔn)備”中斷的狀態(tài)，頁面下一次執(zhí)行 JavaScript 語句時(shí)會(huì)自動(dòng)中斷，比如觸發(fā)了一個(gè)點(diǎn)擊動(dòng)作時(shí)會(huì)執(zhí)行的代碼。
臨時(shí)修改 JavaScript 代碼 通常我們在調(diào)試代碼時(shí)習(xí)慣：修改代碼→刷新頁面→重新檢查，這么一個(gè)循環(huán)。但其實(shí) Chrome 中可以臨時(shí)修改 JS 文件中的內(nèi)容，保存（Ctrl+S）就可以立即生效，結(jié)合 Console 等功能就可以立即重新調(diào)試了。但注意這個(gè)修改是臨時(shí)的，刷新頁面修改就沒了。
異常時(shí)斷點(diǎn) 在界面下方能看到按鈕，它是設(shè)置程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開關(guān)。點(diǎn)擊該按鈕會(huì)在3種狀態(tài)間切換：

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

遇到所有異常都會(huì)中斷，包括已捕獲的情況?

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

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

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

上面 try 里面的代碼會(huì)遇到異常，但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷，那么代碼執(zhí)行到會(huì)產(chǎn)生異常的 throw 語句時(shí)就會(huì)自動(dòng)中斷；而如果是僅遇到未捕獲異常才中斷，那么這里就不會(huì)中斷。一般我們會(huì)更關(guān)心遇到未捕獲異常的情況。
在 DOM 元素上設(shè)置斷點(diǎn)
有時(shí)候我們需要監(jiān)聽某個(gè) DOM 被修改情況，而不關(guān)心是哪行代碼做的修改（也可能有多處都會(huì)對其做修改）。那么我們可以直接在 DOM 上設(shè)置斷點(diǎn)。 ?如圖所見，在元素審查的 Elements Panel 中在某個(gè)元素上右鍵菜單里可以設(shè)置三種不同情況的斷點(diǎn)：

子節(jié)點(diǎn)修改

自身屬性修改

自身節(jié)點(diǎn)被刪除

選中之后，Sources Panel 中右側(cè)的 DOM Breakpoints 列表中就會(huì)出現(xiàn)該 DOM 斷點(diǎn)。一旦執(zhí)行到要對該 DOM 做相應(yīng)修改時(shí)，代碼就會(huì)在那里停下來，如下圖所示。
XHR 斷點(diǎn) 右側(cè)調(diào)試區(qū)有一個(gè) XHR Breakpoints，點(diǎn)擊+ 并輸入 URL 包含的字符串即可監(jiān)聽該 URL 的 Ajax 請求，輸入內(nèi)容就相當(dāng)于 URL 的過濾器。如果什么都不填，那么就監(jiān)聽所有 XHR 請求。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷。
按事件類型觸發(fā)斷點(diǎn) 右側(cè)調(diào)試區(qū)的?Event Listener 列表，這里列出了各種可能的事件類型。勾選對應(yīng)的事件類型，當(dāng)觸發(fā)了該類型的事件的 JavaScript 代碼時(shí)就會(huì)自動(dòng)中斷。
調(diào)試快捷鍵 所有開發(fā)工具中的快捷鍵都可以在界面右下角的設(shè)置中查到。斷點(diǎn)調(diào)試時(shí)一般用的是 F8、F10、F11或 Shitf+F11，但在 Mac OS 上 F10 等功能鍵可能與系統(tǒng)默認(rèn)的快捷鍵沖突。沒關(guān)系，它們分別可以用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。
//@ sourceURL 給 eval 出來的代碼命名 有時(shí)候一些非常動(dòng)態(tài)的代碼是以字符串的形式通過 eval() 函數(shù)在當(dāng)前 Javascript context 中創(chuàng)建出來，而不是作為一個(gè)獨(dú)立的 js 文件加載的。這樣你在左邊的內(nèi)容區(qū)就找不到這個(gè)文件，因此很難調(diào)試。其實(shí)我們只要在 eval 創(chuàng)建的代碼末尾添加一行 “//@ sourceURL=name“?就可以給這段代碼命名（瀏覽器會(huì)特殊對待這種特殊形式的注釋），這樣它就會(huì)出現(xiàn)在左側(cè)的內(nèi)容區(qū)了，就好像你加載了一個(gè)指定名字的 js 文件一樣，可以設(shè)置斷點(diǎn)和調(diào)試了。下圖中，我們通過 eval 執(zhí)行了一段代碼，并利用?sourceURL 將它命名為?dynamicScript.js ，執(zhí)行后左側(cè)內(nèi)容區(qū)就出現(xiàn)了這個(gè)“文件”，而它的內(nèi)容就是 eval 的中的內(nèi)容。

還可以看看這個(gè)給動(dòng)態(tài)編譯出來的?CoffeeScript 代碼命名的示例：

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

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

總結(jié)

以上是生活随笔為你收集整理的Chrome 中的 JavaScript 断点设置和调试技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。