What you don’t know about console

本文参考:

https://segmentfault.com/a/1190000006721606
http://www.html5cn.org/article-9690-1.html

通常用法

大家都会有用log,但很少有人能够很好地利用console.error或console.warn等将输出到控制台的信息进行分类整理。他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更加语义化。

  • 打印字符串:console.log("普通信息");
  • 打印提示消息:console.info("提示性信息");
  • 打印警告消息:console.warn("警示信息");
  • 打印错误消息:console.error("错误信息");
  • 打印调试信息:console.debug("debug");

高级用法

查看所有方法

console除了上面的几个最常见的方法之外还有什么方法呢?log除了能打印字符串外,还能打印对象,我们可以利用console.log打印自己。

在Console输入:

console.log(console);

输出:

Console.log(console)

于是我们可以看到有这么多的console方法,但这不等于每个浏览器都能实现。所以说,这个特性是非标准的,请尽量不要在生产环境中使用它。

但是我们可以在开发环境中,合理的利用这些方法来帮助我们开发。

清理控制台

当我们在控制台调试时,有时候会需要清理控制台中的内容。浏览器和命令行clear一样,提供了一个清理函数console.claer()

console.clear()

当然我们也可以用chromecommand line api来清理控制台。

clear()

又或者可以使用按键:Mac上的cmd+k,Win上的ctrl+l(我使用的是chrome浏览器)。

分组

当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现,这也是将分类管理的思想发挥到极致。这适合在开发一个规模很大模块很多很复杂的Web APP时,将各自的log信息分组到以各自命名空间为名称的组里面。

在Console输入:

console.group("group1");
console.log("aaa");
console.log("bbb");
console.groupEnd();

console .group("group2");
console.log("ccc");
console.log("ddd");
console.groupEnd();

输出:

console.group()

如果希望输出信息为折叠的,可以使用console.groupCollapsed,用法同console.group

查看对象信息

有时候我们需要打印出对象信心,可以使用console.log来进行简单的输出。

在Console输入:

var Obj = {
    proprety1: value1,
    property2: value2,
    property3: value3
};
console.log(Obj);

于是你会发现这个输出信息并不利于我们观察,于是我们可以使用console.table来帮助我们清楚的显示关联数组信息

var data = [
    {
        "proprety1": "value1",
        "property2": "value2"
    },
    {
        "proprety1": "value3",
        "property2": "value4"
    }
];
console.table(data);

输出:

console.table()

以及有的时候后端传回来一大串数据,直接console.log或是通过抓包工具查看或许都会让人晕头转向,这个时候也是console.table发挥作用的时候,以表格的形式呈现数据,一目了然。

但是如果想要看到详细的对象信息,我们可以使用console.dir,将一个JavaScript对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

console.dir(clear);

console.dir将DOM节点以JavaScript对象的形式输出到控制台,而console.log是直接将该DOM节点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。

console.dir(document.body);
console.log(document.body);

如果你想要查看某个节点中的HTML代码,可以用console.dirxml来查看页面中对应元素的html/xml内容。

HTML代码:

<div id="flag">

message

</div>

JavaScript代码:

var flag = document.getElementById("flag");
console.dirxml(flag);

性能测试

有时候当我们完成了一段代码我们想要知道这段代码的性能如何。这是我们可以使用console.timeconsole.timeEnd,他们可以记录代码运行所花费的时间。

console.time("test");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.timeEnd("test");

所以这个性能测试的本质就是个计时器,无独有偶,还有一对叫做console.profileconsole.profileEnd

console.profile("test");
(function () {
    for(var i = 0; i < 10; i++) {
        var sum = (function () {
            var flog = 0;
            for(var i = 0; i < 10; i++) {
                flog+=i;
            }
        })();
    }
})();
console.profileEnd("test");

其输出结果会显示在profile中。

当想要查看CPU使用相关信息时,可以使用console.profile配合console.profileEnd来完成这个需求。
这一功能可以通过UI界面来完成,Chrome开发者工具里面有个tab便是Profile。使用方法和console.time基本一样,其实time开发者工具里也有个tab就是timeline。

此外,如果还想要知道运行时的结果栈,可以使用console.trace

在Console输入:

function add(num) {
    if (0 < num) {
        console.trace("现在num的值为", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

输出:

判断真假

平时我们在写代码时经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用console.assert来判断,它会先对传入的表达式进行断言,只有表达式为false时,才会返回一个console.error的结果到控制台。

console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));

统计次数

有时候我们需要统计一个函数被调用了几次,我们通常会增加一个变量count来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用console.count函数来帮忙我们记录次数,并输出。

function hi(name) {
console.count(name);
return "hi " + name;
}   

for(var i = 0; i < 10; i++) {
    if(i < 4) {
        hi("person");
    } else {
        hi("god");
    }
}

$

我们知道PHP中满屏都是$。而在Chrome里,$用处同样是多且方便。

2+2//回车,再
$_+1//回车得5

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。
这是什么意思呢?在页面右击检查(审查元素),然后在弹出的DOM节点树上点选,这些被点选的节点会被记录下来,而$0则会返回最近一次点选的DOM节点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则会返回undefined。

另外值得称赞的是,Chrome控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的CSS选择器来选择DOM节点。

$("body");
$("div");

而$(selector)返回的实际上是满足选择条件的首个DOM元素。
深入一步,其实$(selector)是原生JavaScript document.querySeletor()的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll()的封装。

$x(path)

将所匹配的节点放在一个数组里返回

$x("//p");
$x("//p[a]");

$x(path)匹配节点
$x("//p")匹配所有的p节点,$x("//p[a]");匹配所有子节点包含a的p节点

copy

copy(document.body)

然后你就可以Ctrl+V了。
注意:它不依附于任何全局变量比如Window,所以其实在JS代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起。

Keys & values

关于键值对,前者返回传入对象所有属性名组成的数组,后者返回所有属性值组成的数组。例如:

var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tfboy);
values(thboy);

Keys&values

monitor & unmonitor

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a以及执行时传入的参数。而unmonitor(function)便是用来停止这一监听。

function sayHello(name){
    alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello(‘tjz');
unmonitor(sayHello);

monitor&unmonitor

debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug则是接触该断点。

一个酷炫的黑魔法

console.log家族还提供了一个API:第一个参数可以带一些格式化命令,比如%c,\n;

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;');

console.log第一个参数带格式化命令

当然图片也是可以的,大家可以自行尝试,修改上述代码即可。

另外,console.log()接收不定参数,参数间用逗号分隔,最终输出会将它们以空白字符连接。

console.log接收不定参数

总结

console中有很多对我们调试代码有帮助的函数,在开发环境中使用console来调试代码,可以让我们的测试更加便利。