使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧

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

基本環(huán)境

SourcesPanel 的左邊是內(nèi)容源，包括頁(yè)面中的各種資源。其中，又分 Sources 和 Content scripts。
Sources 就是頁(yè)面本身包含的各種資源，它是按照頁(yè)面中出現(xiàn)的域來(lái)組織的，這是我們要關(guān)注的。異步
加載的 js 文件，在加載后也會(huì)出現(xiàn)在這里的。Content scripts 是 Chrome 的一種擴(kuò)展程序，它是按
照擴(kuò)展的ID來(lái)組織的，這類(lèi)擴(kuò)展實(shí)際也是嵌入在頁(yè)面中的資源，它們也可以讀寫(xiě)DOM。編寫(xiě)、調(diào)試這類(lèi)擴(kuò)
展的開(kāi)發(fā)者才要關(guān)心它們，如果你的瀏覽器沒(méi)安裝任何擴(kuò)展，那么Content scripts 就看不到任何東西
。
Sources Panel 的中間主區(qū)域用于展示左邊資源文件的內(nèi)容。
Sources Panel 的右邊是調(diào)試功能區(qū)，最上面的一排按鈕分別是暫停/繼續(xù)、單步執(zhí)行、單步跳入、單步
跳出、禁用/啟用所有斷點(diǎn)。下面是各種具體的功能區(qū)。稍后介紹。
注意，左右兩邊的區(qū)域默認(rèn)可能收縮在兩側(cè)沒(méi)有顯示出來(lái)，點(diǎn)擊兩側(cè)的伸縮按鈕展示出來(lái)。左邊區(qū)域展
示出來(lái)時(shí)默認(rèn)是自動(dòng)收縮狀態(tài)，點(diǎn)擊旁邊的 pin 按鈕就不會(huì)縮回去了。
最下面還有一些功能按鈕很有用。

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

通過(guò)左邊的內(nèi)容源，打開(kāi)對(duì)應(yīng)的 JavaScript 文件，鼠標(biāo)點(diǎn)擊文件的行號(hào)就可以設(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)快速定位非常方便。
對(duì)于每個(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)的條件，就是寫(xiě)一

個(gè)表達(dá)式，表達(dá)式為 true 時(shí)才觸發(fā)斷點(diǎn)。查看斷點(diǎn)的環(huán)境調(diào)用棧（Call Stack）：在斷點(diǎn)停下來(lái)時(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 上用右鍵菜單重新開(kāi)始執(zhí)行當(dāng)前 frame，也就是從該 frame 的開(kāi)始處執(zhí)行。比
如在函數(shù) f() 的 frame 上 Restart Frame， 斷點(diǎn)就會(huì)跳到 f() 的開(kāi)頭重新執(zhí)行，context 中的變量
值也會(huì)還原。這樣結(jié)合變量修改和編輯代碼等功能，就可以在當(dāng)前 frame 中反復(fù)進(jìn)行調(diào)試，而不用刷新
頁(yè)面重新觸發(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 語(yǔ)句右側(cè)調(diào)試區(qū)的上面的“中斷/

繼續(xù)”按鈕還有一個(gè)功能，在沒(méi)有觸發(fā)斷點(diǎn)時(shí)，點(diǎn)一下這個(gè)按鈕就會(huì)進(jìn)入“準(zhǔn)備”中斷的狀態(tài)，頁(yè)面下

一次執(zhí)行 JavaScript 語(yǔ)句時(shí)會(huì)自動(dòng)中斷，比如觸發(fā)了一個(gè)點(diǎn)擊動(dòng)作時(shí)會(huì)執(zhí)行的代碼。臨時(shí)修改?

JavaScript 代碼通常我們?cè)谡{(diào)試代碼時(shí)習(xí)慣：修改代碼→刷新頁(yè)面→重新檢查，這么一個(gè)循環(huán)。但其實(shí)?

Chrome 中可以臨時(shí)修改 JS 文件中的內(nèi)容，保存（Ctrl+S）就可以立即生效，結(jié)合 Console 等功能就

可以立即重新調(diào)試了。但注意這個(gè)修改是臨時(shí)的，刷新頁(yè)面修改就沒(méi)了。
異常時(shí)斷點(diǎn)
在界面下方能看到按鈕，它是設(shè)置程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開(kāi)關(guān)。點(diǎn)擊該按鈕會(huì)在3種狀態(tài)間切
換：
默認(rèn)遇到異常不中斷
遇到所有異常都會(huì)中斷，包括已捕獲的情況
僅在出現(xiàn)未捕獲的異常時(shí)才中斷
主要解釋一下?tīng)顟B(tài)2和狀態(tài)3的區(qū)別
try{ throw 'a exception'; }catch(e){ console.log(e); }
上面 try 里面的代碼會(huì)遇到異常，但是后面的 catch 代碼能夠捕獲該異常。如果是所有異常都中斷，

那么代碼執(zhí)行到會(huì)產(chǎn)生異常的 throw 語(yǔ)句時(shí)就會(huì)自動(dòng)中斷；而如果是僅遇到未捕獲異常才中斷，那么這

里就不會(huì)中斷。一般我們會(huì)更關(guān)心遇到未捕獲異常的情況。
在 DOM 元素上設(shè)置斷點(diǎn)
有時(shí)候我們需要監(jiān)聽(tīng)某個(gè) DOM 被修改情況，而不關(guān)心是哪行代碼做的修改（也可能有多處都會(huì)對(duì)其做修

改）。那么我們可以直接在 DOM 上設(shè)置斷點(diǎn)。


如圖所見(jià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í)行到要對(duì)該 DOM 做相應(yīng)修改時(shí)，代碼就會(huì)在那里停下來(lái)，如下圖所示。
XHR 斷點(diǎn)
右側(cè)調(diào)試區(qū)有一個(gè) XHR Breakpoints，點(diǎn)擊+ 并輸入 URL 包含的字符串即可監(jiān)聽(tīng)該 URL 的 Ajax 請(qǐng)求
，輸入內(nèi)容就相當(dāng)于 URL 的過(guò)濾器。如果什么都不填，那么就監(jiān)聽(tīng)所有 XHR 請(qǐng)求。一旦 XHR 調(diào)用觸發(fā)
時(shí)就會(huì)在 request.send() 的地方中斷。
按事件類(lèi)型觸發(fā)斷點(diǎn)
右側(cè)調(diào)試區(qū)的Event Listener 列表，這里列出了各種可能的事件類(lèi)型。勾選對(duì)應(yīng)的事件類(lèi)型，當(dāng)觸發(fā)了

該類(lèi)型的事件的 JavaScript 代碼時(shí)就會(huì)自動(dòng)中斷。

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

一樣，可以設(shè)置斷點(diǎn)和調(diào)試了。下圖中，我們通過(guò) eval 執(zhí)行了一段代碼，并利用sourceURL 將它命名

為dynamicScript.js ，執(zhí)行后左側(cè)內(nèi)容區(qū)就出現(xiàn)了這個(gè)“文件”，而它的內(nèi)容就是 eval 的中的內(nèi)容。

還可以看看這個(gè)給動(dòng)態(tài)編譯出來(lái)的CoffeeScript 代碼命名的示例：
var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value ||?


"Coffeeeeeeee!");
eval(coffee);
實(shí)際上，//@ sourceURL 不僅僅可以用在 eval 的代碼中，任何 js 文件、甚至是 Javascript Console?


