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

調(diào)試基本流程

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

整體流程：

• 有報錯：查看控制臺，定位是否為語法問題、類庫兼容問題

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

• 無報錯，或報錯且無有效信息-二分注釋排查法

調(diào)試方法

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

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

排查bug的兩大技巧

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

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

【拓展】debugger方法：

• 直接在代碼中寫入debugger

• 在Chrome DevTool的源代碼面板里點擊代碼行序號

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

如何看控制臺報錯

控制臺的報錯分為JS常見錯誤、第三方庫問題、前后端通信問題三種類型。

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

• SyntaxError - 語法錯誤

• ReferenceError - 引用錯誤，通常是變量或方法沒有聲明，直接使用

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

• RangeError - 死循環(huán)

第三方庫的問題：報錯信息中無源碼文件提示，無常見錯誤提示。此類錯誤需要多借助搜索引擎解決，多看多積累。

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

【拓展】

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

• 400：請求體傳遞參數(shù)不對。

  NetWork查看請求體

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

• 401：token失效，請求頭沒有攜帶token。

  查看請求頭，是否有token

  重新登錄，驗證token過期。

• 404：沒有該接口（通常是url路徑寫的有問題）

  查看請求頭上的url路徑

  核對接口文檔的url路徑

• 405：請求方式不對（通常是get 、post、put等方式寫錯）

  查看請求頭中的method字段

  核對接口文檔的method字段

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

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

前端常見錯誤

取值調(diào)用報錯

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

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

• xxx is not a function

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

資源引入錯誤

• Failed to resolve xxx

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

• the server responded with a status of 404/400

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

• xxx does not provide an export named default/xxx

  一般只見于import 引入模塊的時候，引入的東西不存在于目標(biāo)文件。檢查下拼寫，以及引入來源有沒有export引入的東西

解析錯誤

• Expected xxx in JSON at position 1

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

低級錯誤

• Uncaught SyntaxError

  語法錯誤，最低級的錯誤。解決：按提示檢查語法幾個

• Maximum call stack size exceeded

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

• Identifier 'xxx' has already been declared

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

• xxx is not defined

  使用了沒有定義的變量，解決：看看是不是變量名拼錯了，或者作用域不對

• Cannot access 'abc' before initialization

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

請求錯誤

• 請求碼錯誤

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

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

  100：基本看不到，200，300基本都是沒問題

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

  跨域錯誤

總結(jié) 

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

最新評論