JavaScript程序員必備的5個debug技巧

jopen 10年前發布 | 30K 次閱讀 JavaScript開發 JavaScript

我一直使用printf調試程序,一般來說都是比較順利,但有時候,你會發現需要更好的方法。下面幾個JavaScript技巧相信你一定會覺得十分有用:

1. debugger;

我以前也說過,你可以在JavaScript代碼中加入一句debugger;來手工造成一個斷點效果。

需要帶有條件的斷點嗎?你只需要用if語句包圍它:

if (somethingHappens) {

debugger;

}

但要記住在程序發布前刪掉它們。

2. 設置在DOM node發生變化時觸發斷點

有時候你會發現DOM不受你的控制,自己會發生一些奇怪的變化,讓你很難找出問題的根源。

谷歌瀏覽器的開發工具里有一個超級好用的功能,專門可以對付這種情況,叫做“Break on…”,你在DOM節點上右鍵,就能看到這個菜單項。

斷點的觸發條件可以設置成這個節點被刪除、節點的屬性有任何變化,或它的某個子節點有變化發生。

JavaScript程序員必備的5個debug技巧

3. Ajax 斷點

XHR斷點,或Ajax斷點,就像它們的名字一樣,可以讓我們設置一個斷點,在特點的Ajax調用發生時觸發它們。

當你在調試Web應用的網絡傳輸時,這一招非常的有效。

JavaScript程序員必備的5個debug技巧

4. 移動設備模擬環境

谷歌瀏覽器里有一些非常有趣的模擬移動設備的工具,幫助我們調試程序在移動設備里的運行情況。

找到它的方法是:按F12,調出開發者工具,然后按ESC鍵(當前tab不能是Console),你就會看到第二層調試窗口出現,里面的Emulation標簽頁里有各種模擬設備可選。

當然,這不會就變成了真正的iPhone,只是模擬了iPhone的尺寸,觸摸事件和瀏覽器User Agent值。

JavaScript程序員必備的5個debug技巧

5. 使用Audits改進你的網站

YSlow是一個非常棒的工具。谷歌瀏覽器的開發者工具里也有一個非常類似的工具,叫Audits

它可快速的審計你的網站,給你提出非常實際有效的優化你的網站的建議和方法。

JavaScript程序員必備的5個debug技巧

還有其它的嗎?

沒有這些工具,我不知道將如何開發。我還會寫更多的關于這方面的技巧——一旦我有所發現,請關注我的最新文章。

(英文:5 Javascript debugging tips you’ll start using today.)
來自:http://www.webhek.com/5-javascript-debugging-tips

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!