Javascript 調(diào)試技巧

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



2）console 方法 在調(diào)試窗口上打印 JavaScript 值

3）斷點調(diào)試

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

a) Sources斷點

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


b) Debugger斷點

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

4) DOM斷點調(diào)試

a) 當(dāng)節(jié)點內(nèi)部子節(jié)點變化時斷點（Break on subtree modifications）

b) 當(dāng)節(jié)點屬性發(fā)生變化時斷點（Break on attributes modifications）

c) 當(dāng)節(jié)點被移除時斷點（Break on node removal）

4) 事件監(jiān)聽器斷點 Event Listener Breakpoints

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。