JS 調試示例

在寫 node 應用或者 react 應用時，常常須要看一些庫的源碼，而在看源碼時，除了一個順手的 IDE 外，學會調試也相當重要。所以，我把常見的調試的一些小問題記錄下來。

• 本文連接: shanyue.tech/post/js-deb…

Return Value

如何經過調試獲取函數的返回值

當函數返回的是一個表達式時，如何在 debug 中，在當前函數中獲取到返回值

以下例所示，如何在 sum 函數中經過調試獲得 7，而非獲取到 a 和 b 再二者相加

function sum (a, b) {
  // 在調試中如何獲得 7 這個結果
  return a + b
}

sum(3, 4)
複製代碼

Step Over

當單行調用多個函數表達式時，Step Over 是跳過一行仍是一個表達式？

// 當此行有斷點時，Step Over 進入哪裏
const l = [1, 2, 3, 4, 5].map(x => sum(x, 1)).filter(x => x > 3)

const n = sub(sum(3, 4), 1)
複製代碼

多層嵌套

當單行調用多個函數表達式時，如何進入特定函數中進行 debug

(不經過對指定函數起始位置打斷點的方法，由於有時沒法得知指定函數位置)

// 如何進入到 `.filter` 函數中進行調試
const l = [1, 2, 3, 4, 5].map(x => sum(x, 1)).filter(x => x > 3)

// 如何進入到 sub 函數中進行調試
const n = sub(sum(3, 4), 1)
複製代碼

在單行調用多個函數表達式時，如何設置條件斷點

// 如何在 map 函數中，當 x === 3 時打斷點
const = [1, 2, 3, 4, 5].map(x => sum(x, 1))
複製代碼

Async/Await

如何跳進 await 的函數中進行調試？

如下 sum 函數和 asyncSum 函數 Step Into 的步驟是否一致？

function sum (a, b) {
  return a + b
}

async function asyncSum (a, b) {
  return a + b
}

async function main () {
  const sum = await sum(3, 4)
  const asyncSum = await sum(3, 4)
  return sum
}
複製代碼

Promise

如何進入到 promise.then 函數中進行調試？(不經過直接打斷點)

Promise.resolve(3).then(o => {
  // 如何 StepOver/StepInto 到當前行進行調試
  console.log(o)
})

console.log('hello, world')
複製代碼

調試過程當中，常常進入的 async_hooks 是什麼

Error

當發生異常時，如何直接斷點到異常位置調試

---

關注公衆號山月行，記錄個人技術成長，歡迎交流