基础操作

打开控制台

1. 使用Ctrl+Shift+J 快捷命令打开控制台
   
2. 清空控制台历史消息
3. shell 提示符中输入 clear() 命令行 API。
4. 在 Javascript 中执行 console.clear() 调用控制台 API。
5. 使用键盘快捷键Ctrl + L。
6. 测试控制台
7. 控制台内使用Shift+Ent进行换行编辑
   
8. 选择帧
   控制台可以在页面的不同帧中运行。主页是文档的最外层帧。以 iframe 元素为例，它将会创造出它自己的上下文框架。你也可以通过使用在过滤按钮旁边的下拉框来指定这个帧。
   

使用控制台 API

向控制台输出

console.log() 方法会使用一个或者多个表达式来作为参数，之后会将他们当前的值输出到控制台中

错误和警告

错误和警告就跟一般的日志信息的显示一样。不同的地方在于 error() 和 warn() 通过它们自己样式来吸引注意力。
console.error() 方法展示的是一个红色的图标并且伴有红色的信息文字。
console.warn() 方法展示的是黄色的图标和黄色的信息文字。

1. 使用控制台 error 方法。
   
2. 使用控制台 warn方法。
   

断言

console.assert() 方法仅仅只当它的第一个参数为 false 时,才显示一个错误信息字符串（它的第二个参数）
在下面的代码中，如果在列表中的子节点的数量超过 5，将会在控制台中引起错误信息。

过滤控制台的输出

标识	说明
ALL	显示所有控制台输出
Errors	只显示 console.error() 输出的信息
Warnings	只显示 console.warn() 输出的信息
Info	只显示 console.info() 输出的信息
Logs	只显示 console.log() 输出的信息
Debug	只显示 console.timeEnd() 和 console.debug() 输出的信息

输出分组

你可以通过分组命令把相关联的输出信息分在一起。group 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组，你只需要调用 groupEnd 即可。

浏览结构化数据

table() 方法提供一个简单的方法来查看相似数据对象。这将给一个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。
table() 中的第二个参数是可选项。你可以定义任何你想显示的属性字符串数组。

字符串的替换和格式化

标识	说明
%i 或者 %d	格式化成 integer
%f	格式化成一个浮点类型
%o	格式化成一个可扩展的 DOM 元素。就跟在元素面板中看到的一样
%s	格式化成 string
%c	通过第二个参数来申请一个 CSS 风格的输出字符串

将 DOM 元素格式化成 JavaScript 对象

计算时间开销

在 JavaScript 中设置断点

调试器 声明将会开启一个调试会话。这就相当于在这一行中的脚本上设置一个断点。
使用 brightness() 开启调试会话。

记录语句的执行

count() 方法将会记录提供的字符串以及该字符串在一段时间内的出现次数。这个字符串可能含有动态的内容。当已经传给 count() 一个完全相同的字符串时，计数就会增加。

选择元素

有一些选择元素的快捷键。相比普通的使用方式，这些快捷键为你节省了大量时间。

$()	返回第一个匹配 CSS 选择器的元素。这也是 document.quertSelector() 的快捷方式
$$()	返回包含所有匹配 CSS 选择器的一个数组。这是 document.querySelectorAll() 的一个别名。
$x()	返回一个匹配特定 XPath 的数组

设置

关键字	说明
Hide network	让控制台不输出有关网路问题的日志信息。比如： 404 和 500 系列的问题将不会被记录。
Log XMLHTTPRequests	决定控制台是否要记录每一个 XMLHttpRequest。
Preserve log	决定在导航到其他页面的时候控制台历史记录是否要删除，就是能否执行clear（）函数
Autocomplete from history	自动识别用户在控制台内的操作，并做提示补全。
Selected context only	只显示当前作用域的日志，参照前文框架环境。