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

当发生异常时，如何直接断点到异常位置调试

---

关注公众号山月行，记录个人技术成长，欢迎交流