輸入的代碼都可以用，效果一樣！格式化代碼（Pretty Print）按鈕用于把雜亂的代碼重新格式化為漂


亮的代碼，比如一些已被壓縮的 js 文件基本沒(méi)法看、更沒(méi)法調(diào)試。點(diǎn)一下格式化，再點(diǎn)一下就取消格


式化。
========

JavaScript調(diào)試技巧之console.log()詳解

對(duì)于JavaScript程序的調(diào)試，相比于alert()，使用console.log()是一種更好的方式，原因在于：

alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行，從而造成副作用；而console.log()僅在控制臺(tái)中打印相關(guān)

信息，因此不會(huì)造成類(lèi)似的顧慮

一、什么是console.log()？
除了一些很老版本的瀏覽器，現(xiàn)今大多數(shù)瀏覽器都自帶調(diào)試功能；即使沒(méi)有調(diào)試功能，也可以通過(guò)安裝

插件來(lái)進(jìn)行補(bǔ)充。比如，老版本的Firefox沒(méi)有自帶調(diào)試工具，在這種情況下可以通過(guò)安裝Firebug插件

來(lái)添加調(diào)試功能。在具備調(diào)試功能的瀏覽器上，window對(duì)象中會(huì)注冊(cè)一個(gè)名為console的成員變量，指代

調(diào)試工具中的控制臺(tái)。通過(guò)調(diào)用該console對(duì)象的log()函數(shù)，可以在控制臺(tái)中打印信息。比如，以下代

碼將在控制臺(tái)中打印”Sample log”：
復(fù)制代碼 代碼如下:
window.console.log("Sample log");

上述代碼可以忽略window對(duì)象而直接簡(jiǎn)寫(xiě)為：
復(fù)制代碼 代碼如下:
console.log("Sample log");

console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象。與alert()函數(shù)類(lèi)似，console.log()也可

以接受換行符\n以及制表符\t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到

。不同的瀏覽器中console.log()行為可能會(huì)有所不同， 本文主要探討Firebug中console.log()的使用?

。
二、兼容沒(méi)有調(diào)試控制臺(tái)的瀏覽器
對(duì)于缺少調(diào)試控制臺(tái)的老版本瀏覽器，window中的console對(duì)象并不存在，因此直接使用console.log()

語(yǔ)句可能會(huì)在瀏覽器內(nèi)部造成錯(cuò)誤(空指針錯(cuò)誤)，并最終導(dǎo)致某些老版本瀏覽器的崩潰。為了解決這一

問(wèn)題，可以人為定義console對(duì)象，并聲明該console對(duì)象的log函數(shù)為空函數(shù)；這樣，當(dāng)console.log()

語(yǔ)句執(zhí)行時(shí)，這些老版本的瀏覽器將不會(huì)做任何事情：
代碼如下:
if(!window.console){window.console = {log : function(){}}; }

不過(guò)，在大多數(shù)情況下，沒(méi)有必要去做這種兼容性工作 — console.log()等調(diào)試代碼應(yīng)當(dāng)從最終的產(chǎn)品

代碼中刪除掉。
三、使用參數(shù)
與alert()函數(shù)類(lèi)似，console.log()也可以接受變量并將其與別的字符串進(jìn)行拼接：
復(fù)制代碼 代碼如下:
//Use variable
var name = "Bob";
console.log("The name is: " + name);

與alert()函數(shù)不同的是，console.log()還可以接受變量作為參數(shù)傳遞到字符串中，其具體語(yǔ)法與C語(yǔ)言

中的printf語(yǔ)法一致：
復(fù)制代碼 代碼如下:
//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);

上述代碼的執(zhí)行結(jié)果為：”Alex is 42 years old.”
四、使用其它日志級(jí)別
除了console.log()，Firebug還支持多種不同的日志級(jí)別：debug、info、warn、error。以下代碼將在

控制臺(tái)中打印這些不同日志級(jí)別的信息：
代碼如下:
//Use different logging level console.log("Log level"); console.debug("Debug level"); console.info("Info level"); console.warn("Warn level"); console.error("Error level");

從Firebug控制臺(tái)中可以看到，不同日志級(jí)別的打印信息，其顏色和圖標(biāo)是不一樣的；同時(shí)，可以在控制

臺(tái)中選擇不同的日志級(jí)別來(lái)對(duì)這些信息進(jìn)行過(guò)濾：?
========

JS調(diào)試必備的5個(gè)debug技巧

我一直使用printf調(diào)試程序，一般來(lái)說(shuō)都是比較順利，但有時(shí)候，你會(huì)發(fā)現(xiàn)需要更好的方法。下面幾個(gè)


JavaScript技巧相信你一定會(huì)覺(jué)得十分有用

1. debugger;
我以前也說(shuō)過(guò)，你可以在JavaScript代碼中加入一句debugger;來(lái)手工造成一個(gè)斷點(diǎn)效果。
需要帶有條件的斷點(diǎn)嗎？你只需要用if語(yǔ)句包圍它：
復(fù)制代碼 代碼如下:
if (somethingHappens) {
? debugger;
}


但要記住在程序發(fā)布前刪掉它們。
2. 設(shè)置在DOM node發(fā)生變化時(shí)觸發(fā)斷點(diǎn)
有時(shí)候你會(huì)發(fā)現(xiàn)DOM不受你的控制，自己會(huì)發(fā)生一些奇怪的變化，讓你很難找出問(wèn)題的根源。
谷歌瀏覽器的開(kāi)發(fā)工具里有一個(gè)超級(jí)好用的功能，專(zhuān)門(mén)可以對(duì)付這種情況，叫做“Break on…”，你在


DOM節(jié)點(diǎn)上右鍵，就能看到這個(gè)菜單項(xiàng)。
斷點(diǎn)的觸發(fā)條件可以設(shè)置成這個(gè)節(jié)點(diǎn)被刪除、節(jié)點(diǎn)的屬性有任何變化，或它的某個(gè)子節(jié)點(diǎn)有變化發(fā)生。


3. Ajax 斷點(diǎn)
XHR斷點(diǎn)，或Ajax斷點(diǎn)，就像它們的名字一樣，可以讓我們?cè)O(shè)置一個(gè)斷點(diǎn)，在特點(diǎn)的Ajax調(diào)用發(fā)生時(shí)觸發(fā)

它們。
當(dāng)你在調(diào)試Web應(yīng)用的網(wǎng)絡(luò)傳輸時(shí)，這一招非常的有效。



4. 移動(dòng)設(shè)備模擬環(huán)境
谷歌瀏覽器里有一些非常有趣的模擬移動(dòng)設(shè)備的工具，幫助我們調(diào)試程序在移動(dòng)設(shè)備里的運(yùn)行情況。
找到它的方法是：按F12，調(diào)出開(kāi)發(fā)者工具，然后按ESC鍵(當(dāng)前tab不能是Console)，你就會(huì)看到第二層


調(diào)試窗口出現(xiàn)，里面的Emulation標(biāo)簽頁(yè)里有各種模擬設(shè)備可選。
當(dāng)然，這不會(huì)就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。



