摘要:Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大了吧,说它是神器一点也不过分,很方便。

前言

Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大了吧,说它是神器一点也不过分,很方便。但其实很多开发者并没有用出控制台的精髓,只是使用简单的console.log();其实控制台功能远远不止这么简单哦。

console.clear

console.clear();清空控制台,这个应该和console.log知名度一样高吧。

console.log家族

先简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4EqowyMFW1jfAB8kICtBfRI2MkWhN4xfAmzdibjRQqO8V0zlyuhKGZcylp0Q/0?wx_fmt=png[/wximg]

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

如果再配合console.group 与console.groupEnd,可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时,将各自的log信息分组到以各自命名空间为名称的组里面。

console.group("app.bundle");

console.warn("来自bundle模块的警告信息1");console.warn("来自bundle模块的警告信息2");

console.groupEnd();

 

console.group("app.bundle");

console.log("来自bundle模块的信息1");console.log("来自bundle模块的信息2");

console.groupEnd();

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4Eqow2HjCj4dRiaxcC4leaQbc3vVBGJFEkCTQeyaquNfemMdQLiaj6dMDjicaA/0?wx_fmt=png[/wximg]

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

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

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4Eqowyib9SFOiban4wd8gEkXtyvibOQsXl4p7PIhwzEodSsEazEibl2WZKZ87AQ/0?wx_fmt=png[/wximg]

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

console.assert

 

var isDebug=false;

console.assert(isDebug,'开发中的log信息。。。');

 

当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4Eqowswo6eias5NEtuboYvoxmdQYpXTl4CwlfN6icwywibOehBvpAtJkTgT2Kg/0?wx_fmt=png[/wximg]

console.dir

将DOM结点以JavaScript对象的形式输出到控制台,而console.log是直接将该DOM结点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。

console.dir(document.body);

console.log(document.body);

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4EqowEmQhJrwolono9kLicHk3Gfc1E1gohQJkMa2JkJjm7anZ1apDh0FOXiaw/0?wx_fmt=png[/wximg]

当想要查看CPU使用相关的信息时,可以使用console.profile配合 console.profileEnd来完成这个需求。

这一功能可以通过UI界面来完成,Chrome 开发者工具里面有个tab便是Profile。使用方法和console.time基本一样,其实time开发者工具里也有个tab就是timeline。关于console.prefile博主就不做多余的介绍了。想要做更多了解的读者可以看这里。

$

讲真,米国程序员们真的很喜欢money啊(谁又不是呢),看看PHP就知道了,满屏的$。而在Chrome的控制台里,$用处同样是蛮多且方便的。

2+2//回车,再

$_+1//回车得5

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。

什么意思呢?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4EqowPZSJrveicbdSIy6d5NqgnwoA6H4IRFDetRteNj6P7agQauqTicEE3klg/0?wx_fmt=png[/wximg]

$(selector)返回的是满足选择条件的首个DOM元素。

剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。

同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装。

$x(path)

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

$x("//p");

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

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4Eqowrc2teY4xcMmpjtb5Bbibv1aD4HtgT8Wt237oCKbHafk7rjQh1Mzcg7w/0?wx_fmt=png[/wximg]

monitor & unmonitor

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

function sayHello(name){

    alert('hello,'+name);

}

monitor(sayHello);

sayHello('damonare');

sayHello('tjz');

unmonitor(sayHello);

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib2icgeNn59juPIMwAKw4Eqow24UhOyJs5mYg80aq6r16rpLoJ6MnicBbyKrdhbhFvkViclIZSJzpnCaQ/0?wx_fmt=png[/wximg]

参考

  • Console API文档;
  • Commond API;
  • Chrome 控制台不完全指南 – 刘哇勇