報(bào)錯(cuò)和Bug，是貫穿程序員整個(gè)編程生涯中，無(wú)法回避的問(wèn)題。而調(diào)試，就是幫助程序員定位問(wèn)題、解決問(wèn)題的重要手段，因此，調(diào)試是每個(gè)程序員必備技能。

調(diào)試基本流程

核心原則：最重要的就是不斷地縮小范圍，在找出bug所在的具體代碼塊

整體流程：

• 有報(bào)錯(cuò)：查看控制臺(tái)，定位是否為語(yǔ)法問(wèn)題、類(lèi)庫(kù)兼容問(wèn)題

• 通信不成功：查看網(wǎng)絡(luò)，定位前端問(wèn)題，或是后端問(wèn)題

• 無(wú)報(bào)錯(cuò)，或報(bào)錯(cuò)且無(wú)有效信息-二分注釋排查法

調(diào)試方法

步驟推測(cè)法：大多數(shù)的需求是線性的，基本上都可以分析出來(lái)步驟，當(dāng)我們發(fā)現(xiàn)效果和預(yù)期不一樣。那么分析步驟，然后按步驟排查，逐步縮小范圍。最終確定問(wèn)題

刪除代碼法：有的時(shí)候步驟很復(fù)雜，或者完全找不到頭緒，可以先刪除某塊代碼，然后看是否正常，可以確定錯(cuò)誤區(qū)域在這塊。然后再進(jìn)去這塊。繼續(xù)刪除某一個(gè)部分，知道縮小到具體代碼。適用于某些無(wú)法看到錯(cuò)誤，完全不明確錯(cuò)誤在哪的時(shí)候

排查bug的兩大技巧

console：最常用的調(diào)試方法，當(dāng)我們有懷疑的問(wèn)題，可以配合console打印數(shù)據(jù)來(lái)驗(yàn)證數(shù)據(jù)是否符合預(yù)期打印語(yǔ)句驗(yàn)證代碼塊是否執(zhí)行。

debugger：代碼執(zhí)行過(guò)程非簡(jiǎn)單線性，有很多異步操作。我們想看某一刻的狀態(tài)時(shí)可以用debugger。也就是想看代碼執(zhí)行到某一行的時(shí)，整個(gè)頁(yè)面的狀態(tài)

【拓展】debugger方法：

• 直接在代碼中寫(xiě)入debugger

• 在Chrome DevTool的源代碼面板里點(diǎn)擊代碼行序號(hào)

debugger開(kāi)啟后會(huì)出現(xiàn)上圖的調(diào)試工具，其作用分別為恢復(fù)執(zhí)行、跳過(guò)下一個(gè)函數(shù)的執(zhí)行過(guò)程、進(jìn)入函數(shù)調(diào)用、跳出函數(shù)調(diào)用、單步執(zhí)行、讓斷點(diǎn)失效。

如何看控制臺(tái)報(bào)錯(cuò)

控制臺(tái)的報(bào)錯(cuò)分為JS常見(jiàn)錯(cuò)誤、第三方庫(kù)問(wèn)題、前后端通信問(wèn)題三種類(lèi)型。

JS常見(jiàn)錯(cuò)誤：常見(jiàn)報(bào)錯(cuò)類(lèi)型有4類(lèi)，報(bào)錯(cuò)中需要關(guān)注的三類(lèi)信息報(bào)錯(cuò)信息、提示文字、報(bào)錯(cuò)文件，一般集中在前兩行。此類(lèi)錯(cuò)誤需要根據(jù)提示做修改。

• SyntaxError - 語(yǔ)法錯(cuò)誤

• ReferenceError - 引用錯(cuò)誤，通常是變量或方法沒(méi)有聲明，直接使用

• TypeError - 類(lèi)型錯(cuò)誤，通常是在錯(cuò)誤的數(shù)據(jù)類(lèi)型上，訪問(wèn)某個(gè)方法或?qū)傩?/p>

• RangeError - 死循環(huán)

第三方庫(kù)的問(wèn)題：報(bào)錯(cuò)信息中無(wú)源碼文件提示，無(wú)常見(jiàn)錯(cuò)誤提示。此類(lèi)錯(cuò)誤需要多借助搜索引擎解決，多看多積累。

前后端通信問(wèn)題：控制臺(tái)提示出現(xiàn)4XX、5XX的狀態(tài)碼，此類(lèi)錯(cuò)誤可以借助Chrome DevTool的Source面板快速定位修復(fù)。

【拓展】

1、出現(xiàn)4XX，結(jié)合狀態(tài)碼快速分析原因：

• 400：請(qǐng)求體傳遞參數(shù)不對(duì)。

  NetWork查看請(qǐng)求體

  比對(duì)接口文檔，查看數(shù)據(jù)格式和屬性名是否一致。

• 401：token失效，請(qǐng)求頭沒(méi)有攜帶token。

  查看請(qǐng)求頭，是否有token

  重新登錄，驗(yàn)證token過(guò)期。

• 404：沒(méi)有該接口（通常是url路徑寫(xiě)的有問(wèn)題）

  查看請(qǐng)求頭上的url路徑

  核對(duì)接口文檔的url路徑

• 405：請(qǐng)求方式不對(duì)（通常是get 、post、put等方式寫(xiě)錯(cuò)）

  查看請(qǐng)求頭中的method字段

  核對(duì)接口文檔的method字段