5. 使用Audits改進(jìn)你的網(wǎng)站
YSlow是一個(gè)非常棒的工具。谷歌瀏覽器的開(kāi)發(fā)者工具里也有一個(gè)非常類(lèi)似的工具，叫Audits。
它可快速的審計(jì)你的網(wǎng)站，給你提出非常實(shí)際有效的優(yōu)化你的網(wǎng)站的建議和方法。


還有其它的嗎？
沒(méi)有這些工具，我不知道將如何開(kāi)發(fā)。我還會(huì)寫(xiě)更多的關(guān)于這方面的技巧——一旦我有所發(fā)現(xiàn)，請(qǐng)關(guān)注

我的最新文章。
========

必備的JS調(diào)試技巧匯總

試想一下：出現(xiàn)了某個(gè)bug，有人用幾分鐘就搞定了，有人用了半天或者一天都找不到原因所在。你愿意


當(dāng)前者還是后者呢？想當(dāng)前者的就請(qǐng)好好看完本篇文章吧。文中涉及較多Gif演示動(dòng)畫(huà)請(qǐng)注意。


前言：任何一個(gè)編程者都少不了要去調(diào)試代碼，不管你是高手還是菜鳥(niǎo)，調(diào)試程序都是一項(xiàng)必不可少的


工作。一般來(lái)說(shuō)調(diào)試程序是在編寫(xiě)代碼之后或測(cè)試期修改Bug 時(shí)進(jìn)行的，往往在調(diào)試代碼期間更加能夠


體現(xiàn)出編程者的水平高低以及分析問(wèn)題的準(zhǔn)確度。不少初學(xué)者在尋找錯(cuò)誤原因時(shí)，總是不得要領(lǐng)，花費(fèi)


了大量時(shí)間卻無(wú)法解決一些最終證明是相當(dāng)簡(jiǎn)單的Bug。掌握各種調(diào)試技巧，必定能在工作中起到事半功


倍的效果。譬如，快速定位問(wèn)題、降低故障概率、幫助分析邏輯錯(cuò)誤等等。而在互聯(lián)網(wǎng)前端開(kāi)發(fā)越來(lái)越


重要的今天，如何在前端開(kāi)發(fā)中降低開(kāi)發(fā)成本，提升工作效率，掌握前端開(kāi)發(fā)調(diào)試技巧尤為重要。
本文將一一講解各種前端JS調(diào)試技巧，也許你已經(jīng)熟練掌握，那讓我們一起來(lái)溫習(xí)，也許有你沒(méi)見(jiàn)過(guò)的


方法，不妨一起來(lái)學(xué)習(xí)，也許你尚不知如何調(diào)試，趕緊趁此機(jī)會(huì)填補(bǔ)空白。
1、骨灰級(jí)調(diào)試大師Alert
那還是互聯(lián)網(wǎng)剛剛起步的時(shí)代，網(wǎng)頁(yè)前端還主要以?xún)?nèi)容展示為主，瀏覽器腳本還只能為頁(yè)面提供非常簡(jiǎn)


單的輔助功能的時(shí)候。那個(gè)時(shí)候，網(wǎng)頁(yè)主要運(yùn)行在以IE6為主的瀏覽器中，JS的調(diào)試功能還非常弱，只能


通過(guò)內(nèi)置于Window對(duì)象中的alert方法來(lái)調(diào)試，那時(shí)候看起來(lái)應(yīng)該是這個(gè)樣子：


需要說(shuō)明一點(diǎn)，這里看到的效果，并非當(dāng)年的IE瀏覽器中看到的效果，而是在高版本IE中的效果。此外


，當(dāng)年貌似還沒(méi)有這么高級(jí)的控制臺(tái)，而alert的使用也是在真實(shí)的頁(yè)面JS代碼中。雖然，alert的調(diào)試


方式很原始，但當(dāng)時(shí)確實(shí)有它不可磨滅的價(jià)值，甚至到今天，已然有其用武之地。
2、新一代調(diào)試王者Console
隨著JS在Web前端中能做的事情越來(lái)越多，責(zé)任越來(lái)越大，而地位也越來(lái)越重要。傳統(tǒng)的alert調(diào)試方式


已經(jīng)漸漸不能滿(mǎn)足前端開(kāi)發(fā)的種種場(chǎng)景。而且alert調(diào)試方式彈出的調(diào)試信息，那個(gè)窗口著實(shí)不太美觀，


而且會(huì)遮擋部分頁(yè)面內(nèi)容，著實(shí)有些不太友好。
另一方面，alert的調(diào)試信息，必須在程序邏輯中添加類(lèi)似"alert(xxxxx)"這樣的語(yǔ)句，才能正常工作，


并且alert會(huì)阻礙頁(yè)面的繼續(xù)渲染。這就意味著開(kāi)發(fā)人員調(diào)試完成后，必須手動(dòng)清除這些調(diào)試代碼，實(shí)在


有些麻煩。
所以，新一代的瀏覽器Firefox、Chrome，包括IE，都相繼推出了JS調(diào)試控制臺(tái)，支持使用類(lèi)


似"console.log(xxxx)"的形式，在控制臺(tái)打印調(diào)試信息，而不直接影響頁(yè)面顯示。以IE為例，它看起來(lái)


像這樣：


好吧，再見(jiàn)丑陋的alert彈出框。而以Chrome瀏覽器為首的后起之秀，為Console擴(kuò)展了更豐富的功能：


你以為這樣就滿(mǎn)足了？Chrome開(kāi)發(fā)團(tuán)隊(duì)的想象力實(shí)在不得不讓人佩服：

好了，稍微多說(shuō)了一點(diǎn)點(diǎn)題外話。總之，控制臺(tái)以及瀏覽器內(nèi)置Console對(duì)象的出現(xiàn)，給前端開(kāi)發(fā)調(diào)試帶


來(lái)了極大的便利。
有人會(huì)問(wèn)，這樣的調(diào)試代碼不一樣需要在調(diào)試完成后進(jìn)行清理嗎？
關(guān)于這個(gè)問(wèn)題，如果在使用console對(duì)象之前先進(jìn)性存在性驗(yàn)證，其實(shí)不刪除也不會(huì)對(duì)業(yè)務(wù)邏輯造成破壞


。當(dāng)然，為了代碼整潔，在調(diào)試完成后，還是應(yīng)盡可能刪除這些與業(yè)務(wù)邏輯無(wú)關(guān)的調(diào)試代碼。
3、JS斷點(diǎn)調(diào)試
斷點(diǎn)，調(diào)試器的功能之一，可以讓程序中斷在需要的地方，從而方便其分析。也可以在一次調(diào)試中設(shè)置


斷點(diǎn)，下一次只需讓程序自動(dòng)運(yùn)行到設(shè)置斷點(diǎn)位置，便可在上次設(shè)置斷點(diǎn)的位置中斷下來(lái)，極大的方便

了操作，同時(shí)節(jié)省了時(shí)間。——百度百科
JS斷點(diǎn)調(diào)試，即是在瀏覽器開(kāi)發(fā)者工具中為JS代碼添加斷點(diǎn)，讓JS執(zhí)行到某一特定位置停住，方便開(kāi)發(fā)


