你應該瞭解的 5 個 JavaScript 調試技巧

我以前使用過用 printf debugging，自此以後我用這種方法彷佛總能更快地解決bug。
在某些狀況下須要更好的工具，下面是其中的一些佼佼者，我敢確定你會發現它們的有用之處：

1. debugger;

正如我以前提到的，你可使用「debugger;」語句在代碼中加入強制斷點。
須要斷點條件嗎？只需將它包裝它在IF子句中：

if (somethingHappens) {
    debugger;
}

只需記住在上線前移除。

2. 當節點變化時斷開

有時DOM像有了本身的想法。當難以想象的變化發生時很難找到問題的根源。
Chrome開發人員工有調試這個問題的超級有用技能。這就是所謂的「Break on…」，你能夠經過在元素選項卡上右鍵DOM節點找到它。

斷點能夠在節點被刪除後設置，當節點的屬性更改或者其子樹中的節點變化時。

3. Ajax斷點

XHR斷點或我稱做的Ajax斷點，也容許當一個預期Ajax請求建立時斷開。
當調試你的web應用的網絡時這是個讓人吃驚的工具。

4. 模擬不一樣的移動設備

Chrome增長了內置的移動設備模擬工具，這將簡化你的平常工做。
選擇任何非Console的選項卡找到它們，按鍵盤上的esc鍵並選擇你想摸你的移動設備。

你固然不會獲得一個真正的iPhone，但尺寸、觸摸事件和agemt都會爲你效仿。

5. 經過審覈提高你的站點

YSlow是個偉大的工具。Chrome也在開發人員工具下包含一個稱做Audits的相似工具。
使用快速審覈一下你的網站，來得到有用實際的優化技巧。

還有什麼呢?

沒有這些工具我不能想象如何開發。當我發現新的後我會發布更多，敬請期待。

---

原文：5 Javascript debugging tips you’ll start using today
轉載自：開源中國 - Garfielt