微信号:gh_b206cf608d16

介绍:爆米兔,是一个H5营销在线制作工具.

你不知道的Chrome调试工具技巧 第三天:console methods

2019-01-03 17:37 doink

编者按:本文由 Tomek Sułkowski 发布在 medium 上的系列文章第一篇,掘金用户 dendoink 得到授权翻译系列文章,奇舞周刊得到系列译文的转载授权,在此感谢作者和译者。

正文

今天我们从第九个知识点开始,前八个知识点在文末有链接哦。

9. console.assert

图片来源于MDN-console/assert

当我们传入的第一个参数为时,console.assert打印跟在这个参数后面的值。当你需要在特殊情况下打印一些信息的时候这很有用 - 现在你可以在不使用if表达式的情况下做到这件事情。另外,你还可以白白得到一个堆栈的跟踪信息 ;-)

请注意,如果你使用的 NodeJS 版本 ≤ 10.0 ,那可能会中断后面代码的执行,但是在. 10的版本中被修复了(当然,在浏览器中使用是完全安全的)

10. console.table

令人惊讶的是,这一个小技巧在开发者中并没有多少人知道.如果你有一个数组(或者是类数组的对象,或者就是一个对象),你可以使用console.table方法将它以一个漂亮的表格的形式打印出来。它不仅仅会根据数组中包含的对象的所有属性,去计算出表中的列名,而且这些列都是可以缩放甚至...可以排序!😳

当列太多的时候,使用第二个参数,传入你想要展示的列对应的名字

如果你偶尔在后台进行尝试的话,只有node版本大于10以上,console.table才能起作用

11. console.dir

最受欢迎console.log方法将数据以格式化的形式打印出来,在大多数的情况下这确实很有用。但是有时候那可能不是你想看到的 - 最典型的例子就是你想要打印一个DOM节点.console.log会将这个交互式的元素渲染成像是从Elements中剪切出来的一样。如果说你想要查看这个节点所关联到的真实的js对象呢?并且想要查看他的属性等等?

在那样的情况下,如果你需要更加直接的表现形式来展示你的数据,就可以使用console.dir

这就是今天的内容啦。

其他系列

关于奇舞周刊

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。


 
奇舞周刊 更多文章 站住,你这个Promise! 形神兼备——谈谈CSS Shapes 深入Babel,这一篇就够了 浏览器重绘(repaint)重排(reflow)与优化[浏览器机制] 2018 年最后一期,再不看就来不及了!
猜您喜欢 阿里云的技术创新,不是简单的路线之争 网络和粉丝会让一个人膨胀吗?膨胀的结果就是不负责任 一个 IT 青年北漂四年的感悟 面向开发者服务的用户体验 【第60期】经验分享!移动端设计开发流程(附神器推荐)