天天看點

今天開始應該使用 5 個JavaScript調試技巧

我之前使用過用 printf debugging

,自此之後我用這種方法似乎總能更快地解決bug。

在某些情況下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你會發現它們的有用之處:

1. debugger;

正如我

之前提到的

,你可以使用“debugger;”語句在代碼中加入強制斷點。

需要斷點條件嗎?隻需将它包裝它在IF子句中:

if (somethingHappens) {

    debugger;

}

隻需記住在上線前移除。

2. 當節點變化時斷開

有時DOM像有了自己的想法。當不可思議的變化發生時很難找到問題的根源。

Chrome開發人員工有調試這個問題的超級有用技能。這就是所謂的“Break on…”,你可以通過在元素頁籤上右鍵DOM節點找到它。

斷點可以在節點被删除後設定,當節點的屬性更改或者其子樹中的節點變化時。

今天開始應該使用 5 個JavaScript調試技巧

3. Ajax斷點

XHR斷點或我稱作的Ajax斷點,也允許當一個預期Ajax請求建立時斷開。

當調試你的web應用的網絡時這是個讓人吃驚的工具。

今天開始應該使用 5 個JavaScript調試技巧

4. 模拟不同的移動裝置

Chrome增加了内置的移動裝置模拟工具,這将簡化你的日常工作。

選擇任何非Console的頁籤找到它們,按鍵盤上的esc鍵并選擇你想摸你的移動裝置。

你當然不會得到一個真正的iPhone,但尺寸、觸摸事件和agemt都會為你效仿。

今天開始應該使用 5 個JavaScript調試技巧

5. 通過稽核提升你的站點

YSlow是個偉大的工具。Chrome也在開發人員工具下包含一個稱作Audits的類似工具。

使用快速稽核一下你的網站,來獲得有用實際的優化技巧。

今天開始應該使用 5 個JavaScript調試技巧

還有什麼呢?

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

繼續閱讀