如果頁面上有錯誤,html頁面的控制台會報錯,可以查看報錯信息,找到對應的行,找到出錯的位置。
也可以通過editplus運行調試,editplus會以彈框的形式出現提示,哪行的什么位置什么錯誤,需要記住這個提示信息,然后返回去找對應的代碼。
這兩種都需要根據提示去找行列,瀏覽器本身還有更加直觀的方法:可直接通過瀏覽器異常處斷點,直接直觀的找到出錯的位置和出錯的信息。
例如:如圖,qq瀏覽器和火狐瀏覽器為例。
1.打開瀏覽器的開發者模式
在需要調試的頁面按F12,如果是沒小鍵盤的那種筆記本的,則需要按Fn+F12,打開瀏覽器的開發者模式。
2.找到異常處斷點,並打開這個設置
qq瀏覽器:Sources(右側)——圖標里有個實心圓里有兩個豎條的 圖標,點擊這個圖標(鼠標移動到該圖標上,會有提示Pause on exceptions),可打開異常處斷點。如果想取消,還是點這個圖標,這時候(鼠標移動到上面,會在原來的提示前有Don't,表示再次點擊就是取消異常處斷點的意思)
火狐瀏覽器:調試器里(右側)——斷點下面——異常處暫停,捕捉到異常時暫停,復選框前面打勾。
如圖:
如果LODOP沒安裝,或當前瀏覽器需要使用的是c-lodop,c-lodop雖然安裝了但是沒啟動,一般會提示LODOP未定義之類的,例如 TypeError:LODOP is undefined,並且調用打印的方法也報錯,比如打印時最先使用的初始化,說LODOP.PRINT_INIT("")初始化,LODOP沒定義。
進行調試,會發現進到lodopFuncs.js里,LODOP=getCLodop();,
提示的是ReferenceError:getCLodop is not defined。
這是因為,LodopFuncs.js里判斷當前需要使用clodop后,會調用http://localhost:8000/CLodopfuncs.js,http://localhost:18000/CLodopfuncs.js,getCLodop方法就在這個clodopFuncs.js的JS里,想要訪問到這個JS,就必須c-lodop安裝且已經啟動,如果沒啟動,也是訪問不到的,所以就報錯了。
此外,瀏覽器中斷點后,可以步進,步出,斷點中斷后,還可以往下執行,會以綠色的形式,直到再次跳到紅色錯誤里去,然后達到最后的結果,如上,沒安裝或沒啟動,最后會根據lodopFuncs.js走頁面提示。