上QQ阅读APP看书，第一时间看更新
2.2 Chrome开发者工具
在本章开始的时候，我们已经用过了Chrome浏览器，之所以使用它，是因为其拥有一套完善的开发者工具，用以进行Web开发和调试。其功能十分强大，可用来对网站进行迭代、调试和分析，尤其是其提供的控制台能够有效提高前端调试的效率和定位bug的速度。
Chrome开发者工具的打开方式有以下三种。
- 在Chrome菜单中选择“更多工具”→“开发者工具”命令。
- 在页面元素上右击，在弹出的菜单中选择“检查”命令。
- 按快捷键Ctrl+Shift+I（Windows）或Cmd+Opt+I（Mac）。
Chrome控制台面板支持直接运行JavaScript代码，并且提供了console对象用来对JavaScript进行调试，便于在开发期间，方便在控制台面板中记录调试信息。
这里主要对本书中常用的控制台面板及console的信息类方法进行介绍，Chrome开发者工具还拥有许多强大的功能，例如设备模式、元素面板、源代码面板、性能面板、内存面板、应用面板、安全面板等，在此不再赘述。
2.2.1 信息类方法
信息类方法是最常用的调试方法，也是贯穿本书示例代码的方法，具体如下。
- console.log('一条log普通信息'); // >一条log普通信息
- console.info('一条info提示信息'); // >一条info提示信息
- console.warn('一条warn警告信息'); // >一条warn提示信息
- console.error('一条error错误信息'); // >一条error提示信息
- console.debug('一条debug调试信息'); // >一条debug提示信息
需要注意的内容如下。
- 如果入参（“入参”指的是传递给函数的值，关于函数的参数，会在本书4.3节中讲解）不是对象，则直接输出。
- 如果入参是一个对象且不是DOM节点，则输出一条以三角符号开头的语句，单击三角符号可展开该对象。
- 如果入参是一个对象且是DOM节点，则输出一条以三角符号开头的语句，单击三角符号可展开该节点所包含的HTML/XML代码（包含节点自身）。
上述几种方法都支持占位符，常见的占位符如表2-1所示。
表2-1 占位符
示例如下。
2.2.2 清除历史记录
有时，控制台面板中会产生大量的log或warn信息，不便于进行调试，这时可以通过以下方式清除控制台历史记录。
- 在控制台面板中右击，在弹出的快捷菜单中选择Clear console命令。
- 在控制台面板中输入clear()。
- 在JavaScript代码内调用console.clear()。
- 按快捷键Ctrl+L。
- 按快捷键Command+K（MAC）。
- 单击Clear按钮。
其中，单击Clear按钮也可用来在其他面板中清除相应的数据，例如NetWork面板。
2.2.3 保留历史记录
NetWork面板中的输出信息会在页面刷新后清空，如果想保留之前的信息，如HTTP请求、资源加载等，将NetWork面板中的Preserve log复选框选中即可，这时，页面刷新后NetWork面板中的所有信息都会被保留。
练习
- Google Chrome浏览器。
- 打开Chrome开发者工具。
- 单击Chrome开发者工具中的console按钮，切换到控制台面板，尝试输入一些JavaScript代码。
- 了解Chrome开发者工具的其他面板。