者對(duì)該處代碼段的分析與邏輯處理。為了能夠觀察到斷點(diǎn)調(diào)試的效果，我們預(yù)先隨意準(zhǔn)備一段JS代碼：


代碼很簡(jiǎn)單，就是定義一個(gè)函數(shù)，傳入兩個(gè)數(shù)，分別加上一個(gè)亂七八糟的隨機(jī)整數(shù)后，再返回兩個(gè)數(shù)的


總和。以Chrome開(kāi)發(fā)者工具為例，我們來(lái)看一下JS斷點(diǎn)調(diào)試的基本方法。
3.1、Sources斷點(diǎn)
首先，測(cè)試代碼中我們通過(guò)上圖console的輸出結(jié)果可以看出代碼應(yīng)該是正常運(yùn)行了，但是為什么是應(yīng)該


呢？因?yàn)楹瘮?shù)中加了一個(gè)隨機(jī)數(shù)，而最終結(jié)果是否真的是正確的呢？這是毫無(wú)意義的猜想，但是假設(shè)我


現(xiàn)在就是要驗(yàn)證一下：函數(shù)傳入的兩個(gè)數(shù)、被加的隨機(jī)數(shù)，以及最終的總和。那么該怎么操作呢？
方法一，前面講過(guò)最普通的，無(wú)論使用alert還是console，我們可以這么來(lái)驗(yàn)證：


從上圖發(fā)現(xiàn)，我們?cè)诖a中新增了三行console代碼，用以打印我們關(guān)心的數(shù)據(jù)變量，而最終我們從控制


臺(tái)（Console面板）中的輸出結(jié)果，可以很清楚的驗(yàn)證整個(gè)計(jì)算過(guò)程是否正常，進(jìn)而達(dá)到我們題設(shè)的驗(yàn)證


要求。
方法二，方法一的驗(yàn)證過(guò)程存在很明顯的弊端就是，添加了很多冗余代碼，接下來(lái)我們看一下使用斷點(diǎn)


進(jìn)行驗(yàn)證，是否更加方便，先看一個(gè)如何加斷點(diǎn)，以及斷點(diǎn)后是什么效果：


如圖，給一段代碼添加斷點(diǎn)的流程是"F12（Ctrl + Shift + I）打開(kāi)開(kāi)發(fā)工具"——"點(diǎn)擊Sources菜單"


——"左側(cè)樹(shù)中找到相應(yīng)文件"——"點(diǎn)擊行號(hào)列"即完成在當(dāng)前行添加/刪除斷點(diǎn)操作。當(dāng)斷點(diǎn)添加完畢后


，刷新頁(yè)面JS執(zhí)行到斷點(diǎn)位置停住，在Sources界面會(huì)看到當(dāng)前作用域中所有變量和值，只需對(duì)每個(gè)值進(jìn)


行驗(yàn)證即可完成我們題設(shè)驗(yàn)證要求。
那問(wèn)題來(lái)了，仔細(xì)的朋友會(huì)發(fā)現(xiàn)當(dāng)我的代碼執(zhí)行到斷點(diǎn)的時(shí)候，顯示的變量a和b的值是已經(jīng)進(jìn)行過(guò)加法


運(yùn)算后的，我們看不到調(diào)用sum函數(shù)時(shí)初始傳入的10和20。那么該怎么辦呢？這就要回過(guò)頭來(lái)先學(xué)習(xí)一下


斷點(diǎn)調(diào)試的一些基礎(chǔ)知識(shí)了。我們打開(kāi)Sources面板后其實(shí)會(huì)在界面中看到如下內(nèi)容，我們跟著鼠標(biāo)軌跡


逐一看看都是什么意思：


從左到右，各個(gè)圖標(biāo)表示的功能分別為：
Pause/Resume script execution：暫停/恢復(fù)腳本執(zhí)行（程序執(zhí)行到下一斷點(diǎn)停止）。
Step over next function call：執(zhí)行到下一步的函數(shù)調(diào)用（跳到下一行）。
Step into next function call：進(jìn)入當(dāng)前函數(shù)。
Step out of current function：跳出當(dāng)前執(zhí)行函數(shù)。
Deactive/Active all breakpoints：關(guān)閉/開(kāi)啟所有斷點(diǎn)（不會(huì)取消）。
Pause on exceptions：異常情況自動(dòng)斷點(diǎn)設(shè)置。
到此，斷點(diǎn)調(diào)試的功能鍵介紹得差不多了，接下來(lái)我們就可以一行一行去看我們的程序代碼，查看每一


行執(zhí)行完畢之后，我們各個(gè)變量的變化情況了，如下圖所示：


如上，我們可以看到a、b變量從最初值，到中間加上隨機(jī)值，再到最后計(jì)算總和并輸出最終結(jié)果的整個(gè)


過(guò)程，完成題設(shè)驗(yàn)證要求不在話下。
其余幾個(gè)功能鍵，我們稍微改動(dòng)一下我們的測(cè)試代碼，用一張gif圖來(lái)演示他們的使用方法：


這里需要注意一點(diǎn)，直接在代碼區(qū)打印變量值的功能是在較新版本的Chrome瀏覽器中才新增的功能，如


果你還在使用較老版本的Chrome瀏覽器，可能無(wú)法直接在斷點(diǎn)的情況下查看變量信息，此時(shí)你可以將鼠


標(biāo)移動(dòng)到變量名上短暫停頓則會(huì)出現(xiàn)變量值。也可以用鼠標(biāo)選中變量名稱(chēng)，然后右鍵"Add to watch"在


Watch面板查看，此方法同樣適用于表達(dá)式。此外，你還可以在斷點(diǎn)情況下，切換到Console面板，直接


在控制臺(tái)輸入變量名稱(chēng)，回車(chē)查看變量信息。該部分比較簡(jiǎn)單，考慮篇幅問(wèn)題，不在做圖演示。
3.2、Debugger斷點(diǎn)
所謂的Debugger斷點(diǎn)，其實(shí)是我自己給它命名的，專(zhuān)業(yè)術(shù)語(yǔ)我也不知道怎么說(shuō)。具體的說(shuō)就是通過(guò)在代


碼中添加"debugger;"語(yǔ)句，當(dāng)代碼執(zhí)行到該語(yǔ)句的時(shí)候就會(huì)自動(dòng)斷點(diǎn)。接下去的操作就跟在Sources面


板添加斷點(diǎn)調(diào)試幾乎一模一樣，唯一的區(qū)別在于調(diào)試完后需要?jiǎng)h除該語(yǔ)句。
既然除了設(shè)置斷點(diǎn)的方式不一樣，功能和Sources面板添加斷點(diǎn)效果一樣，那么為什么還會(huì)存在這種方式


呢？我想原因應(yīng)該是這樣的：我們?cè)陂_(kāi)發(fā)中偶爾會(huì)遇到異步加載html片段（包含內(nèi)嵌JS代碼）的情況，


而這部分JS代碼在Sources樹(shù)種無(wú)法找到，因此無(wú)法直接在開(kāi)發(fā)工具中直接添加斷點(diǎn)，那么如果想給異步


加載的腳本添加斷點(diǎn)，此時(shí)"debugger;"就發(fā)揮作用了。我們直接通過(guò)gif圖看看他的效果：


