javascript簡稱JS,是網頁的前端開發語言,直接運行在瀏覽器上,以前我剛開始學的時候,并不懂這個,所以我每次開發或調試它,都是在vs.net里面,現在想想,實在是太痛苦了,其實JS是執行在瀏覽器的,而不是執行在服務器的,所以根本沒必要在網頁開發軟件里搞,直接在瀏覽器中即可調試

瀏覽器開發者工具

我個人最喜歡Chrome開發者工具。 雖然Safari和Firefox無法達到Chrome那么高的標準，但它們也在逐漸改善。在Firefox中，可以將Firebug和Firefox開發者工具組合使用。如果Firefox小組在改進內置開發者工具方面繼續表現優異的話，Firebug有一天可能會被淘汰。

先把個人偏好放在一邊，你應該能夠在目標瀏覽器中對任意代碼進行試驗和調試。你的目標瀏覽器可能包括著名的IE8，也可能不包括。

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

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

有些知識點是前端開發特有的。例如：

DOM檢查
DOM斷點
調試事件
內存泄露分析
斷點

使用 debugger 語句可以在源代碼中增加斷點。一旦到達 debugger 語句，執行中斷。當前作用域的上下文出現在控制臺中，還有所有的局部變量和全局變量。將鼠標光標移到變量上可以查看變量的值。

在代碼中還可以創建條件斷點：

JavaScript

if (condition) {  debugger;}

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

節點變化的斷點

如果你的任務是調試垃圾代碼，你 可能會有這樣的問題： 為什么DOM節點在執行過程中發生了改變。Chrome開發者工具提供了一種方便的斷點，可用來 檢測 元素樹中的節點變化。

在Elements視圖中，右鍵 點擊 一個元素，從右鍵菜單中選擇“Break on…”。

DOM斷點的類型可能包括：

選定節點樹狀子目錄 （sub-tree） 中的節點變化，
選定節點的屬性發生變化，
節點被刪除。

避免記錄引用類型

當記錄對象或數組時， 原始類型的值在引用對象記錄中可能會發生變化。當查看引用類型時一定要記住，在記錄和查看期間，代碼執行可能會影響觀測到的結果 。

例如，在Chrome開發者工具中執行以下代碼：

JavaScript

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

記錄的第二個和第三個屬 性的值是正確的，第一個屬性中對象引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，amount域的值就已經確定了。無論你對同一個引用關 閉并重新打開多少次，這個值都不會變化。

記錄參考類型

永遠記得你在記錄什么。記錄原始類型時，使用帶斷點的watch表達式。如果是異步代碼，避免記錄 引用類型 。

表格記錄

在一些開發者工具中，你可以用 console.table 在控制臺中記錄對象數組。

嘗試在你的Chrome開發者工具中執行下列代碼：

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.'     }  ] );

輸出是非常好看的表格。所有原始類型都立刻顯示出來，它們的值反應記錄時的狀態。也可以記錄復雜類型，顯示內容為其類型，內容無法顯示。因此， console.table 只能用來顯示具有原始類型值的對象構成的二維數據結構。

XHR斷點

有時你可能會遇到錯誤的AJAX請求。如果你無法立刻確認提交請求的代碼，XHR斷點可以幫你節省時間。當提交某一特殊類型的AJAX時，XHR斷點將會終止代碼的執行，并將提交請求的代碼段呈現給用戶。

在Chrome開發者工具的Sources標簽頁中，其中一個斷點類型就是XHR斷點。點擊 + 圖標，你可以輸入URL片段，當AJAX請求的URL中出現這個URL片段時，JavaScript代碼將會中斷。

事件監聽器斷點

Chrome開發者工具可以捕獲所有類型的事件，當用戶按下一個鍵、點擊一下鼠標時，可以對觸發的事件進行調試。

異常時暫停

Chrome開發者工具可以在拋出異常時暫停 執行 JavaScript代碼。這可以讓你在Error對象被創建時觀察應用的狀態。

異常時暫停

Sources標簽頁左側面板上有一個代碼片段（Snippet）子標簽頁，可用于保存代碼片段，幫你調試代碼。

如果你堅持使用控制臺調試，反復寫相同的代碼，你應該將你的代碼抽象成調試片段。這樣的話，甚至還可以把你的調試 技巧教給你 的同事。

Paul Irish發布過一些基本的 調試代碼片段 ，例如在函數執行前插入斷點。審查這些代碼片段，并在網上搜索其他代碼片段，這是 很有價值的 。

在函數執行前插入斷點

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

Unminify最小化代碼

（ 譯者注：unminify 解壓縮并進行反混淆 ）

盡可能使用 source map。有時生產代碼 不能使用 source map，但不管怎樣，你都  不應該直接對生產代碼進行調試 。

（譯者注：sourcemap 是針對壓縮合并后的web代碼進行調試的工具）

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

格式化按鈕只有在不得已時才會使用。從某種意義上來說， 丑代碼就是難看，因為代碼中的命名沒有明確的語義 。

DOM元素的控制臺書簽

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

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

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

訪問調用棧

JavaScript

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

Chrome開發者工具中的Sources標簽頁也在Watch表達式下面顯示調用棧。

性能審查

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

審查工具舉例：

Chrome開發者工具的Audit標簽頁
YSlow

熟能生巧

你可能熟悉某些調試技巧，其他 技巧 也會幫你節省不少時間。如果你開始在實踐中使用這些技巧，我建議你幾周之后重新閱讀本文。你將會驚奇地發現，你的關注點在幾周內就發生了變化。