javascript簡稱JS,是網(wǎng)頁的前端開發(fā)語言,直接運(yùn)行在瀏覽器上,以前我剛開始學(xué)的時(shí)候,并不懂這個(gè),所以我每次開發(fā)或調(diào)試它,都是在vs.net里面,現(xiàn)在想想,實(shí)在是太痛苦了,其實(shí)JS是執(zhí)行在瀏覽器的,而不是執(zhí)行在服務(wù)器的,所以根本沒必要在網(wǎng)頁開發(fā)軟件里搞,直接在瀏覽器中即可調(diào)試

瀏覽器開發(fā)者工具

我個(gè)人最喜歡Chrome開發(fā)者工具。 雖然Safari和Firefox無法達(dá)到Chrome那么高的標(biāo)準(zhǔn)，但它們也在逐漸改善。在Firefox中，可以將Firebug和Firefox開發(fā)者工具組合使用。如果Firefox小組在改進(jìn)內(nèi)置開發(fā)者工具方面繼續(xù)表現(xiàn)優(yōu)異的話，F(xiàn)irebug有一天可能會(huì)被淘汰。

先把個(gè)人偏好放在一邊，你應(yīng)該能夠在目標(biāo)瀏覽器中對(duì)任意代碼進(jìn)行試驗(yàn)和調(diào)試。你的目標(biāo)瀏覽器可能包括著名的IE8，也可能不包括。

要熟悉你自己選擇的開發(fā)者工具。你還可以從IDE（集成開發(fā)環(huán)境）或者第三方軟件獲得額外的調(diào)試支持。

在各種調(diào)試工具中，調(diào)試的基礎(chǔ)知識(shí)是相通的。事實(shí)上，我是在90年代從Borland的C開發(fā)者環(huán)境中學(xué)習(xí)的調(diào)試基礎(chǔ)。斷點(diǎn)、條件 斷點(diǎn)、監(jiān)視與最新版Chrome開發(fā)者工具是完全相同的。2000年左右，我在Java中捕獲到第一例異常。堆棧跟蹤（Stack traces）的概念依然適用，即使J avaScript術(shù)語將其稱作錯(cuò)誤（Error），檢查堆棧跟蹤仍然和以前一樣有用。

有些知識(shí)點(diǎn)是前端開發(fā)特有的。例如：

DOM檢查
DOM斷點(diǎn)
調(diào)試事件
內(nèi)存泄露分析
斷點(diǎn)

使用 debugger 語句可以在源代碼中增加斷點(diǎn)。一旦到達(dá) debugger 語句，執(zhí)行中斷。當(dāng)前作用域的上下文出現(xiàn)在控制臺(tái)中，還有所有的局部變量和全局變量。將鼠標(biāo)光標(biāo)移到變量上可以查看變量的值。

在代碼中還可以創(chuàng)建條件斷點(diǎn)：

JavaScript

if (condition) {
  debugger;
}

還可以 根據(jù)自己需要 在開發(fā)者工具中插入斷點(diǎn)和條件斷點(diǎn)。在Chrome開發(fā)者工具中，在Sources視圖中點(diǎn)擊行號(hào)即可增加斷點(diǎn)。如果在斷點(diǎn)上點(diǎn)擊右鍵并選擇“編輯斷點(diǎn)（Edit Breakpoint）”，你還可以增加斷點(diǎn)條件。

節(jié)點(diǎn)變化的斷點(diǎn)

如果你的任務(wù)是調(diào)試?yán)a，你 可能會(huì)有這樣的問題： 為什么DOM節(jié)點(diǎn)在執(zhí)行過程中發(fā)生了改變。Chrome開發(fā)者工具提供了一種方便的斷點(diǎn)，可用來 檢測 元素樹中的節(jié)點(diǎn)變化。

在Elements視圖中，右鍵 點(diǎn)擊 一個(gè)元素，從右鍵菜單中選擇“Break on…”。

DOM斷點(diǎn)的類型可能包括：