4、DOM斷點(diǎn)調(diào)試
DOM斷點(diǎn)，顧名思義就是在DOM元素上添加斷點(diǎn)，進(jìn)而達(dá)到調(diào)試的目的。而在實(shí)際使用中斷點(diǎn)的效果最終


還是落地到JS邏輯之內(nèi)。我們依次來(lái)看一下每一種DOM斷點(diǎn)的具體效果。
4.1、當(dāng)節(jié)點(diǎn)內(nèi)部子節(jié)點(diǎn)變化時(shí)斷點(diǎn)（Break on subtree modifications）
在前端開(kāi)發(fā)越來(lái)越復(fù)雜的今天，前端JS代碼越來(lái)越多，邏輯越來(lái)越復(fù)雜，一個(gè)看似簡(jiǎn)單的Web頁(yè)面，通常


伴隨著大段大段的JS代碼，涉及諸多DOM節(jié)點(diǎn)增、刪、改的操作。難免遇到直接通過(guò)JS代碼很難定位代碼


段的情況，而我們卻可以通過(guò)開(kāi)發(fā)者工具的Elements面板，快速定位到相關(guān)DOM節(jié)點(diǎn)，這時(shí)候通過(guò)DOM斷


點(diǎn)定位腳本就顯得尤其重要了。具體我們還是通過(guò)gif演示來(lái)看一下吧：


上圖演示了對(duì)ul子節(jié)點(diǎn)（li）的增加、刪除以及交換順序操作觸發(fā)斷點(diǎn)的效果。但需要注意的是，對(duì)子


節(jié)點(diǎn)進(jìn)行屬性修改和內(nèi)容修改并不會(huì)觸發(fā)斷點(diǎn)。
4.2、當(dāng)節(jié)點(diǎn)屬性發(fā)生變化時(shí)斷點(diǎn)（Break on attributes modifications）
另一方面，由于前端處理的業(yè)務(wù)邏輯越來(lái)越復(fù)雜，對(duì)一些數(shù)據(jù)的存儲(chǔ)依賴(lài)越來(lái)越強(qiáng)烈，而將臨時(shí)數(shù)據(jù)存


儲(chǔ)于DOM節(jié)點(diǎn)的（自定義）屬性中，是很多情況下開(kāi)發(fā)者優(yōu)先選擇的方式。特別是在HTML5標(biāo)準(zhǔn)增強(qiáng)自定


義屬性支持（例：dataset、data-*之類(lèi)）之后，屬性設(shè)置應(yīng)用越來(lái)越多，因此Chrome開(kāi)發(fā)者工具也提供


了屬性變化斷點(diǎn)支持，其效果大致如下：


此方式同樣需要注意，對(duì)子節(jié)點(diǎn)的屬性進(jìn)行任何操作也不會(huì)觸發(fā)節(jié)點(diǎn)本身的斷點(diǎn)。
4.3、當(dāng)節(jié)點(diǎn)被移除時(shí)斷點(diǎn)（Break on node removal）
這個(gè)DOM斷點(diǎn)設(shè)置很簡(jiǎn)單，觸發(fā)方式很明確——當(dāng)節(jié)點(diǎn)被刪除時(shí)。所以通常情況應(yīng)該是在執(zhí)


行"parentNode.removeChild(childNode)"語(yǔ)句的時(shí)候使用此方式。此方式使用不多。
前面介紹到的基本上是我們?cè)谌粘ｉ_(kāi)發(fā)中經(jīng)常用到的調(diào)試手段，運(yùn)用得當(dāng)它們也幾乎能應(yīng)對(duì)我們?nèi)粘ｉ_(kāi)


發(fā)中的幾乎所有問(wèn)題。但是，開(kāi)發(fā)者工具還考慮到了更多的情況，提供更多的斷點(diǎn)方式，如圖：


5、XHR Breakpoints
這幾年前端開(kāi)發(fā)發(fā)生了翻天覆地的變化，從當(dāng)初的名不見(jiàn)經(jīng)傳到如今的盛極一時(shí)，Ajax驅(qū)動(dòng)Web富應(yīng)用，


移動(dòng)WebApp單頁(yè)應(yīng)用風(fēng)生水起。這一切都離不開(kāi)XMLHttpRequest對(duì)象，而"XHR Breakpoints"正是專(zhuān)為異


步而生的斷點(diǎn)調(diào)試功能。


我們可以通過(guò)"XHR Breakpoints"右側(cè)的"+"號(hào)為異步斷點(diǎn)添加斷點(diǎn)條件，當(dāng)異步請(qǐng)求觸發(fā)時(shí)的URL滿(mǎn)足此


條件，JS邏輯則會(huì)自動(dòng)產(chǎn)生斷點(diǎn)。演示動(dòng)畫(huà)中并沒(méi)有演示到斷點(diǎn)位置，這是因?yàn)?#xff0c;演示使用的是jQuery


封裝好的ajax方法，代碼已經(jīng)過(guò)壓縮，看不到什么效果，而事實(shí)上XHR斷點(diǎn)的產(chǎn)生位置是"xhr.send()"語(yǔ)


句。
XHR斷點(diǎn)的強(qiáng)大之處是可以自定義斷點(diǎn)規(guī)則，這就意味著我們可以針對(duì)某一批、某一個(gè)，乃至所有異步請(qǐng)


求進(jìn)行斷點(diǎn)設(shè)置，非常強(qiáng)大。但是，似乎這個(gè)功能在日常開(kāi)發(fā)中用得并不多，至少我用得不多。想想原


因大概有兩點(diǎn)：其一，這類(lèi)型的斷點(diǎn)調(diào)試需求在日常業(yè)務(wù)中本身涉及不多；其二，現(xiàn)階段的前端開(kāi)發(fā)大


多基于JS框架進(jìn)行，最基本的jQuery也已經(jīng)對(duì)Ajax進(jìn)行了良好封裝，極少有人自己封裝Ajax方法，而項(xiàng)


目為了減少代碼體積，通常選擇壓縮后的代碼庫(kù)，使得XHR斷點(diǎn)跟蹤相對(duì)不那么容易了。
6、Event Listener Breakpoints
事件監(jiān)聽(tīng)器斷點(diǎn)，即根據(jù)事件名稱(chēng)進(jìn)行斷點(diǎn)設(shè)置。當(dāng)事件被觸發(fā)時(shí)，斷點(diǎn)到事件綁定的位置。事件監(jiān)聽(tīng)


器斷點(diǎn)，列出了所有頁(yè)面及腳本事件，包括：鼠標(biāo)、鍵盤(pán)、動(dòng)畫(huà)、定時(shí)器、XHR等等。極大的降低了事件


方面業(yè)務(wù)邏輯的調(diào)試難度。


演示實(shí)例演示了當(dāng)click事件被觸發(fā)時(shí)和當(dāng)setTimeout被設(shè)置時(shí)的斷點(diǎn)效果。實(shí)例顯示，當(dāng)選中click事


件斷點(diǎn)之后，兩個(gè)按鈕的被點(diǎn)擊時(shí)都觸發(fā)了斷點(diǎn)，而當(dāng)setTimeout被設(shè)置時(shí)，"Set Timer"斷點(diǎn)被觸發(fā)。
調(diào)試，是在項(xiàng)目開(kāi)發(fā)中非常重要的環(huán)節(jié)，不僅可以幫助我們快速定位問(wèn)題，還能節(jié)省我們的開(kāi)發(fā)時(shí)間。


