牛骨文教育服务平台(让学习变的简单)

console对象

console对象是JavaScript的原生对象,可以将信息输出在控制台。

1、打开控制台

不同系统平台打开浏览器的控制台可能有些不一样,下面以chrome浏览器为例,可以使用下列方式打开:

  • 按F12
  • 鼠标右键里选择“检查”
  • 在右上角的菜单中点击“更多工具/开发者工具”

打开控制台以后,你可以看到下列不同的面板:

Elements:查看网页的HTML源码和CSS代码。
Resources:查看网页加载的各种资源文件(比如代码文件、字体文件、css文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
Network:查看网页的HTTP通信情况。
Sources:查看网页加载的所有源码。
Timeline:查看各种网页行为随时间变化的情况。
Profiles:查看网页的性能情况,比如CPU和内存消耗。
Console:用来运行JavaScript命令。

2、console对象的方法

2.1 log()、warn()、info()、error()、debug()

console.log(),在控制台中打印信息,它会自动在每次输出的结尾,添加换行符,它可以接受任何字符串、数字和JavaScript对象,也可以接受换行符n以及制表符t。

console.log(1);  // 1
console.log("hello");  // "hello"

它可以接受多个参数,将它们的结果连接起来输出。

console.log("a", "b", 1);  // a b 1

当然console可不止这一个方法,它还有:

  • console.info 用于输出提示性信息,会带上一个蓝色图标
  • console.error用于输出错误信息,会在最前面带上红色的叉,表示出错
  • console.warn用于输出警示信息,会在最前面带上黄色三角
  • console.debug用于输出调试信息
console.info(“提醒”); 
console.error(“报错了”); 
console.warn(“警告”); 
console.debug(“调试信息”);

console对象的上面5种方法,如果第一个参数是格式字符串(使用了格式占位符),将依次用后面的参数替换占位符,然后再进行输出。
不过,占位符的种类比较少,只支持下列五种:

字符(%s)
整数(%d或%i)
浮点数(%f)
对象(%o)
CSS格式字符串(%c)

例子:

console.log("%s%s",1,2);  // 12

console.log("%c自定义样式","font-size:20px;color:green");  
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

2.2 trace()、clear()

console.trace()方法显示当前执行的代码在堆栈中的调用路径。
console.clear()清空控制台。

2.3 dir()、dirxml()

console.dir 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

console.log({name: "tg", age: 12});
// Object {name: "tg", age: 12}

console.dir({name: "tg", age: 12});
// Object
     name: "tg",
     age: 12,
     __proto__: Object

console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
</table>
<script>
	var table=document.querySelector("table");
	console.dirxml(table);
</script>

//输出:
<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
</table>

2.4 group()、groupEnd()、groupCollapsed()

console.groupconsole.groupend这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
console.group输出一组信息的开头
console.groupEnd结束一组输出信息

console.groupCollapsed方法与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。

2.5 assert()

console.assert对输入的表达式进行断言,接受两个参数,第一个参数是表达式,第二个参数是字符串。只有表达式为false时,才输出相应的信息到控制台,否则不输出。

var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2");  // "我是错误2"

2.6 count()

console.count 当你想统计代码被执行的次数,这个方法很有用

function play(){
	console.count("执行次数:");
}
play();  // 执行次数:1
play();  // 执行次数:2
play();  // 执行次数:3

2.7 time()、timeEnd()
这两个方法用于计时,可以算出一个操作所花费的准确时间。
console.time 计时开始
console.timeEnd 计时结束

console.time("array");
var a=0;
for(var i=0;i<100000;i++){
  a += i;
}
console.timeEnd("array");  // array : 6.063ms

2.8 profile()、profileEnd()

console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信息

打开浏览器的开发者工具,在profile面板中,可以看到这个性能调试器的运行结果。

2.9 timeLine()、timeLineEnd()

console.timeLineconsole.timeLineEnd配合一起记录一段时间轴

3、自定义console对象的方法

console对象的所有方法都可以被覆盖,也就是说,我们可以自定义方法。

console["log"] = console["log"].bind(console, "温馨提示");

console.log("自定义方法");  // 温馨提示 自定义方法