1 錯(cuò)誤查看
針對(duì)不同的瀏覽器,錯(cuò)誤的提示不同!但錯(cuò)誤的提示大同小異,每一個(gè)瀏覽器的查看基本都可以通過(guò)F12來(lái)查看!方便我們快速的找到相應(yīng)的問(wèn)題,通過(guò)關(guān)鍵字來(lái)抓取有用的信息
2 錯(cuò)誤分類(lèi)
1 代碼錯(cuò)誤
- syntaxError //語(yǔ)法錯(cuò)誤
注意! 一旦出現(xiàn)語(yǔ)法錯(cuò)誤,則整個(gè)代碼都不會(huì)再執(zhí)行(上下代碼塊都不會(huì)執(zhí)行)
- referenceError //引用錯(cuò)誤
注意!一旦出現(xiàn)引用錯(cuò)誤,則這個(gè)代碼后面的代碼不會(huì)再執(zhí)行(前面的代碼不會(huì)受影響)
- rangeError //范圍錯(cuò)誤
注意!與引用錯(cuò)誤是一樣的,出現(xiàn)范圍錯(cuò)誤,則后面的代碼不會(huì)繼續(xù)執(zhí)行
- typeError //類(lèi)型使用不當(dāng)
注意!與引用類(lèi)型錯(cuò)誤是一樣的,出現(xiàn)這個(gè)錯(cuò)誤,則后面的的代碼不會(huì)執(zhí)行
2 邏輯錯(cuò)誤
//瀏覽器不會(huì)報(bào)錯(cuò),程序正常運(yùn)行,但是結(jié)果不是我們所想要的
Debugger(代碼調(diào)試)
-
1 在想要調(diào)試的地方加上debugger
圖片1.png -
2 再次運(yùn)行代碼,顯示進(jìn)入調(diào)試狀態(tài)
圖片2.png 第一個(gè)按鈕:執(zhí)行到下一個(gè)debugger語(yǔ)句。
F10(第二個(gè)按鈕)執(zhí)行當(dāng)前的代碼。
F11(第三個(gè)按鈕)進(jìn)入到當(dāng)前代碼的內(nèi)部。如果當(dāng)前代碼是一個(gè)函數(shù)的話,則會(huì)進(jìn)入函數(shù)的內(nèi)部。如果當(dāng)前代碼只是一句普通的代碼,則與f10的功能是一樣的。
Shift+f11 (第四個(gè)按鈕)從函數(shù)的內(nèi)部跳出來(lái)。
注意!
在調(diào)試的過(guò)程中,可以通過(guò)鼠標(biāo)的懸停,查看變量的值
- 3監(jiān)視變量的變化
圖片3.png
3 錯(cuò)誤原因
常見(jiàn)的錯(cuò)誤原因無(wú)非以下幾種情況
- 代碼字母錯(cuò)誤!導(dǎo)致瀏覽器不能解析
- 代碼格式書(shū)寫(xiě)錯(cuò)誤!沒(méi)有按照語(yǔ)法格式來(lái)寫(xiě)
- 對(duì)于有數(shù)值的計(jì)算,輸入的值超出了代碼本身的限制
- 數(shù)據(jù)的類(lèi)型!沒(méi)有按照標(biāo)準(zhǔn)書(shū)寫(xiě)