特别声明
本文是作者 Tomek Sułkowski https://twitter.com/sulco 发布在 https://medium.com/@tomsu 上的一个系列. 据作者透露一共有 24 篇, 一直更新到 12 月 24 日
版权归原作者所有.
作者在 Twitter 上推荐我们的中文翻译啦, 截图在最后
译者在翻译前已经和作者沟通得到了翻译整个系列的授权.
为了不影响大家阅读, 授权的记录在这里
正文
在马上就要迎来假期的这 24 天里, 我将会发布一系列短篇的文章, 关于如何更加有意思的使用开发工具, 昨天我们深入了样式编辑器, 今天我想展示一个我称之为 ninjia console logs 的有趣的技术, 但是首先我们先谈谈...
- 33.
- Conditional breakpoints
条件断点
有时候你设置断点但他们被执行太多次了: 想想有一个对 200 个元素的循环但是你只对第 110 次循环的结果感兴趣, 或者只对一些其他的特殊情况发生时的结果感兴趣.
在那样的情况下, 你可以设置一个条件断点. 这样实现:
右击行号并且选择 Add conditional breakpoint...(添加条件断) 点的选项
或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
然后输入一个执行结果为 true 或者 false 的表达式(它的值并不需要明确的为 true 或者 false 尽管那个弹出框的描述是这样说的).
在这个表达式中你可以获取到任何这段代码可以获取到的东西, 即这一行的作用域.
现在如果条件满足, 这个断点将会暂停代码的执行
34.The ninja(忍者) console.log
现在你可以开始使用这个华而不实的技术得归功于条件断点. 因为:
当提供条件时, 必须检查条件 - 即 - 运行 - 每当应用执行到这一行.
并且如果条件返回的是 falsy 的值(例如. undefined ), 它并不会暂停..
所以, 与其在你的源码的不同地方去添加 console.log / console.table / console.time 等等, 不如你直接使用条件判断来将它们 "连接" 到 Source 面板中. 它们不会停止, 而是会一直执行, 并且当你不再需要它们的时候, 有一个地方 (Breakpoints section(Breakpoints 部件)) 会完美列出它们. 你可以点两下鼠标把所有的都移除, 它们就像一堆忍者一样消失!
这个技术在调试生产环境的问题时同样很有用, 你可以轻松将 console logs 插入到 source 里.
今天的分享就到这里~
惯例: 如果你从这里学到了一些新东西
→ 你可以点个赞再走嘛~
→ 关注我: Twitter:Tomek Sułkowski https://twitter.com/sulco
其他系列
其他此系列的文章, 马上就会翻译出来, 到时会贴出对应的链接在此处.
[译] 你不知道的 Chrome 调试工具技巧 第一天: console 中的'$'
[译] 你不知道的 Chrome 调试工具技巧 第二天: copying & saving
[译] 你不知道的 Chrome 调试工具技巧 第三天: console methods
[译] 你不知道的 Chrome 调试工具技巧 第四天: the Elements panel(元素面板)
[译] 你不知道的 Chrome 调试工具技巧 第五天: console 的 log 中, 让人疑惑的案例
[译] 你不知道的 Chrome 调试工具技巧 第六天: command 菜单
[译] 你不知道的 Chrome 调试工具技巧 第七天: 异步 consle 的趣味小窍门
[译] 你不知道的 Chrome 调试工具技巧 第八天: Color picker(颜色选择器)
[译] 你不知道的 Chrome 调试工具技巧 第九天: 给 console 计时
[译] 你不知道的 Chrome 调试工具技巧 第十天: custom formatters(自定义格式转换器)
[译] 你不知道的 Chrome 调试工具技巧 第十一天: style editors continued(样式编辑器后续)
来源: https://juejin.im/post/5c16d943518825566d2365f3