熟練掌握各種調(diào)試手段，定當(dāng)為你的職業(yè)發(fā)展帶來(lái)諸多利益，但是，在如此多的調(diào)試手段中，如何選擇


一個(gè)適合自己當(dāng)前應(yīng)用場(chǎng)景的，這需要經(jīng)驗(yàn)，需要不斷嘗試積累。
寫(xiě)到這里，基本上可以說(shuō)是傾囊而出了，希望能引起你的注意，希望能夠讓你感到一絲的觸動(dòng)，感到一


些似曾相識(shí)。最主要的我還是希望你能夠快速提高自己的技能，讓自己成為技術(shù)牛人！
========

JS高級(jí)調(diào)試技巧：捕獲和分析 JavaScript Error詳解

前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error()，瀏覽器也會(huì)在


我們調(diào)用 API 出錯(cuò)時(shí)拋出異常。但估計(jì)絕大多數(shù)前端工程師都沒(méi)考慮過(guò)收集這些異常信息


反正只要 JavaScript 出錯(cuò)后刷新不復(fù)現(xiàn)，那用戶(hù)就可以通過(guò)刷新解決問(wèn)題，瀏覽器不會(huì)崩潰，當(dāng)沒(méi)有


發(fā)生過(guò)好了。這種假設(shè)在 Single Page App 流行之前還是成立的。現(xiàn)在的 Single Page App 運(yùn)行一段


時(shí)間后狀態(tài)復(fù)雜無(wú)比，用戶(hù)可能進(jìn)行了若干輸入操作才來(lái)到這里的，說(shuō)刷新就刷新啊？之前的操作豈不


要完全重做？所以我們還是有必要捕獲和分析這些異常信息的，然后我們就可以修改代碼避免影響用戶(hù)


體驗(yàn)。
捕獲異常的方式
我們自己寫(xiě)的 throw new Error() 想要捕獲當(dāng)然可以捕獲，因?yàn)槲覀兒芮宄?throw 寫(xiě)在哪里了。但是


調(diào)用瀏覽器 API 時(shí)發(fā)生的異常就不一定那么容易捕獲了，有些 API 在標(biāo)準(zhǔn)里就寫(xiě)著會(huì)拋出異常，有些?


API 只有個(gè)別瀏覽器因?yàn)閷?shí)現(xiàn)差異或者有缺陷而拋出異常。對(duì)于前者我們還能通過(guò) try-catch 捕獲，對(duì)


于后者我們必須監(jiān)聽(tīng)全局的異常然后捕獲。
try-catch
如果有些瀏覽器 API 是已知會(huì)拋出異常的，那我們就需要把調(diào)用放到 try-catch 里面，避免因?yàn)槌鲥e(cuò)


而導(dǎo)致整個(gè)程序進(jìn)入非法狀態(tài)。例如說(shuō) window.localStorage 就是這樣的一個(gè) API，在寫(xiě)入數(shù)據(jù)超過(guò)容


量限制后就會(huì)拋出異常，在 Safari 的隱私瀏覽模式下也會(huì)如此。
try {
?localStorage.setItem('date', Date.now());
} catch (error) {
?reportError(error);
}
另一個(gè)常見(jiàn)的 try-catch 適用場(chǎng)景是回調(diào)。因?yàn)榛卣{(diào)函數(shù)的代碼是我們不可控的，代碼質(zhì)量如何，會(huì)不


會(huì)調(diào)用其它會(huì)拋出異常的 API，我們一概不知道。為了不要因?yàn)榛卣{(diào)出錯(cuò)而導(dǎo)致調(diào)用回調(diào)后的其它代碼


無(wú)法執(zhí)行，所以把調(diào)用回到放到 try-catch 里面是必須的。
listeners.forEach(function(listener) {
?try {
?listener();
?} catch (error) {
?reportError(error);
?}
});
window.onerror
對(duì)于 try-catch 覆蓋不到的地方，如果出現(xiàn)異常就只能通過(guò) window.onerror 來(lái)捕獲了。
window.onerror =
?function(errorMessage, scriptURI, lineNumber) {
?reportError({
?message: errorMessage,
?script: scriptURI,
?line: lineNumber
?});
}
注意不要耍小聰明使用 window.addEventListener 或 window.attachEvent 的形式去監(jiān)聽(tīng)?


window.onerror。很多瀏覽器只實(shí)現(xiàn)了 window.onerror，或者是只有 window.onerror 的實(shí)現(xiàn)是標(biāo)準(zhǔn)的


。考慮到標(biāo)準(zhǔn)草案定義的也是 window.onerror，我們使用 window.onerror 就好了。
屬性丟失
假設(shè)我們有一個(gè) reportError 函數(shù)用來(lái)收集捕獲到的異常，然后批量發(fā)送到服務(wù)器端存儲(chǔ)以便查詢(xún)分析


，那么我們會(huì)想要收集哪些信息呢？比較有用的信息包括：錯(cuò)誤類(lèi)型（name）、錯(cuò)誤消息（message）、


腳本文件地址（script）、行號(hào)（line)、列號(hào)（column）、堆棧跟蹤（stack）。如果一個(gè)異常是通過(guò)?


try-catch 捕獲到的，這些信息都在 Error 對(duì)象上（主流瀏覽器都支持），所以 reportError 也能收


集到這些信息。但如果是通過(guò) window.onerror 捕獲到的，我們都知道這個(gè)事件函數(shù)只有 3 個(gè)參數(shù)，所


以這 3 個(gè)參數(shù)意外的信息就丟失了。
序列化消息
如果 Error 對(duì)象是我們自己創(chuàng)建的話，那么 error.message 就是由我們控制的。基本上我們把什么放


進(jìn) error.message 里面，window.onerror 的第一個(gè)參數(shù)（message）就會(huì)是什么。（瀏覽器其實(shí)會(huì)略作


修改，例如加上 'Uncaught Error: ' 前綴。）因此我們可以把我們關(guān)注的屬性序列化（例如?


JSON.Stringify）后存放到 error.message 里面，然后在 window.onerror 讀取出來(lái)反序列化就可以了


。當(dāng)然，這僅限于我們自己創(chuàng)建的 Error 對(duì)象。
第五個(gè)參數(shù)
瀏覽器廠商也知道大家在使用 window.onerror 時(shí)受到的限制，所以開(kāi)始往 window.onerror 上面添加


新的參數(shù)。考慮到只有行號(hào)沒(méi)有列號(hào)好像不是很對(duì)稱(chēng)的樣子，IE 首先把列號(hào)加上了，放在第四個(gè)參數(shù)。


然而大家更關(guān)心的是能否拿到完整的堆棧，于是 Firefox 說(shuō)不如把堆棧放在第五個(gè)參數(shù)吧。但 Chrome?


說(shuō)那還不如把整個(gè) Error 對(duì)象放在第五個(gè)參數(shù)，大家想讀取什么屬性都可以了，包括自定義屬性。結(jié)果


由于 Chrome 動(dòng)作比較快，在 Chrome 30 實(shí)現(xiàn)了新的 window.onerror 簽名，導(dǎo)致標(biāo)準(zhǔn)草案也就跟著這


