建议和技巧——控制台篇

建议和技巧——控制台篇

编写多行命令

控制台在多行编辑的模式下，你可以像在普通的文本编辑器中那样输入命令。使用Shift + Enter 可以输入普通的换行符，而实现多行的编辑。

当你需要写比较的复杂的JavaScript代码的时候，多行编辑就显得很给力了。当你写完一段代码的时候，直接敲回车就可以运行代码了。

关于支持保存代码的多行控制台，阅读snippet

快捷键打开审查元素模式

使用Ctrl + Shift + C 或 Cmd + Shift + C可以在DevTools中快速打开审查元素模式。(译注：可能会与系统快捷键冲突)

更多：使用控制台

支持console.table 命令

该命令支持以表格的形式输出日志信息。下面为代码示例：

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

table方法还可以接收一个columns参数用来设置表格列的标题。列参数的格式是一个字符串数组，每个数组元素一次对应着列的标题，如果对应列标题为空，则认为不显示该列。下面的代码定义了列的标题:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);

如果你只想显示firstname和lastname，可以通过下面的方式调用：

console.table(family, ["firstName", "lastName"]);

了解table方法更多的使用功能| G+.(译注：需要翻墙)

预览对象

通过log打印的对象可以直接在控制台中预览。

给控制台设置样式

在上一章我们已经提到过，你可以使用%c格式符，来为控制台增加样式：

console.log("%cBlue!", "color: blue;");

还可以为每一块输出设置样式:

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

不同风格的控制台|G+

快速清空控制台历史

在DevTools窗口中，使用Ctrl + L或者Cmd + L 快捷键可以快速的清空命令行历史记录.当然你也可以在控制台直接调用clear()方法。

成为键盘党

在DevTools窗口中，使用 ?可以打开通用设置面板，在快捷键一项中可以看到DevTools当前支持的所有快捷键。

在控制台中直接访问页面元素

在元素面板选择一个元素，然后在控制台输入$0,就会在控制台中得到刚才选中的元素。如果页面中已经包含了jQuery，你也可以使用$($0)来进行选择。

你也可以反过来，在控制台输出的DOM元素上右键选择Reveal in Elements Panel来直接在DOM树种查看。

使用XPath查询DOM

XPath是一种查询语言，用于从DOM文档中查找node，返回结果可能是一组node，字符串，布尔值或者数字。你可以直接在DevTools的JavaScript控制台中直接使用XPath查询语句。

你可以通过$x(xpath)的形式执行一个查询语句，下面的示例展示了如何在页面查询图片元素：

此外，这个方法还支持扩展的参数，你可以在第二个参数中传入查询的上下文，例如$x(xpath, context)。通过扩展参数，你可以选择特定上下文里的DOM元素。

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

在指定的frame中查找img元素

访问最近的控制台结果。

在控制台输入$_可以获控制台最近一次的输出结果。继续以XPath表达式查询为例：

使用 console.dir

console.dir(object)命令可以列出参数object的所有对象属性。下面是的例子展示了body对象的属性：

在特定iframe中执行JavaScript

在DevTools底部工具栏中有一个下拉列表用来改变当前控制台的上下文环境。当你打开控制台面板的时候，你可以直接在下拉列表中选择一个frame来作为JavaScript的执行环境。

阻止控制台记录在新页面中被清空

在打开一个新的web页面的时候，你可能希望继续保留之前控制台的操作记录，这时候只需要在控制台右键选择”Preserve Log upon Navigation”，这样在打开新的页面的时候，之前的控制台记录还会保存。（译注：在最新版本的Chrome DevTools中，右键已经去掉该选项，可以直接在控制台上方标签中勾选Perserve log）