JS調試必備的5個debug技巧

我一直使用printf調試程序，通常來講都是比較順利，但有時候，你會發現須要更好的方法。下面幾個JavaScript技巧相信你必定會以爲十分有用

 

1. debugger;

我之前也說過，你能夠在JavaScript代碼中加入一句debugger;來手工形成一個斷點效果。
須要帶有條件的斷點嗎？你只須要用if語句包圍它：

 

複製代碼代碼以下:

if (somethingHappens) {

 

  debugger;

}

 

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

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

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

谷歌瀏覽器的開發工具裏有一個超級好用的功能，專門能夠對付這種狀況，叫作「Break on…」，你在DOM節點上右鍵，就能看到這個菜單項。

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

3. Ajax 斷點

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

當你在調試Web應用的網絡傳輸時，這一招很是的有效。

4. 移動設備模擬環境

谷歌瀏覽器裏有一些很是有趣的模擬移動設備的工具，幫助咱們調試程序在移動設備裏的運行狀況。

找到它的方法是：按F12，調出開發者工具，而後按ESC鍵(當前tab不能是Console)，你就會看到第二層調試窗口出現，裏面的Emulation標籤頁裏有各類模擬設備可選。

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

5. 使用Audits改進你的網站

YSlow是一個很是棒的工具。谷歌瀏覽器的開發者工具裏也有一個很是相似的工具，叫Audits。

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

還有其它的嗎？

本文轉載：http://www.jb51.net/article/47812.htm