js實現調試類,JS在線調試

本文目錄一覽：

1.打開檢查，在sources找到對應的js文件，打上斷點

2.刷新頁面出現灰色區域表示進入調試模式

3.上面的按鈕表示下一步也可以使用快捷鍵f10

4.上面的按鈕表示終止本次調試（終止不了可以多點幾次），但是刷新依然會進入調試模式

5.點擊上面的藍色按鈕，表示取消斷點，再次刷新頁面就不會進入調試模式

谷歌開發人員工具都可以調試，ie瀏覽器按f12，有個腳本

開啟調試功能，加載js的時候就開啟，js報錯就會自動提示，也可以在js上打斷點（或者自己在js中想要打斷點的位置加debuger；js運行到這句代碼就會自動暫停）不用調試的時候記得關閉調試，因為佔用內存ie會卡死

其實當你經驗足夠的時候，有些錯誤不需要調試就能想明白。當然，新手而言，從調試做起。

主要的技巧取決於你使用的調試工具，這裡以我使用的chrome為例。首先跳出chrome的調試工具，右鍵選擇檢查。。

接着彈出開發者窗口，如圖

這個就是調試頁面了，然後單擊頂頭的source，找到你的js腳本，如圖：

圖片中那個藍色的小框框就是斷點了，設置方法就是單擊那裡。

可以見到，窗口下面紅色鮮紅的值就是錯誤了，單擊後面的錯誤位置就能定位了(語法錯誤能顯示定位，但是邏輯錯誤無法定位。內置api出錯定位會出錯，比如JSON.parse()出錯就定位到html文件去了)

左下角有一個藍色小箭頭，後面是能輸入的，輸入一下試試，

我輸入了cookie，就返回了cookie的值。其他的同理。

另外也可以在js腳本裏面使用console.log()，在console一欄會顯示的。更多的方法，嘗試才知道。

以IE8瀏覽器為例，接下來重點介紹並演示如何使用瀏覽器自帶的開發人員工具調試JS程序。（該工具快捷按鈕為F12）

1、在工具-Internet選項-高級，去掉「禁用腳步調試（Internet Explorer）」項的勾選。

2、去掉「顯示友好http錯誤信息」項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇「是（Y）」按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象「dat」而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控件的，本例中第二個單行輸入框控件的id值是data2。修改後的JS代碼。

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

7、本例只是演示了如何利用IE自帶的開發人員工具進行簡單的調試工作，如需了解其他調試及排查技巧，請參閱網絡及相關書籍進行學習。

所有的瀏覽器都有調試台的功能,火狐的話firebug比較好,然後火狐console.log()這個方法不錯,你可以試試

JS 調試，關鍵就是加斷點來調試了。沒什麼技巧可說。

看下這個，用firefox瀏覽器調試js:

原創文章，作者：TSPH，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/137943.html