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

調試基本流程

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

整體流程：

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

• 通信不成功：查看網絡，定位前端問題，或是后端問題

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

調試方法

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

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

排查bug的兩大技巧

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

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

【拓展】debugger方法：

• 直接在代碼中寫入debugger

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

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

如何看控制臺報錯

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

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

• SyntaxError - 語法錯誤

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

• TypeError - 類型錯誤，通常是在錯誤的數據類型上，訪問某個方法或屬性

• RangeError - 死循環(huán)

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

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

【拓展】

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

• 400：請求體傳遞參數不對。

  NetWork查看請求體

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

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

  查看請求頭，是否有token

  重新登錄，驗證token過期。

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

  查看請求頭上的url路徑

  核對接口文檔的url路徑

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

  查看請求頭中的method字段

  核對接口文檔的method字段

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

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

前端常見錯誤

取值調用報錯

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

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

• xxx is not a function

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

資源引入錯誤

• Failed to resolve xxx

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

• the server responded with a status of 404/400

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

• xxx does not provide an export named default/xxx

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

解析錯誤

• Expected xxx in JSON at position 1

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

低級錯誤

• Uncaught SyntaxError

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

• Maximum call stack size exceeded

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

• Identifier 'xxx' has already been declared

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

• xxx is not defined

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

• Cannot access 'abc' before initialization

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

請求錯誤

• 請求碼錯誤

  500類：八成服務器問題，也可能是參數不對導致的

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

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

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

  跨域錯誤

總結 

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

最新評論