建议和技巧——控制台篇

编写多行命令

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

小技巧——控制台篇 - 图1

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

小技巧——控制台篇 - 图2

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

快捷键打开审查元素模式

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

小技巧——控制台篇 - 图3

更多:使用控制台

支持console.table 命令

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

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

小技巧——控制台篇 - 图4

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

  1. function Person(firstName, lastName, age) {
  2. this.firstName = firstName;
  3. this.lastName = lastName;
  4. this.age = age;
  5. }
  6. var family = {};
  7. family.mother = new Person("Susan", "Doyle", 32);
  8. family.father = new Person("John", "Doyle", 33);
  9. family.daughter = new Person("Lily", "Doyle", 5);
  10. family.son = new Person("Mike", "Doyle", 8);
  11. console.table(family, ["firstName", "lastName", "age"]);

小技巧——控制台篇 - 图5

如果你只想显示firstnamelastname,可以通过下面的方式调用:

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

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

预览对象

通过log打印的对象可以直接在控制台中预览。
小技巧——控制台篇 - 图6

给控制台设置样式

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

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

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

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

小技巧——控制台篇 - 图7

不同风格的控制台|G+

快速清空控制台历史

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

成为键盘党

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

小技巧——控制台篇 - 图8

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

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

小技巧——控制台篇 - 图9

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

小技巧——控制台篇 - 图10

使用XPath查询DOM

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

你可以通过$x(xpath)的形式执行一个查询语句,下面的示例展示了如何在页面查询图片元素:
小技巧——控制台篇 - 图11

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

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

在指定的frame中查找img元素

访问最近的控制台结果。

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

小技巧——控制台篇 - 图12

使用 console.dir

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

小技巧——控制台篇 - 图13

在特定iframe中执行JavaScript

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

小技巧——控制台篇 - 图14

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

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

小技巧——控制台篇 - 图15

使用 console.time() 和 console.timeEnd() 分析循环的性能

调用console.time()开启一个计时器,调用 console.timeEnd()关闭计时器,并在终端输出计时器消耗的时间。计时器在分析循环这样的非函数内操作的时候还是蛮有用的。

小技巧——控制台篇 - 图16

使用 console.profile() 和 console.profileEnd()分析程序性能

在DevTools窗口控制台中,调用 console.profile()开启一个JavaScript CPU 分析器.结束分析器直接调用 console.profileEnd().

小技巧——控制台篇 - 图17

具体的性能分析会在分析器面板中

小技巧——控制台篇 - 图18

分析结束后,也可以在命令行中调用console.profiles[]得到。

小技巧——控制台篇 - 图19

想了解更多关于控制台的使用技巧,请自觉前往使用控制台一章。