【译】你不知道的 Chrome 调试工具技巧第十二天：忍者日志打印！(the ninja logs)

特别声明

本文是做者 Tomek Sułkowski 发布在 medium 上的一个系列。据做者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原做者全部。
vue

做者在Twitter上推荐咱们的中文翻译啦,截图在最后
git

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
github

正文

在立刻就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天咱们深刻了样式编辑器，今天我想展现一个我称之为 ninjia console logs 的有趣的技术,可是首先咱们先谈谈...异步

33. `Conditional breakpoints` 条件断点

有时设置的断点被执行太屡次了：想一想看，有一个对 200 个元素的循环，但你只对第 110 次循环的结果感兴趣，或者只对一些知足其余的特殊条件的结果感兴趣。编辑器

这样的状况下，就能够设置一个条件断点。实现：工具

右击行号而且选择 Add conditional breakpoint...(添加条件断点) 的选项post
或者右击一个已经设置的断点而且选择 Edit breakpoint(编辑断点)开发工具
而后输入一个执行结果为 true 或者 false 的表达式（它的值并不须要明确的为 true 或者 false 尽管那个弹出框的描述是这样说的）。spa

在这个表达式中，你能够获取到任何这段代码能够获取到的东西，即这一行的做用域。翻译

如今条件知足的话，断点就会暂停代码的执行

34.The ninja（忍者） console.log

得益于条件断点，如今能够开始灵活使用这个技术。由于：

每个条件都必须通过判断 - 也就是 - 运行 - 每当应用执行到这一行。
而且若是条件返回的是falsy的值(例如. undefined )，它并不会暂停..

因此，与其在源码的不一样地方去添加 console.log / console.table / console.time 等等，不如直接使用条件判断来将它们 “链接” 到 Source 面板中。它们不会中止，会一直执行，而且当你再也不须要它们的时候，有一个地方( Breakpoints section )会列出它们。点两下鼠标就能够把全部的都移除，就像一堆忍者同样消失！

这个技术在调试生产环境的问题时一样颇有用，你能够将 console logs 轻松插入到 source 里。

今天的分享就到这里~

惯例：若是你从这里学到了一些新东西

→ 你能够点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其余系列

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

写在最后

若是你对个人翻译表示确定，也能够关注我一波哦~ 顺便个人开源项目，求一波 star→ 看这里, 美丽的博客系统

【译】你不知道的 Chrome 调试工具技巧 第十二天：忍者日志打印！(the ninja logs)