選定節(jié)點(diǎn)樹狀子目錄 （sub-tree） 中的節(jié)點(diǎn)變化，
選定節(jié)點(diǎn)的屬性發(fā)生變化，
節(jié)點(diǎn)被刪除。

避免記錄引用類型

當(dāng)記錄對(duì)象或數(shù)組時(shí)， 原始類型的值在引用對(duì)象記錄中可能會(huì)發(fā)生變化。當(dāng)查看引用類型時(shí)一定要記住，在記錄和查看期間，代碼執(zhí)行可能會(huì)影響觀測到的結(jié)果 。

例如，在Chrome開發(fā)者工具中執(zhí)行以下代碼：

JavaScript

var wallets = [{ amount: 0 }];
setInterval( function() {
  console.log( wallets, wallets[0], wallets[0].amount );
  wallets[0].amount += 100;
}, 1000 );

記錄的第二個(gè)和第三個(gè)屬 性的值是正確的，第一個(gè)屬性中對(duì)象引用的值是不可靠的。當(dāng)你第一次在開發(fā)者工具中顯示這個(gè)屬性時(shí)，amount域的值就已經(jīng)確定了。無論你對(duì)同一個(gè)引用關(guān) 閉并重新打開多少次，這個(gè)值都不會(huì)變化。

記錄參考類型

永遠(yuǎn)記得你在記錄什么。記錄原始類型時(shí)，使用帶斷點(diǎn)的watch表達(dá)式。如果是異步代碼，避免記錄 引用類型 。

表格記錄

在一些開發(fā)者工具中，你可以用 console.table 在控制臺(tái)中記錄對(duì)象數(shù)組。

嘗試在你的Chrome開發(fā)者工具中執(zhí)行下列代碼：

JavaScript

console.table(
  [
    { 
      id: 1, 
      name: 'John', 
      address: 'Bay street 1'
    }, 
    {
      id: 2, 
      name: 'Jack', 
      address: 'Valley road 2.'
    }, 
    {
      id: 3, 
      name: 'Jim', 
      address: 'Hill street 3.' 
    }
  ] );

輸出是非常好看的表格。所有原始類型都立刻顯示出來，它們的值反應(yīng)記錄時(shí)的狀態(tài)。也可以記錄復(fù)雜類型，顯示內(nèi)容為其類型，內(nèi)容無法顯示。因此， console.table 只能用來顯示具有原始類型值的對(duì)象構(gòu)成的二維數(shù)據(jù)結(jié)構(gòu)。

XHR斷點(diǎn)

有時(shí)你可能會(huì)遇到錯(cuò)誤的AJAX請(qǐng)求。如果你無法立刻確認(rèn)提交請(qǐng)求的代碼，XHR斷點(diǎn)可以幫你節(jié)省時(shí)間。當(dāng)提交某一特殊類型的AJAX時(shí)，XHR斷點(diǎn)將會(huì)終止代碼的執(zhí)行，并將提交請(qǐng)求的代碼段呈現(xiàn)給用戶。

在Chrome開發(fā)者工具的Sources標(biāo)簽頁中，其中一個(gè)斷點(diǎn)類型就是XHR斷點(diǎn)。點(diǎn)擊 + 圖標(biāo)，你可以輸入U(xiǎn)RL片段，當(dāng)AJAX請(qǐng)求的URL中出現(xiàn)這個(gè)URL片段時(shí)，JavaScript代碼將會(huì)中斷。

事件監(jiān)聽器斷點(diǎn)

Chrome開發(fā)者工具可以捕獲所有類型的事件，當(dāng)用戶按下一個(gè)鍵、點(diǎn)擊一下鼠標(biāo)時(shí)，可以對(duì)觸發(fā)的事件進(jìn)行調(diào)試。

異常時(shí)暫停

Chrome開發(fā)者工具可以在拋出異常時(shí)暫停 執(zhí)行 JavaScript代碼。這可以讓你在Error對(duì)象被創(chuàng)建時(shí)觀察應(yīng)用的狀態(tài)。

