你不知道的console调试

说明

如果你是一名开发者，或多或少的在打开百度、淘宝天猫的时候打开控制台(chrome->单击右键->检查->console)查看它们的网页源码，你会看到下面的画面

百度首页控制台信息，里面有百度招聘信息

天猫首页控制台信息，里面有天猫警告信息以及招聘信息

看着这些信息你是否心动了，想去试一试效果呢？

1.打印消息

打印字符串

console.log()

打印提示信息

console.info()

打印警告信息

console.warn()

打印错误信息

console.error()

打印对象属性和方法

console.dir()

打印debug信息

console.debug()

2.判断和统计

判断参数是否为真,只有第一个参数为false的时候才输出

console.assert()

统计调用次数

console.count()

3.分组打印

分组打印

console.group(); 
console.info("提示信息");
console.info("提示信息");
console.groupEnd();

分组打印默认折叠显示

console.groupCollapsed();
console.info("提示信息");
console.info("提示信息");
console.groupEnd();

4.输出运行时间

console.time();
console.timeEnd();

5.将数据打印成表格

var data = [['序号','姓名','年龄'],[1,'小明',7],[1,'小花',7],[1,'小王',8]];
console.table(data);

6.追踪函数调用轨迹

console.trace()

其它

百度控制台信息输出代码

console.log("一张网页，要经历怎样的过程，才能抵达用户面前？\n一位新人，要经历怎样的成长，才能站在技术之巅？\n探寻这里的秘密；\n体验这里的挑战；\n成为这里的主人；\n加入百度，加入网页搜索，你，可以影响世界。\n"),console.log("请将简历发送至 %c [e-mail]（ 邮件标题请以“姓名-应聘XX职位-来自console”命名）","color:red");console.log("职位介绍：http://dwz.cn/hr2013");

天猫控制台信息输出代码

console.log("%c \u5b89\u5168\u8b66\u544a\uff01","font-size:50px;color:red;-webkit-text-fill-color:red;-webkit-text-stroke: 1px black;");
var log = "   :::                                :::  \n :::::::                             ::::: \n:::::::::                          ::::::::\n:::::::::::::::::::::::::::::::::::::::::::\n::::    :::    ::::::::::::::::   :::  ::::\n:::    Smart    :::::cool::::    Crazy  :::\n:::::   :::    :::::::::::::::    :::   :::\n::::::::::::::::::::::::::::::::::::";
var info = "\u55b5~ \u52a0\u5165\u6211\u4eec\u5427 http://tb.cn/";
console.info(log+"\n\n"+info);

参考链接：

console API文档

阮一峰的网络日志 Firebug控制台详解

涨知识：你真的会用console调试代码吗？