樣寫(xiě)了。
window.onerror = function(
?errorMessage,
?scriptURI,
?lineNumber,
?columnNumber,
?error
) {
?if (error) {
?reportError(error);
?} else {
?reportError({
?message: errorMessage,
?script: scriptURI,
?line: lineNumber，
?column: columnNumber
?});
?}
}
屬性正規(guī)化
我們之前討論到的 Error 對(duì)象屬性，其名稱(chēng)都是基于 Chrome 命名方式的，然而不同瀏覽器對(duì) Error?


對(duì)象屬性的命名方式各不相同，例如腳本文件地址在 Chrome 叫做 script 但在 Firefox 叫做?


filename。因此，我們還需要一個(gè)專(zhuān)門(mén)的函數(shù)來(lái)對(duì) Error 對(duì)象進(jìn)行正規(guī)化處理，也就是把不同的屬性名


稱(chēng)都映射到統(tǒng)一的屬性名稱(chēng)上。具體做法可以參考這篇文章。盡管瀏覽器實(shí)現(xiàn)會(huì)更新，但人手維護(hù)一份


這樣的映射表并不會(huì)太難。
類(lèi)似的是堆棧跟蹤（stack）的格式。這個(gè)屬性以純文本的形式保存一份異常在發(fā)生時(shí)的堆棧信息，由于


各個(gè)瀏覽器使用的文本格式不一樣，所以也需要人手維護(hù)一份正則表達(dá)，用于從純文本中提取每一幀的


函數(shù)名（identifier）、文件（script）、行號(hào)（line）和列號(hào)（column）。
安全限制
如果你也遇到過(guò)消息為 'Script error.' 的錯(cuò)誤，你會(huì)明白我在說(shuō)什么的，這其實(shí)是瀏覽器針對(duì)不同源


（origin）腳本文件的限制。這個(gè)安全限制的理由是這樣的：假設(shè)一家網(wǎng)銀在用戶(hù)登錄后返回的 HTML?


跟匿名用戶(hù)看到的 HTML 不一樣，一個(gè)第三方網(wǎng)站就能把這家網(wǎng)銀的 URI 放到 script.src 屬性里面。


HTML 當(dāng)然不可能被當(dāng)做 JS 解析啦，所以瀏覽器會(huì)拋出異常，而這個(gè)第三方網(wǎng)站就能通過(guò)解析異常的位


置來(lái)判斷用戶(hù)是否有登錄。為此瀏覽器對(duì)于不同源腳本文件拋出的異常一律進(jìn)行過(guò)濾，過(guò)濾得只剩下?


'Script error.' 這樣一條不變的消息，其它屬性統(tǒng)統(tǒng)消失。
對(duì)于有一定規(guī)模的網(wǎng)站來(lái)說(shuō)，腳本文件放在 CDN 上，不同源是很正常的。現(xiàn)在就算是自己做個(gè)小網(wǎng)站，


常見(jiàn)框架如 jQuery 和 Backbone 都能直接引用公共 CDN 上的版本，加速用戶(hù)下載。所以這個(gè)安全限制


確實(shí)造成了一些麻煩，導(dǎo)致我們從 Chrome 和 Firefox 收集到的異常信息都是無(wú)用的 'Script error.'


。
CORS
想要繞過(guò)這個(gè)限制，只要保證腳本文件和頁(yè)面本身同源即可。但把腳本文件放在不經(jīng) CDN 加速的服務(wù)器


上，豈不降低用戶(hù)下載速度？一個(gè)解決方案是，腳本文件繼續(xù)放在 CDN 上，利用 XMLHttpRequest 通過(guò)?


CORS 把內(nèi)容下載回來(lái)，再創(chuàng)建 <script> 標(biāo)簽注入到頁(yè)面當(dāng)中。在頁(yè)面當(dāng)中內(nèi)嵌的代碼當(dāng)然是同源的啦


。
這說(shuō)起來(lái)很簡(jiǎn)單，但實(shí)現(xiàn)起來(lái)卻有很多細(xì)節(jié)問(wèn)題。用一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)：
<script src="http://cdn.com/step1.js"></script>
<script>
?(function step2() {})();
</script>
<script src="http://cdn.com/step3.js"></script>
我們都知道這個(gè) step1、step2、step3 如果存在依賴(lài)關(guān)系的話，則必須嚴(yán)格按照這個(gè)順序執(zhí)行，否則就


可能出錯(cuò)。瀏覽器可以并行請(qǐng)求 step1 和 step3 的文件，但在執(zhí)行時(shí)順序是保證的。如果我們自己通


過(guò) XMLHttpRequest 獲取 step1 和 step3 的文件內(nèi)容，我們就需要自行保證其順序正確性。此外不要


忘記了 step2，在 step1 以非阻塞形式下載的時(shí)候 step2 就可以被執(zhí)行了，所以我們還必須人為干預(yù)?


step2 讓它等待 step1 完成后再執(zhí)行。
如果我們已經(jīng)有一整套工具來(lái)生成網(wǎng)站上不同頁(yè)面的 <script> 標(biāo)簽的話，我們就需要調(diào)整一下這套工


具讓它對(duì) <script> 標(biāo)簽做出改動(dòng)：
<script>
?scheduleRemoteScript('http://cdn.com/step1.js');
</script>
<script>
?scheduleInlineScript(function code() {
?(function step2() {})();
?});
</script>
<script>
?scheduleRemoteScript('http://cdn.com/step3.js');
</script>
我們需要實(shí)現(xiàn) scheduleRemoteScript 和 scheduleInlineScript 這兩個(gè)函數(shù)，并且保證它們?cè)诘谝粋€(gè)


引用外部腳本文件的 <script> 標(biāo)簽之前就被定義好，然后余下的 <script> 標(biāo)簽都會(huì)被改寫(xiě)成上面這


種形式。注意原本立即執(zhí)行的 step2 函數(shù)被放到了一個(gè)更大的 code 函數(shù)里面了。code 函數(shù)并不會(huì)被


執(zhí)行，它只是一個(gè)容器而已，這樣使得原本 step2 的代碼不需要轉(zhuǎn)義就能保留下來(lái)，但又不會(huì)被立即執(zhí)


行。
接下來(lái)我們還需要實(shí)現(xiàn)一套完整的機(jī)制，保證這些由 scheduleRemoteScript 根據(jù)地址下載回來(lái)的文件


內(nèi)容和由 scheduleInlineScript 直接獲取到的代碼能夠按照正確的順序一個(gè)接一個(gè)地執(zhí)行。詳細(xì)的代


碼我就不在這里給出了，大家有興趣可以自己去實(shí)現(xiàn)。
行號(hào)反查
通過(guò) CORS 獲取內(nèi)容再把代碼注入頁(yè)面能夠突破安全限制，但會(huì)引入一個(gè)新的問(wèn)題，那就是行號(hào)沖突。


原本通過(guò) error.script 可以定位到唯一的腳本文件，再通過(guò) error.line 可以定位到唯一的行號(hào)。現(xiàn)


在由于都是頁(yè)面內(nèi)嵌的代碼，多個(gè) <script> 標(biāo)簽并不能通過(guò) error.script 來(lái)區(qū)分，然而每一個(gè)?


