js調試技巧大全,js調試工具和方法如何使用

本文目錄一覽：

• 1、JavaScript如何調試有哪些建議和技巧附五款有用的調試工具
• 2、如何進行html調試和js腳本調試
• 3、有哪些 JS 調試技巧
• 4、有哪些 JS 調試技巧？
• 5、如何調試JS?
• 6、如何在網頁中調試JavaScript

JavaScript如何調試有哪些建議和技巧附五款有用的調試工具

瀏覽器開發者工具

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

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

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

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

熟能生巧

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

五個常用的js調試工具

JavaScript被稱作以原型(prototype)為基礎的語言。這種語言有很多特色，比如動態和弱類型，它還有一等函數（first class function）。另一個特點是它是一個多范型(multi-paradigm)語言，支持面向對象、聲明式、函數式的編程風格。

JavaScript最初被用作客戶端語言，瀏覽器實現它用來提供增強的用戶接口。JavaScript在很多現代的網站和Web應用程序中都有應用。JavaScript的一個很棒的功能也很重要，就是我確實可以用它來提高或改善網站的用戶體驗。JavaScript也可以提供豐富的功能和交互的組件。

JavaScript在這技術高速發展的同時變得非常受歡迎。因為受歡迎JavaScript也改進了許多，修改JavaScript腳本有很多事要做。這次我們為開發者帶來了幾個非常有用的JavaScript調試工具。

1）Drosera

可以調試任何WebKit程序，不僅僅是Safari瀏覽器。

2)Dragonfly

源代碼視圖有語法高亮，可以設置斷點。強大的搜索功能，支持正則表達式。

3）Getfirebug

可以在任何網頁編輯、調試和實時監視CSS、HTML和JavaScript。

4)Debugbar

5)Venkman

Venkman是Mozilla的JavaScript調試器名稱。它旨在為以Mozilla為基礎的瀏覽器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一個強大的JavaScript調試環境。

如何進行html調試和js腳本調試

工具/原料

chrome瀏覽器   Mozilla firefox   電腦

方法/步驟

1、以chrome為例，首先打開需要調試的頁面，按F12快捷鍵打開調試工具。

2、選擇指定的dom節點進行查看和編輯。

3、js斷點調試：chrome非常強大，在chrome調試工具欄中，你可以進行js斷點調試以及格式化查看（一些大型的門戶網站都會將js壓縮成無任何格式的代碼這在研究時特別費勁）：我先寫一段簡單的js代碼：function debug(){for (var i=0;i10;i++){alert(i);}調試截圖如下：

4、js ajax調試，ajax技術如今越來越頻繁使用，所以，ajax調試也必不可少：在chrome調試工具中，可以查看到當前頁面所以的請求，包括ajax請求，以下是頁面打開後所有發起的請求。

有哪些 JS 調試技巧

seajs.cache：用Chrome訪問使用Seajs的站點，打開Console，輸入seajs.cache，可以看到當前加載好的模塊，點開某一個，可以查看該模塊的詳細信息，包括該模塊ID，該模塊暴露的API等等信息，很常用；

seajs.find：包裝好的模塊的API不會污染全局變量，但在Console中，有時想用一下jQuery，這樣就需要使用seajs.find了，var $ = seajs.find(“jquery”)[0]，然後就可以在Console的上下文中使用jQuery了，PS.seajs.find返回的是一個數組；

seajs.log：在Console中打印信息，功能和console.log差不多，但是不會在IE下報錯。

有哪些 JS 調試技巧？

其實當你經驗足夠的時候，有些錯誤不需要調試就能想明白。當然，新手而言，從調試做起。

主要的技巧取決於你使用的調試工具，這裡以我使用的chrome為例。首先跳出chrome的調試工具，右鍵選擇檢查。。

接着彈出開發者窗口，如圖

這個就是調試頁面了，然後單擊頂頭的source，找到你的js腳本，如圖：

圖片中那個藍色的小框框就是斷點了，設置方法就是單擊那裡。

可以見到，窗口下面紅色鮮紅的值就是錯誤了，單擊後面的錯誤位置就能定位了(語法錯誤能顯示定位，但是邏輯錯誤無法定位。內置api出錯定位會出錯，比如JSON.parse()出錯就定位到html文件去了)

左下角有一個藍色小箭頭，後面是能輸入的，輸入一下試試，

我輸入了cookie，就返回了cookie的值。其他的同理。

另外也可以在js腳本裏面使用console.log()，在console一欄會顯示的。更多的方法，嘗試才知道。

如何調試JS?

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的：

1、在F12開發人員工具中進行調試

打開IE瀏覽器，按下F12鍵，就會打開開發人員工具，這是IE內置的開發人員開發工具，方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

如果你打開的時候沒有固定在網頁底部，可以點擊右上角菜單欄中的按鈕來完成。

我們看到在這個工具窗口裏面有幾個標籤頁，分別是：HTML、CSS、控制台、腳本、探查器和網絡，點開每一個標籤，可以執行相應的任務。

在HTML標籤窗口中，工具欄中的按鈕所執行的操作如下圖：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出信息，包括錯誤信息、用戶日誌等；打開腳本標籤頁，這裏面才是我們想要的內容。

我在圖中用黃色矩形選中連個控件，左側的下拉列表用來選擇文件，右側的按鈕用來啟動調試。當點擊啟動調試後，調試程序會將窗口最大化，我們在選中的文件中找到需要調試的位置，點擊左側邊欄添加斷點即可進行調試。

當有程序運行到我們的斷點處時，就可以進行調試了：

在這裡，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除 斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試

在執行過程中，如果我們要執行即時的代碼，我們就需要在右側的窗格中輸入代碼，按回車即可：

如果要執行多行代碼，點擊運行按鈕右側的雙箭頭，就會打開多行模式。我就不再截圖片了。

這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug，只不過在細枝末葉上面有些不同罷了，主體的功能都是一樣的。

按F12鍵進入開發者工具，可以查看源代碼、樣式和js：

點擊Scripts按鈕，可以打開這個調試窗口，裏面包含了網頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。

2、使用debugger關鍵字進行調試

這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

設置以後就可以使用debugger關鍵字進行調試了；進過這樣的設置，我們還可以捕獲到意外的錯誤，進行跟蹤調試。

如何在網頁中調試JavaScript

以IE8瀏覽器為例，接下來重點介紹並演示如何使用瀏覽器自帶的開發人員工具調試JS程序。（該工具快捷按鈕為F12）

1、在工具-Internet選項-高級，去掉「禁用腳步調試（Internet Explorer）」項的勾選。

2、去掉「顯示友好http錯誤信息」項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇「是（Y）」按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象「dat」而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控件的，本例中第二個單行輸入框控件的id值是data2。修改後的JS代碼。

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

7、本例只是演示了如何利用IE自帶的開發人員工具進行簡單的調試工作，如需了解其他調試及排查技巧，請參閱網絡及相關書籍進行學習。