console讲解

console简介
控制台（Console）是JS开发里最重要的面板，主要作用是显示网页加载过程中产生各类信息

显示信息的命令
console对象，提供5种方法，用来显示信息
日志信息console.log()、
一般信息console.info()、
除错信息console.debug()、
警告提示console.warn()、
错误提示console.error()、

		console.log('输出打印日志'),
		console.info('一般信息'),
		console.debug('除错信息'),
		console.warn('警告信息'),
		console.error('错误信息')

下图是火狐浏览器的显示

下图是谷歌浏览器的显示

基本用法
console.log，前端常用它来调试分析代码，你可以在任何的js代码中调用console.log()，然后你就可以在浏览器控制台看到你刚才打印的常量，变量，数组，对象，表达式等的值
占位符
console对象的上面5种方法，都可以使用printf（格式化输出）风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）、CSS格式化样式（%c）五种。

//		整数（%d或%i）
		console.log("%d年%d月%d日",2019,10,10);
//		浮点数（%f）
		console.log("圆周率是%f",3.1415926535);
//		字符（%s）
		console.log("%s年%s月","2019","10");
//		对象（%o）
		console.log("%o",{name:"sbjh"})
//		CSS格式化样式（%c）
		console.log("%c哈哈哈哈","color:red");

如图：

占位符-格式化输出
这种写法在复杂的输出时，能保证模板和数据分离，结构更清晰

console.log("%d+%d=%d",1,1,2)

如图：

丰富样式输出

console.log('%c百度2019校园招聘简历提交：%chttp://dwz.cn/xpofdepe%c(你将有机会直接获得面试资格)','color:red','color:grey','color:red')

打印出如图：

分组显示
如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

		console.group("1组");
		console.log("111");
		console.log("111");
		console.log("111");
		console.groupEnd("1组");

如图：

清空控制台
console.clear()清空控制台内容
如图：


计时器
console.time(),console.timeEnd()方法计算一个操作的执行的时间
console.time()是开始，console.timeEnd()是结束
可以传一个参数，参数为计时器的名称。

console.time("计时器");
		for(var i=0 ; i<1000 ; i++){
			for(var j=0 ; j<1000 ; j++){
				
			}
		}
console.timeEnd("计时器");

计数器

console.count()方法用于计数，输出它被调用了多少次

(function(){
			for( var i = 0 ;i<5;i++){
				console.count('count');
			}
})();

表格化
console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出

	var arr=[100,200,300,400,500];
		console.table(arr);
		

var obj={
			name:'范梦泽',
			age:18,
			sex:'女'
		}
		console.table(obj)

控制台快捷键
1、方向键盘的上下键，一用就知晓。比如用上键就相当于使用上次在控制台的输入符号。
2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的。

3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点。例如$(‘body’)
4、$ 简单理解就是 document.querySelector 。
5、$$ 简单理解就是 document.querySelectorAll 。
6、$_ 是上一个表达式的值
7、dir 就是 console.dir

如有问题联系小编！