<script> 標(biāo)簽內(nèi)部的行號(hào)都是從 1 算起的，結(jié)果就導(dǎo)致我們無(wú)法利用異常信息定位錯(cuò)誤所在的源代碼


位置。
為了避免行號(hào)沖突，我們可以浪費(fèi)一些行號(hào)，使得每一個(gè) <script> 標(biāo)簽中有實(shí)際代碼所使用的行號(hào)區(qū)


間互相不重疊。舉個(gè)例子來(lái)說(shuō)，假設(shè)每個(gè) <script> 標(biāo)簽中的實(shí)際代碼都不超過(guò) 1000 行，那么我可以


讓第一個(gè) <script> 標(biāo)簽中的代碼占用第 1–1000 行，讓第二個(gè) <script> 標(biāo)簽中的代碼占用第 1001


–2000 行（前面插入 1000 行空行），第三個(gè) <script> 標(biāo)簽種的代碼占用第 2001–3000 行（前面插


入 2000 行空行），以此類(lèi)推。然后我們使用 data-* 屬性記錄這些信息，便于反查。
<script
?data-src="http://cdn.com/step1.js"
?data-line-start="1"
>
?// code for step 1
</script>
<script data-line-start="1001">
?// '\n' * 1000
?// code for step 2
</script>
<script
?data-src="http://cdn.com/step3.js"
?data-line-start="2001"
>
?// '\n' * 2000
?// code for step 3
</script>
經(jīng)過(guò)這樣處理后，如果一個(gè)錯(cuò)誤的 error.line 是 3005 的話，那意味著實(shí)際的 error.script 應(yīng)該是?


'http://cdn.com/step3.js'，而實(shí)際的 error.line 則應(yīng)該是 5。我們可以在之前提到的 reportError?


函數(shù)里面完成這項(xiàng)行號(hào)反查工作。
當(dāng)然，由于我們沒(méi)辦法保證每一個(gè)腳本文件只有 1000 行，也有可能有些腳本文件明顯小于 1000 行，


所以其實(shí)不需要固定分配 1000 行的區(qū)間給每一個(gè) <script> 標(biāo)簽。我們可以根據(jù)實(shí)際腳本行數(shù)來(lái)分配


區(qū)間，只要保證每一個(gè) <script> 標(biāo)簽所使用的區(qū)間互不重疊就可以了。
crossorigin 屬性
瀏覽器對(duì)于不同源的內(nèi)容進(jìn)行的安全限制當(dāng)然不僅限于 <script> 標(biāo)簽。既然 XMLHttpRequest 可以通


過(guò) CORS 來(lái)突破這個(gè)限制，為什么直接通過(guò)標(biāo)簽引用的資源就不可以呢？這當(dāng)然是可以的。
針對(duì) <script> 標(biāo)簽引用不同源腳本文件的限制同樣作用于 <img> 標(biāo)簽引用不同源圖片文件。如果一個(gè)?


<img> 標(biāo)簽是不同源的話，一旦在 <canvas> 繪圖時(shí)用到了，該 <canvas> 將變?yōu)橹粚?xiě)狀態(tài)，保證網(wǎng)站


不能通過(guò) JavaScript 竊取未授權(quán)的不同源圖片數(shù)據(jù)。后來(lái) <img> 標(biāo)簽通過(guò)引入 crossorigin 屬性解


決了這個(gè)問(wèn)題。如果使用 crossorigin="anonymous"，則相當(dāng)于匿名 CORS；如果使用 `crossorigin=“


use-credentials”，則相當(dāng)于帶認(rèn)證的 CORS。
既然 <img> 標(biāo)簽?zāi)苓@樣做，為什么 <script> 標(biāo)簽就不能這樣做？于是瀏覽器廠商就為 <script> 標(biāo)簽


加入了同樣的 crossorigin 屬性用于解決上述安全限制問(wèn)題。現(xiàn)在 Chrome 和 Firefox 對(duì)這個(gè)屬性的


支持是完全沒(méi)有問(wèn)題的。Safari 則會(huì)把 crossorigin="anonymous" 當(dāng)做 crossorigin="use-


credentials" 處理，結(jié)果是如果服務(wù)器只支持匿名 CORS 則 Safari 會(huì)當(dāng)做認(rèn)證失敗。由于 CDN 服務(wù)


器出于性能的考慮被設(shè)計(jì)為只能返回靜態(tài)內(nèi)容，不可能動(dòng)態(tài)的根據(jù)請(qǐng)求返回認(rèn)證 CORS 所需的 HTTP?


Header，Safari 相當(dāng)于不能利用此特性來(lái)解決上述問(wèn)題。
總結(jié)
JavaScript 異常處理看起來(lái)很簡(jiǎn)單，跟其它語(yǔ)言沒(méi)什么區(qū)別，但真的要把異常都捕獲了然后對(duì)屬性做分


析，其實(shí)還不是那么容易的事情。現(xiàn)在盡管有一些第三方服務(wù)提供捕獲 JavaScript 異常的類(lèi) Google?


Analytics 服務(wù)，但如果要弄明白其中的細(xì)節(jié)和原理還是必須自己親手做一次。
========

靈活應(yīng)用js調(diào)試技巧解決樣式問(wèn)題的步驟分享

在很多時(shí)候，前端開(kāi)發(fā)人員使用JS腳本，對(duì)頁(yè)面Dom結(jié)構(gòu)或者是樣式做出了修改，會(huì)造成一些意想不到的


bug


由于種種原因，例如：代碼邏輯復(fù)雜、時(shí)間久了遺忘處理細(xì)節(jié)、或者根本就是接手修改別人遺留的bug，


在這種情況下，debug就會(huì)變成一件頭疼的事情。?


在此分享一些JS調(diào)試方面的技巧，針對(duì)各種疑難雜癥，往往能起到較好的效果。?


Step 1：檢查服務(wù)器直接render出來(lái)的內(nèi)容?


　　　　使用查看源文件的方式，這一步首先明確，頁(yè)面HTML片段是否在服務(wù)器端就已經(jīng)不正常了。?


Step 2：比較實(shí)際的HTML內(nèi)容和服務(wù)器render出來(lái)的原始內(nèi)容之間的差異?


　　　　可以使用一些前端工具（例如：IE下的開(kāi)發(fā)人員工具、Firebug、Chrome的開(kāi)發(fā)人員工具等），


實(shí)時(shí)查看當(dāng)前HTML片段內(nèi)容?


Step 3：在合適的位置增加debugger?


　　　　例如：先找出大概可能出問(wèn)題的js代碼，在合適的地方加debugger，或者是使用工具增加類(lèi)似


于“在屬性被修改時(shí)中斷”的斷點(diǎn)，例如實(shí)際的HTML比原始內(nèi)容多出了一個(gè)width屬性?


Step 4：運(yùn)行你的頁(yè)面，進(jìn)入中斷，并檢查js調(diào)用堆棧（關(guān)鍵的一步）?


　　　　推薦使用IE支持的Visual Studio調(diào)試器（需要先設(shè)置IE：取消“禁用腳本調(diào)試”），這時(shí)基本


就能確定是哪個(gè)js方法修改了樣式
========

總結(jié)

以上是生活随笔為你收集整理的js断点和调试学习总结3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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