除錯程式碼報錯的技巧

技巧1: 讀懂報錯資訊

大部分情況下，能讀懂錯誤資訊與錯誤堆疊的資訊，就知道是什麼導致的婚戀app原始碼錯誤。報錯資訊可以分為如下四類：

引用型別錯誤。婚戀app原始碼引用不存在的變數時會報這個錯。如:

console.log(a)

會報錯: Uncaught ReferenceError: a is not defined。因為 a 被引用時，還沒有被定義。

語法錯誤。婚戀app原始碼出現語法錯誤時會報這個錯。如:

let c == 5

會報錯: Uncaught SyntaxError: Unexpected token ‘==’。

型別錯誤。婚戀app原始碼中值的型別與預期不一致時會報這個錯。如：

let data = await fetch('/api/list')data.list

如果 data 是 undefined。會報錯：Uncaught TypeError: Cannot read property ‘list’ of undefined。預期是物件，實際是 undefined。

再看下面的程式碼：

doSth()function doSth(cb) {
  cb()}

會報：Uncaught TypeError: cb is not a function。預期是函式，實際不是。

範圍錯誤。當婚戀app原始碼設定的數值超出相應的範圍會報這個錯。如：

new Array(-1)。

會報：Uncaught RangeError: Invalid array length。

技巧2: 二分法排錯

有的報錯，根據婚戀app原始碼的報錯資訊，無法定位到具體的程式碼。此時，可以用二分法來快速定位到報錯的具體程式碼。具體做法如下:

如，在 React 開發中，常會碰到這樣的錯：Uncaught Invariant Violation: Minified React error #31;…。這是因為非法的 JSX 的節點導致的。二分法可以快速的找出有問題的 JSX。

技巧3: 打斷點的技巧

可以在報錯的前一行斷點。可以檢視婚戀app原始碼當前作用域和上級作用域中，各個變數值。看是哪個導致的下一行的報錯。

上圖中右側的 Scope Tab 中的內容是作用域中變數的資訊， Call Stack 是呼叫堆疊資訊。

如果只有在某些情況下，才會報錯，可以打條件斷點。我習慣在程式碼裡寫條件斷點：

if (a > 5) {
  debugger}

除錯邏輯出錯的技巧

邏輯出錯，常常是因為錯誤的條件判斷，錯誤的迴圈退出條件和沒控制好非同步導致的。

找出婚戀app原始碼邏輯出錯的方式:

技巧1: 用斷點找到問題程式碼

有時候，錯誤的邏輯會導致的預期之外的 DOM 變化。或介面的呼叫。這種情況下，可以通過設定 DOM 斷點來查詢問題。DOM 斷點支援 3 種觸發條件：

舉個例子，要看元素為什麼被錯誤的移除了，設定 DOM 斷點，觸發條件是 node removal。設定 DOM 斷點方式，右擊目標元素，點選下圖所示的選單:

有時候，錯誤的邏輯會導致的預期之外的介面呼叫。這種情況下，可以通過設定 XHR/fetch 斷點來查詢問題。XHR/fetch 斷點的觸發條件支援篩選介面地址。在開發者工具的 Source Tab，可以打 XHR/fetch 斷點。

技巧2: 用斷言找到出錯的函式

我們給函式寫覆蓋率很高的單元測試來確保函式邏輯的正確性。但受限與團隊的理念，寫測試的不小的工作量，婚戀app原始碼開發工期等原因，寫測試的畢竟是少數。

用 console.assert() 來寫些斷言，是測試的低成本替代方案。只有在 console.assert() 的第一個引數是 false 時，向控制檯輸出第二個引數的內容。通過 console.assert() 輸出的報錯資訊，來知道哪個函式出錯了。例如:

function sum(a, b) {
  // 程式碼實現}console.log(sum(1, 2) !== 3, `sum 函式邏輯錯誤`)

技巧3: 除錯點選外側消失的元素的樣式

婚戀app原始碼中有的元素，在開發中工具去審查它的時候，它就消失了。可以通過斷點會凍結 DOM 的特性來除錯這元素。在控制檯中，輸入下面的程式碼:

setTimeout(() => {debugger}, 2000)

然後，讓元素顯示。2秒後，會進斷點，此時再去審查元素，因為 DOM 的更新被斷點凍結住了，元素就不會消失。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：