为了账号安全,请及时绑定邮箱和手机立即绑定

你不知道的console调试

2016.11.16 13:59 4538浏览
说明

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

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

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

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

1.打印消息

打印字符串

console.log()

打印提示信息

console.info()

打印警告信息

console.warn()

打印错误信息

console.error()

打印对象属性和方法

console.dir()

打印debug信息

console.debug()

打印信息

2.判断和统计

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

console.assert()

统计调用次数

console.count()

console判断和统计

3.分组打印

分组打印

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

分组打印默认折叠显示

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

分组打印

4.输出运行时间
console.time();
console.timeEnd();

console.time

5.将数据打印成表格
var data = [['序号','姓名','年龄'],[1,'小明',7],[1,'小花',7],[1,'小王',8]];
console.table(data);

console.table

6.追踪函数调用轨迹
console.trace()
其它

百度控制台信息输出代码

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

百度console

天猫控制台信息输出代码

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

参考链接:

console API文档

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

涨知识:你真的会用console调试代码吗?

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

10人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消