你不知道的console.log
前言
对于前端开发者,使用console.log()
次数绝对很多,但是大部分人认识的 console
对象还不是很全面,其实深入了解这些后,你会发现给开发过程带来很多便利,而且还很有趣。
先来看看别人的控制台。
天猫(还加入了字符画)
百度(这个大家都不陌生,最近还稍微有点改变)
再来看下我博客的
是不是感觉你之前用的console.log()
弱爆了,别着急往下看。
重新认识 console
你好我是console
,重新认识一下吧。
正在阅读这篇文章的你,F12
打开你的控制台,切到Console
输入console
输出看看这个对象
是不是惊呆了,除了常用的 log
方法还有这么多方法。
console.log() 输出普通信息
console.info() 输出提示信息
console.error() 输出错误信息
console.warn() 输出警告信息
上面这些就不演示了。
console.dir()
显示对象的所有的属性和方法
var obj = {str: 'youhun',num: 1,func: function(){console.log('a')}
};
console.dir(obj);
console.tabel()
传入对象/数组,以表格形式输出
var obj = {foo: {name: 'foo',age: '33'},bar: {name: 'bar',age: '45'}
};var arr = [['foo', '33'],['bar', '45']
];console.table(obj);
console.table(arr);
console.time()
计时器,可以将成对的console.time()
和console.timeEnd()
之间代码的运行时间输出到控制台上
console.time('计时器');
for (var i = 0; i < 1000; i++) {for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');
console.group() 和 console.groupCollapsed()
输出嵌套,就是分组,同样支持多层嵌套
console.group('第一层');console.log('第一层里面');
console.group('第二层');console.log('第二层里面');
console.groupEnd();
console.groupEnd();
ps:console.group
默认是展开状态,console.groupCollapsed
默认是收起状态
console.trace()
用来追踪函数的调用轨迹。大型项目中,这尤为重要。
function add(a, b) {console.trace("Add function");return a + b;
}function add3(a, b) {return add2(a, b);
}function add2(a, b) {return add1(a, b);
}function add1(a, b) {return add(a, b);
}var x = add3(1, 1);
console.count()
输出执行次数
(function() {for (var i = 0; i < 5; i++) {console.count('count');}
})();
console.assert()
条件输出,接收两个参数。第一个参数为真时,不输出内容,否则显示,并抛出来一个异常。
console.assert(1 == 1, '你看不到我');
console.assert(1 == 2, '你看到我了');
console.log 的高级玩法
这个为什么单独拿出来说,正是因为这个玩法多样。会了,你可以像文章开头举例那些,做出自己喜欢的console.log
占位符
- %s 格式化成字符串输出
- %d or %i 格式化成整数输出
- %f 格式化成浮点数输出
- %o 转化成展开的DOM元素输出
- %O 转化成JavaScript对象输出
- %c 字符串增加样式输出
var arr = ["小明", "小红"];var obj = {name:'youhun'}console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);console.log("圆周率整数部分:%d,带上小数是:%f",3.1415,3.1415);console.log('%o', obj);console.log('%O', obj);
再来试试 %c
来点样式
console.log('%c我的背景是红色', 'color: #fff; background: red; font-size: 24px;'); console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");console.log('%cYouhun', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
参考链接
- https://developer.mozilla.org/en-US/docs/Web/API/console
- http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html
你不知道的console.log相关推荐
- 你不知道的 console.log 替代品
- 清空控制台Console.log()信息
/*清空控制台信息*/function clearConsole() {console.clear();let fontFamily = "微软雅黑";let fontSize = ...
- 如何超越console.log并充分利用浏览器的调试控制台
by Gilad Dayagi 通过吉拉德·达亚吉 The console object is a very useful feature of browsers that has been arou ...
- console.log 简写
console.log 简写 平常代码调试总会用到console.log,但是每次写这么长也是很麻烦,就想着存一个简介一点的变量: 然后就随手写了下面代码: var a = 10;var log = ...
- vue-cli3.0 生产包去除console.log
目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置. 但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试 ...
- idea log 不输出error_还在使用console.log()吗?Bunyan:一个简单易用的JS日志框架
Bunyan是一个简单易用的JS日志框架,可以工作在多种环境下,这里以Nodejs为例说明Bunyan的基本用法.是时候替换console.log的写法了. 安装 npm install --save ...
- 前端console log之坑。。。
版权声明:本文为 Codeagles 原创文章,可以随意转载,但必须在明确位置注明出处!!! ####背景 之前一直没接触过前端,现在工作接触了好多前端代码,身为前端小白的我,调试的时候还在用aler ...
- [log.js]一个node端带文件路径和颜色的console.log
log.js 开发node.js的时候,习惯用console.log老打印一些信息,然而node端的console.log并没有浏览器里的功能那么强. 比如显示当前console.log信息所在的代码 ...
- console.log()的兼容性
在别人那里看到的,兼容IE8-的console.log的实现,以前没想过. if(typeof console == "undefinde"){ this.console = {l ...
最新文章
- linux安装weblogic9,linux_weblogic9_安装说明.doc
- Zabbix Server安装
- nth-child(n)和nth-of-type(n)
- 通过管道传输快速将MySQL的数据导入Redis
- 欧洲英语语言c1证书,威尼斯大学认可的英语语言证书
- 多个PDF怎么免费合并成一个PDF
- 关于react-native-datetimepicker无法使用中文的问题;
- 批量识别图片文字并存为Excel,几行Python轻松实现!
- 吉尔伯特定律(转载)
- 廖雪峰python教程杨辉三角_廖雪峰--python教程:笔记三
- 论文中文翻译——A deep tree-based model for software defect prediction
- 前端工具字典,为你开发路上披荆斩棘
- IEEE754数据格式介绍和解析方式(超权威)
- HTML5桌面提醒的文章
- Codevs3162抄书问题题解
- Altium Designer绘制stm32电路原理图
- 第一次做学年设计 学生成绩管理系统
- 头脑风暴算法BSO优化BP神经网络-matlab源码
- 为什么建模要尽量用四边面
- AfterEffect插件-常规功能开发-复制组合图层-js脚本开发-AE插件
热门文章
- CentOS 7 搭建docker仓库
- 在嵌入式学习过程中,很多人都有这样的困惑!——为什么要学习嵌入式技术?...
- 前端应该了解的颜色的寓意
- (转载)jdbc事务处理
- JavaScript之作用域链
- 【转】关于 SELECT /*!40001 SQL_NO_CACHE */ * FROM 的解惑
- doctrine 报错处理办法: Unknown database type enum requested
- Workaround for 1701 Cannot truncate a table referenced in a foreign key constraint using doctrine:
- C++中string查找和取子串和整形转化
- TCP: time wait bucket table overflow解决方法