異常時(shí)暫停

Sources標(biāo)簽頁左側(cè)面板上有一個(gè)代碼片段（Snippet）子標(biāo)簽頁，可用于保存代碼片段，幫你調(diào)試代碼。

如果你堅(jiān)持使用控制臺(tái)調(diào)試，反復(fù)寫相同的代碼，你應(yīng)該將你的代碼抽象成調(diào)試片段。這樣的話，甚至還可以把你的調(diào)試 技巧教給你 的同事。

Paul Irish發(fā)布過一些基本的 調(diào)試代碼片段 ，例如在函數(shù)執(zhí)行前插入斷點(diǎn)。審查這些代碼片段，并在網(wǎng)上搜索其他代碼片段，這是 很有價(jià)值的 。

在函數(shù)執(zhí)行前插入斷點(diǎn)

如果你可以得到函數(shù)調(diào)用的源代碼，你還可以在函數(shù)調(diào)用前插入斷點(diǎn)來終止函數(shù)的執(zhí)行。如果你想調(diào)試 f 函數(shù)，用 debug(f) 語句可以增加這種斷點(diǎn)。

Unminify最小化代碼

（ 譯者注：unminify 解壓縮并進(jìn)行反混淆 ）

盡可能使用 source map。有時(shí)生產(chǎn)代碼 不能使用 source map，但不管怎樣，你都  不應(yīng)該直接對(duì)生產(chǎn)代碼進(jìn)行調(diào)試 。

（譯者注：sourcemap 是針對(duì)壓縮合并后的web代碼進(jìn)行調(diào)試的工具）

如果沒有source map的話，你最后還可以求助于Chrome開發(fā)者工具Sources標(biāo)簽頁中的格式化按鈕（Pretty Print Button）。格式化按鈕 {} 位于源代碼文本區(qū)域的下方。格式化按鈕對(duì)源代碼進(jìn)行美化，并改變行號(hào)，這使得調(diào)試代碼更加方便，堆棧跟蹤更加有效。

格式化按鈕只有在不得已時(shí)才會(huì)使用。從某種意義上來說， 丑代碼就是難看，因?yàn)榇a中的命名沒有明確的語義 。

DOM元素的控制臺(tái)書簽

Chrome開發(fā)者工具和Firebug都提供了書簽功能，用于顯示你在元素標(biāo)簽頁（Chrome）或HTML標(biāo)簽頁（Firebug）中最后點(diǎn)擊的DOM元素。如果你依次選擇了 A 元素、 B 元素和 C 元素，

$0   表示 C 元素
$1 表示 B 元素
$2 表示 A 元素

如果你又選擇了元素 D ，那么 $0 、 $1 、 $2 和 $3 分別代表 D 、 C 、 B 和 A 。

訪問調(diào)用棧

JavaScript

var f = function() { g(); } 
var g = function() { h(); }
var h = function() { console.trace('trace in h'); }
f();

Chrome開發(fā)者工具中的Sources標(biāo)簽頁也在Watch表達(dá)式下面顯示調(diào)用棧。

性能審查

性能 審查 工具通常是很有用的。這些工具可以用于防止內(nèi)存泄露，還可以檢測到你的網(wǎng)站哪里需要優(yōu)化。由于這些工具并不了解你的產(chǎn)品，你可以忽略其某些建議。通常來說，性能分析工具能夠有效范圍，可以使你的網(wǎng)站顯著優(yōu)化。

審查工具舉例：

Chrome開發(fā)者工具的Audit標(biāo)簽頁
YSlow

熟能生巧

你可能熟悉某些調(diào)試技巧，其他 技巧 也會(huì)幫你節(jié)省不少時(shí)間。如果你開始在實(shí)踐中使用這些技巧，我建議你幾周之后重新閱讀本文。你將會(huì)驚奇地發(fā)現(xiàn)，你的關(guān)注點(diǎn)在幾周內(nèi)就發(fā)生了變化。

最新評(píng)論