我们刚刚看到了 console.table 这个技巧,也了解了在他上面的 {} ,那么我们为什么不将他们结合起来打造一个终极 log 呢?

# 1. table 和 {} 的配合

console.table({name, url, chapter})
1

# 2. console.dir

有时候你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看 这个节点所关联到的真实的js对象 呢?并且想要查看他的 属性 等等?

在那样的情况下,就可以使用 console.dir :

# 3. 给你的 console.log 加上 CSS 样式

如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了 CSS 规则,试试看:

console.log('%c FE-Wingman! ', 'background: #222; color: #FFFFFF;font-size:3rem');
1

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

在公众号对话框,发送

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

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

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