设置的断点是不是被执行了太多次? 有一个包含 150 个元素的循环,但我只想知道第 120 次循环的结果?

# 1. Conditional breakpoints 条件断点

let result = 0;
Array.from(Array(150)).map(Math.random).forEach((vaule, index) => {
    result += v * index
})
1
2
3
4

想知道第 120 次的执行结果,除了循环到 120 次,还有别的办法吗?

  • 右击行号,选择 Add conditional breakpoint...(添加条件断点)
  • 或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
  • 然后输入一个执行结果为 true 或者 false 的表达式(它的值其实不需要完全为 true 或者 false 尽管那个弹出框的描述是这样说的)。

在这个表达式中,你可以使用任何这段代码可以获取到的值(当前行的作用域)。

条件成立就会暂停代码的执行:

# 2. The ninja(忍者) console.log

得益于条件断点, console.log 也有了新玩法:

  • 每一个条件都必须经过判断 - 当应用执行到这一行的时候进行判断
  • 并且如果条件返回的是 falsy 的值(这里的 falsy 并非是笔误, falsy 指的是被判定为 false 的值,例如 undefined ),它并不会暂停..

与其在你的源码的不同地方去添加 console.log / console.table / console.time 等等,不如你直接使用条件判断来将它们“连接”到 Source 面板中。 这样它们就会一直执行,而不当不再需要它们的时候,在 Breakpoints section 点两下鼠标,就可以把所有的断点都移除,就像一堆忍者一样突然消失!

这个技术在调试生产环境的问题时同样很有用,因为你通过这样的方式轻松将 console logs 插入到 source 里。

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM