[小Tip]用好浏览器的控制台

作为一名前端开发工程师，对浏览器控制台肯定都不陌生。加上最近大家纷纷在控制台玩出花来（1、2），同学们对Console的热情又上升了不少。这里记录一下我知道 的几个小技巧，欢迎大家补充。

本文所有内容我都在Chrome28自带Console和Firefox的Firebug1.12试过。Firefox也自带了一个Console，不过有点弱，用F irefox的同学还是建议装个Firebug。

格式化log

console.log除了能接受多个参数，还支持指定输出内容的格式，还可以这样混着用：

console.log("I am %s and I have:", myName, thing1, thing2, thing3);

下面是console.log支持的几种格式：

格式说明

%s

字符串

%d, %i

整数（不支持指定位数）

%f

浮点数（不支持指定位数）

%o

对象

%c

CSS样式

其中比较有趣的是%c，可以这么玩（我很佩服想到在Console做招聘广告甚至还附带网站logo的同学）：

console.log('%c  ', 'font-size:124px;background-
image:url(https://st.imququ.com/static/uploads/2011/07/ququ_1_1_1.jpg)');

指定log的级别

与很多其它编程语言类似，控制台的log也支持各种级别，console.debug()，console.info()，console.warn()，conso le.error()，不同级别的log会标上不同的icon。

合理使用不同的log级别，一方面可以方便地筛选自己关注的log，另一方面有些级别的log还会在控制台打印调用堆栈和源码位置。

使用断言

有时候，我们需要在特定情况下打印log，这时候console.assert方法就很有用：

console.assert(expression[, object, ...])

如果expression返回的不是true，控制台会打印异常信息及源码位置。

log分组

有时候需要打印在控制台的log太多，我们可以对其分组，这样可以按组来折叠log信息。具体效果是怎样的，大家试下就知道了：

console.group("分组1");console.log(1);console.group("分组1.1");console.log(1.1);co
nsole.groupEnd();console.groupEnd();console.group('分组2');console.log(2);consol
e.groupEnd();

输出表格

console.table方法可以在控制台打印表格，这在输出复杂信息时很有用。这个方法在Chrome和Firebug下有点点不一样，大家可以自己试试：

console.table({'first' : {'name' : 'ququ', 'age' : 27}, 'second' : {'name' :
'kitty', 'age' : 100}});

console.table的高级用法，可以参考此文。

计时器

很多时候，我们用两个new Date相减获取时间差，其实也可以这样用：

> console.time('time1')

    > console.timeEnd('time1');
    time1: 27085.415ms

改变当前所在window

在Chrome开发工具的Console标签下，有个写着 <top frame> 的下拉框，通过它我们就可以选择所处的window环境。

Firebug中要稍微麻烦一点，需要用到cd方法，它唯一的参数就是要改变到的window，类似这样：

> cd(window.frames[0])

    当前 window: Window about:blank
    > cd(top)
    当前 window: Window www.imququ.com

快速引用

控制台内置了一些变量，可以让我们快速引用某些内容。这里介绍两个我最常用到的：

$_，引用控制台最近一次运算结果，如：

> 1+1

    2
    > $_+1
    3

$0，引用当前选中的元素。在控制台，我们可以方便的选中或"吸中"某个元素，然后通过$0就可以使用它，大家动手试下就明白了。更爽的是，Chrome开发工具"E lements"等标签下，可以通过esc键呼出Console，谁用谁知道。

随便提一句，clear()和console.clear()都可以清空Console已有的信息。

专题「开发工具」的其他文章 »

• 开始使用 Vagrant (Aug 23, 2015)
• 搭建 ngrok 服务实现内网穿透 (Apr 19, 2015)
• Chrome 32 开发者工具的几个变化 (Jan 19, 2014)
• Genymotion：超赞的安卓虚拟机 (Nov 28, 2013)
• 打造 Mac 下的完美开发环境 (Oct 09, 2013)
• 如何在 Mac 下使用 Fiddler (Sep 13, 2013)
• 看懂 Fiddler 的瀑布图 (Sep 04, 2013)
• firebug1.12 更新 (Aug 29, 2013)
• firebug1.10更新 (Jul 16, 2012)
• [小Tip]ABP扩展对前端开发的影响 (Mar 29, 2012)