瀏覽器開發者工具
我個人最喜歡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調試環境。