本文参考:
通常用法
大家都会有用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
方法,但这不等于每个浏览器都能实现。所以说,这个特性是非标准的,请尽量不要在生产环境
中使用它。
但是我们可以在开发环境
中,合理的利用
这些方法来帮助我们开发。
清理控制台
当我们在控制台调试时,有时候会需要清理控制台中的内容。浏览器和命令行clear
一样,提供了一个清理函数console.claer()
。
console.clear()
当然我们也可以用chrome
的command 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.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.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代码:
message
JavaScript代码:
var flag = document.getElementById("flag");
console.dirxml(flag);
性能测试
有时候当我们完成了一段代码我们想要知道这段代码的性能如何。这是我们可以使用console.time
和console.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.profile
和console.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(“//p”)匹配所有的p节点,$x(“//p[a]”);匹配所有子节点包含a的p节点
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);
monitor & unmonitor
monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a以及执行时传入的参数。而unmonitor(function)便是用来停止这一监听。
function sayHello(name){
alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello(‘tjz');
unmonitor(sayHello);
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
中有很多对我们调试代码有帮助的函数,在开发环境
中使用console
来调试代码,可以让我们的测试更加便利。