特别声明
本文是作者 Tomek Sułkowski https://twitter.com/sulco 发布在 https://medium.com 上的一个系列.
版权归原作者所有.
前两篇的翻译链接我已经给到了作者本人, 虽然他不理解中文, 但是他还是很开心哈哈, 我们也把外国友人带到掘金啦, 哈哈, 截图在最后
译者在翻译前已经和作者沟通得到了翻译整个系列的许可.
为了不影响大家阅读, 获得许可的记录会放在本文的最后~
正文
在马上就要迎来假期的这 24 天里, 我将会发布一系列短篇的文章, 关于如何将开发工具使用得更加有意思, 昨天我们说到了第 8 个, 所以今天我们就从 9 开始:
9. console.assert
图片来源于 MDN-console/assert
当我们传入的第一个参数为假时, console.assert 打印跟在这个参数后面的值. 当你需要在特殊情况下打印一些信息的时候这很有用 - 现在你可以在不使用 if表达式的情况下做到这件事情. 另外, 你还可以白白得到一个堆栈的跟踪信息 ;-)
请注意, 如果你使用的 Node.JS 版本 ≤ 10.0 , 那可能会中断后面代码的执行, 但是在. 10 的版本中被修复了 (当然, 在浏览器中使用是完全安全的)
10. console.table
令人惊讶的是, 这一个小技巧在开发者中并没有多少人知道. 如果你有一个数组 (或者是类数组的对象, 或者就是一个对象), 你可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来. 它不仅仅会根据数组中包含的对象的所有属性, 去计算出表中的列名, 而且这些列都是可以缩放甚至...可以排序!
当列太多的时候, 使用第二个参数, 传入你想要展示的列对应的名字
如果你偶尔在后台进行尝试的话, 只有 node 版本大于 10 以上, console.table 才能起作用
11. console.dir
最受欢迎 console.log 方法将数据以格式化的形式打印出来, 在大多数的情况下这确实很有用. 但是有时候那可能不是你想看到的 - 最典型的例子就是你想要打印一个 DOM 节点. console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样. 如果说你想要查看这个节点所关联到的真实的 JS 对象呢? 并且想要查看他的属性等等?
在那样的情况下, 如果你需要更加直接的表现形式来展示你的数据, 就可以使用 console.dir.
这就是今天的内容啦, 惯例: 如果你从这里学到了一些新东西
→ 你可以点个赞再走嘛~
→ 关注我的 Twitter Tomek Sułkowski https://twitter.com/sulco
其他系列
其他此系列的文章, 马上就会翻译出来, 到时会贴出对应的链接在此处.
[译] 你不知道的 Chrome 调试工具技巧 第一天: console 中的'$'
[译] 你不知道的 Chrome 调试工具技巧 第二天: copying & saving
[译] 你不知道的 Chrome 调试工具技巧 第三天: console methods
写在最后
如果你对我的翻译表示肯定, 也可以关注我一波哦~ 顺便我的开源项目, 求一波 star→ 看这里, 美丽的博客系统
许可记录
关于这次翻译, 作者的回复
来源: https://juejin.im/post/5c0a8ce6f265da6141716329