chrome控制台小技巧

对于大多数开发人员来说，chrome控制台最常用的命令就是 console.log()了，然后还有一些其他类似的命令，如：

console.info()   提示信息

console.error()   错误信息

console.warn()   警示信息

 

然而，这些命令可能很多人都知道，然而，console.log()支持的多个参数中，可以设置出入样式，如：

console.log("%chello world","font-size:18px;color:red;");

　　然后，控制台就会在下面显示一个红色的字体大小为18px的 hello world

当然，我们还可以设置更多的样式，比如设置渐变的文字，如：

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

　 如果第一个参数使用 %c 开始，那么后面跟着的一个参数如果是样式的话，就会对第一个参数的结果进行渲染。

 

我们还可以使用 console.group("groupTitle")和console.groupEnd()包裹一系列的console.log()、console.warn()等进行分组，如：

console.group("分组1")
console.log("组1-1");
console.log("组1-2");
console.groupEnd();

　　

在写代码的时候，我们经常需要测试js的性能，js中我们经常使用创建 Data 对象来进行测试，如：

var start=new Date().getTime(); 
var array= new Array(1000000); 
for (var i = array.length - 1; i >= 0; i--) { 
    array[i] = new Object(); 
}; 
console.log(new Date().getTime()-start);

 

　　然而，在控制台中，我们可以使用 console.time 来实现，具体代码如下：

console.time("Array initialize"); 
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) { 
    array[i] = new Object(); 
}
console.timeEnd("Array initialize");

       要执行的测试代码前，我们使用 console.time("name") 函数开始一个测试，然后再传入一个名字。在需要测试的代码运行完毕之后，再运行 console.timeEnd("name") 传入同样的名字来结束测试。然后在下方会显示该代码执行的时间。

 

$ 符号大家应该都不陌生，在控制台中， $ 符号也能找到他的身影。

简单的一个 $_ 会返回最近一次表达式的执行结果。

$0 - $4会返回最近5个你选择过的 Dom 节点， $0 返回最近一次选择的节点。

然而控制台中的 $(selector)是js原生的 document.querySelect() 封装的，因此可以在控制台中直接使用 $ 选择符。

而 document.querySelectAll() 则被封装成 $$() 。

 

更多控制台和chrome操作：

chrome使用技巧：http://www.codeceo.com/article/chrome-usage-most-useful.html

chrome控制台使用详解：http://www.codeceo.com/article/chrome-console.html