首頁 > web前端 > js教程 > 推薦5 個常用的JavaScript調試技巧_javascript技巧

推薦5 個常用的JavaScript調試技巧_javascript技巧

WBOY
發布: 2016-05-16 16:21:26
原創
1021 人瀏覽過

我之前使用過用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的類似工具。
使用快速審核一下你的網站,來獲得有用實際的優化技巧。

還有什麼呢?

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板