Chrome使用系列:你所不知道的Console

一入前端深似海,如今各种框架,工具层出不穷,日常工作中大家用的最多的就是Chrome的开发者工具,本文带大家走进Chrome的控制台,探索一番。

简介

console是浏览器提供的一个api,我们最常用的就是console.log(),除此外还有很多其他方法,都有各自的用途。

console.dir(console)

console.log

输出调试信息除了console.log(),还有debug、info、warn、error方法,他们的区别在于输出的颜色和图标不同,通过这几种方法可以将输出信息进行分类整理,让它们更有语义化。

console.log('用于输出普通信息');
console.debug('用于输出调试信息');
console.info('用于输出提示信息');
console.warn('用于输出警示信息');
console.error('用于输出错误信息');

console.group

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

console.group("$GH.module");
console.log("来自module模块的信息 blah blah blah...");
console.groupEnd();
console.group("$GH.alert");
console.log("来自alert模块的信息 blah blah blah...");
console.groupEnd();

换个姿势输出信息

看着这些干巴巴的输出信息,是不是感觉很单调,那么我们可以换个姿势输出。

console.log('%c就医不难,健康有道','font-size:25px;color:#377bee;');

通过格式化指令%c可以给输出的信息加上样式。
还可以输出图片

console.log("%c", "padding:100px 300px;line-height: 300px;background:url('http://ww4.sinaimg.cn/large/6167eb83gw1f98xlwg8rdj206o061wek.jpg') no-repeat;");

console.table

当一个接口返回了大量的数据和对象,通过console.log()输出的数据可读性不太友好

这时候可以使用console.table,以表格的形式输出数据,世界一下子清晰起来了,一目了然~

console.count

当你想统计代码被执行了几次,可以使用console.count

function count() {
    console.count('count函数被执行了')
}
count();
count();
count();

console.time

用来显示代码的执行时间,当做一些性能测试时,比如需要考量一段代码执行的耗时情况时,可以用console.time与 console.timeEnd来做此事。

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

console.dir

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

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

类jQuery的选择器

$('div')
$$('div')

$(selector)返回的是满足选择条件的首个DOM元素,其实是原生JavaScript document.querySelector() 的封装。
$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装。

应用

通过console.log在控制台输出不一样的招聘信息。

HIRE特殊字符生成地址:http://www.network-science.de/ascii/

结语

Chrome的console语法确实很强大很方便,多点使用不同的方法可以提高咱们前端的开发效率。
本文只列出部分方法,详细可以查看Console Api文档