2、5XX一般為后臺(tái)問(wèn)題，可以把關(guān)鍵信息發(fā)送給后端，通知后端參與處理。

建議一次性發(fā)給后端的數(shù)據(jù)： 請(qǐng)求路徑、請(qǐng)求方式、狀態(tài)碼、請(qǐng)求體（載荷）、響應(yīng)體（預(yù)覽）

前端常見(jiàn)錯(cuò)誤

取值調(diào)用報(bào)錯(cuò)

• Cannot read properties of undefined(reading 'xxx')

  試圖從一個(gè)undefined里讀取某個(gè)屬性，常見(jiàn)于從用.取值的時(shí)候。解決-看見(jiàn)這個(gè)報(bào)錯(cuò)馬上根據(jù)報(bào)錯(cuò)上的讀xxx找到你讀取xxx的地方，此時(shí)已經(jīng)可以斷定此處有一個(gè)undefined，找出來(lái)為什么是undefined

• xxx is not a function

  常見(jiàn)用調(diào)用方法的時(shí)候，這個(gè)報(bào)錯(cuò)意味著你當(dāng)成一個(gè)方法調(diào)用的東西不是一個(gè)方法。比如是一個(gè)undefined，字符串?dāng)?shù)組，對(duì)象，卻被當(dāng)成了方法調(diào)用 解決-和undefined問(wèn)題一樣，直接按照提示的什么不是一個(gè)方法找到，然后排查他為什么不是一個(gè)方法就行

資源引入錯(cuò)誤

• Failed to resolve xxx

  某資源的引入失敗，通常見(jiàn)于import引入了一個(gè)不存在的模塊。一般是由構(gòu)建工具提示，不會(huì)在控制臺(tái)上輸出解決-檢查提示的錯(cuò)誤import的地址就好。

• the server responded with a status of 404/400

  一般見(jiàn)于html文件的打開(kāi)項(xiàng)目(項(xiàng)目最終在瀏覽器跑起來(lái)本質(zhì)上是打開(kāi)一個(gè)html，加載你寫(xiě)的js文件)。意思是你script標(biāo)簽加載的js文件，或者link標(biāo)簽加載css文件，或者img標(biāo)簽加載的圖片文件地址不存在或者無(wú)法訪問(wèn)解決-通過(guò)網(wǎng)絡(luò)面板，看看是哪個(gè)資源錯(cuò)誤了，檢查下資源的路徑

• xxx does not provide an export named default/xxx

  一般只見(jiàn)于import 引入模塊的時(shí)候，引入的東西不存在于目標(biāo)文件。檢查下拼寫(xiě)，以及引入來(lái)源有沒(méi)有export引入的東西

解析錯(cuò)誤

• Expected xxx in JSON at position 1

  只見(jiàn)于JSON.parse解析JSON字符串的時(shí)候，JSON字符串的格式有問(wèn)題，一般后端返回的數(shù)據(jù)，前端axios會(huì)自動(dòng)試圖接續(xù)，不一定是你主動(dòng)地JSON.parse。解決：檢查解析的數(shù)據(jù)是否有問(wèn)題，是否標(biāo)準(zhǔn)的json數(shù)據(jù)，可以利用JSON解析工具去校驗(yàn)

低級(jí)錯(cuò)誤

• Uncaught SyntaxError

  語(yǔ)法錯(cuò)誤，最低級(jí)的錯(cuò)誤。解決：按提示檢查語(yǔ)法幾個(gè)

• Maximum call stack size exceeded

  一般就是死循環(huán)，常見(jiàn)于遞歸，或者react中會(huì)常見(jiàn)組件導(dǎo)致的無(wú)限遞歸更新，或者寫(xiě)了一個(gè)無(wú)窮大的循環(huán)函數(shù)。

• Identifier 'xxx' has already been declared

  重復(fù)變量定義，解決：檢查下哪個(gè)變量重復(fù)定義換個(gè)名字就好

• xxx is not defined

  使用了沒(méi)有定義的變量，解決：看看是不是變量名拼錯(cuò)了，或者作用域不對(duì)

• Cannot access 'abc' before initialization

  和上面的一樣，但區(qū)別在于這個(gè)是定義了變量，但是在定義變量前使用了變量。變量的拼寫(xiě)和作用域是沒(méi)問(wèn)題的，解決：看看變量的順序

請(qǐng)求錯(cuò)誤

• 請(qǐng)求碼錯(cuò)誤

  500類(lèi)：八成服務(wù)器問(wèn)題，也可能是參數(shù)不對(duì)導(dǎo)致的

  404，403，400：基本都是前端的問(wèn)題，404是地址錯(cuò)誤了，403是請(qǐng)求無(wú)權(quán)限，400是請(qǐng)求發(fā)的不符合后端要求

  100：基本看不到，200，300基本都是沒(méi)問(wèn)題

• Access to XMLHttpRequest at 'http://xxx.com/xxx' from origin has been blocked by

  跨域錯(cuò)誤

總結(jié) 

到此這篇關(guān)于前端bug調(diào)試的方法技巧及常見(jiàn)錯(cuò)誤的文章就介紹到這了,更多相關(guān)前端bug調(diào)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論