开箱即用，使用 console 的五大技巧

摘要：工欲善其事，必先利其器。你还只用一行console.log()打天下吗？本文以 Chrome 浏览器为例，介绍了使用console的五大技巧，帮助你更优雅的展示信息，更快捷的定位缺陷。

【!important】如果只能带走一个技巧的话，希望你能尝试使用console.dir()或console.table()打印对象类消息。

前言、什么是console

console API 提供了允许开发人员执行调试任务的功能。console API 通过console对象使用。console对象提供了浏览器控制台调试的接口，可以通过只读属性window.console获取到，也可以简单的通过console引用。

第零式、打开控制台面板

第一步：打开 Chrome 开发者工具：

1. 按F12打开；
2. 在页面元素上右键点击，选择 “检查”；
3. 在 Chrome 菜单中选择更多工具 > 开发者工具；
4. 使用快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)。

第二步：打开控制台面板：

1. 按 Esc 键自动弹出；
2. 点击控制台按钮；
3. 使用快捷键 Ctrl + 2 (Windows) 或 Cmd + 2 (Mac)。
4. 使用快捷键 Ctrl + ] (Windows) 或 Cmd + ] (Mac)。

第一式、打印消息

1. 根据事件级别选择打印消息的类型
   1. 通过选择log(日志)、info(信息)、warn(警告)、error(错误)等不同的方法，可以以适当的颜色打印不同事件级别的消息。
   2. 点击右键，可以选择另存为…下载消息。
   3. 点击按钮所有级别后可以筛选只展示选中的事件级别。

console.log('console.log');
console.info('console.info');
console.warn('console.warn');
console.error('console.error');