Javascript 調試技巧

在代碼中尋找錯誤
1）alert 方法： 彈框提示



2）console 方法 在調試窗口上打印 JavaScript 值

3）斷點調試

在瀏覽器開發者工具中為JS代碼添加斷點，讓JS執行到某一特定位置停住，方便開發者對該處代碼段的分析與邏輯處理.

a) Sources斷點

打開開發工具——“點擊Sources菜單”——“左側樹中找到相應文件”——"點擊行號列"即完成在當前行添加/刪除斷點操作。當斷點添加完畢后，刷新頁面JS執行到斷點位置停住，在Sources界面會看到當前作用域中所有變量和值，只需對每個值進行驗證即可完成我們題設驗證要求。


b) Debugger斷點

操作就跟在Sources面板添加斷點調試幾乎一模一樣，唯一的區別在于調試完后需要刪除該語句。
但是在開發中偶爾會遇到異步加載html片段（包含內嵌JS代碼）的情況，而這部分JS代碼在Sources樹種無法找到，因此無法直接在開發工具中直接添加斷點，那么如果想給異步加載的腳本添加斷點，此時"debugger;"就發揮作用了。

4) DOM斷點調試

a) 當節點內部子節點變化時斷點（Break on subtree modifications）

b) 當節點屬性發生變化時斷點（Break on attributes modifications）

c) 當節點被移除時斷點（Break on node removal）

4) 事件監聽器斷點 Event Listener Breakpoints

總結

以上是生活随笔為你收集整理的Javascript 调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。