console.log对象全部展开
挖掘Chrome Console的小秘密
控制台应该是大多数前端开发人员日常开发调试离不开的神器。然而控制台仍有很多不为人知的属性及方法,能让你更爽地使用,当然也包括了一些隐藏的深坑(console.log
对象打印bug)...
* 本文探讨的是chrome开发工具中的控制台,其他浏览器也许存在不同的表现,此文不涉猎
Try it first!
开始前,让我们来造一个马里奥!
打开开发者工具的控制台,将下述代码复制粘贴,然后猛敲回车!
!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? null : (function() {
var args = [], eightBitHack = [], coordinates = ["41n8r2", "42t3wu", "449u8a", "4h4014", "4h2c4y", "4g6ia1", "4286dm", "447r6w", "4fudcv", "61z2xp", "70rmyd", "71sfq1", "6zgplp", "42spfv", "4frvnp", "61wzpd"];
for (var row = coordinates.length; row--;) {
var decompressedRow = parseInt(coordinates[row], 36).toString(5).split('');
coordinates[row] = decompressedRow.splice(1, decompressedRow.length-1);
for (var cell = coordinates[row].length; cell--;) {
var dot = parseInt(coordinates[row][cell]);
var color = dot === 4 ? '#ecd585' : dot === 3 ? '#e1c25b' : dot === 2 ? '#805936' : dot ? '#ec2733' : '#fff';
args.unshift("border: 8px solid color;".replace('color', color));
eightBitHack.unshift("%c");
}
eightBitHack.unshift("\n");
}
eightBitHack.push("%c\n\n\n", "\nIt's me, Mario!", "\nmade by %chttps://twitter.com/aristretto");
args.push("font-weight: bold;", "font-weight: bold; color: teal;");
args.unshift(eightBitHack.join(''));
console.log.apply(console, args);
})();
可以看到,一个充满色彩的马里奥出现在了控制台,主要是使用了以下命令实现:
console.log('%c','/*css*/');
![](https://upload-images.jianshu.io/upload_images/13925672-3287ed6e8242b197.png?imageMogr2/auto-orient/strip|imageView2/2/w/866/format/webp)
*当然这里面还有到了其他的trick处理方式,详情请看作者链接
控制台进阶玩法
从上述的例子可以看出,控制台还有很多我们不知道的进阶玩法,如输出更好的格式,利用一些trick,使得我们的调试更具效率。
Console API
在控制台中输入console.
可以看出,console中有很多方法可以调用,网上已有很多资源说明,此次仅提及几个比较有用的API
console.log(object[,object,...])
console.log
除了常见的将需要输出的结果直接传入第一个参数中,还有以下用法:
- 使用逗号分隔,传入多个参数输出
输出时会将每个逗号自动替换成空格
console.log('Hello','world!\t','Current Time:',Date.now());
// Hello world! Current Time: 1530694211342
- 使用说明符输出,类似于C++中的
print
函数
除了一般的%s
(字符串)、%i``%d
(均为整型)、%f
外,还支持%c
(样式)、%o
(DOM元素)、%O
(JavaScript对象)输出
console.log('Hello world!\t%s: %i','Current Time',Date.now());
console.log("normal text,%c large blue text,%c white text with black background ", "color: blue; font-size: x-large","color:white;background:black;");
console.log('%o\n%O',document,{a:1,b:2,c:3});
上述代码输出结果见下图:
![](https://upload-images.jianshu.io/upload_images/13925672-e546764a0850c82a.png?imageMogr2/auto-orient/strip|imageView2/2/w/544/format/webp)
console.count
写入在同一行使用相同标签调用count()
的次数,可用于某些setInterval
或者事件重复触发的调试。
const fn = function(name){
console.count(name);
};
fn('Bob'); // Bob: 1
fn('John'); // John: 1
fn('Bob'); // Bob: 2
fn('Bob'); // Bob: 3
console.error trace
输出一条消息,并包含了调用该方法的地方的堆栈信息。区别是error
会将消息设置成错误的样式。
(()=>{
const fn1 = (fn)=>{
fn();
};
const fn2 = ()=>{
console.trace('Target Not Found');
console.error('Target Not Found');
};
fn1(fn2);
})();
上述代码输出结果见下图:
![](https://upload-images.jianshu.io/upload_images/13925672-322350681237188c.png?imageMogr2/auto-orient/strip|imageView2/2/w/314/format/webp)
console.time timeEnd
启动一个具有关联标签的新计时器。使用相同标签调用console.timeEnd()
时,定时器将停止,经过的时间将显示在控制台中。计时器值精确到亚毫秒。传递到time()
和timeEnd()
的字符串必须匹配,否则计时器不会结束。
可用于分析某段代码的时间消耗。
console.time('test');
for(let i = 0; i < 100000000; i++){}
console.timeEnd('test');
// 输出:
// test: 122.71923828125ms
others
此外,还有很多好用的Console API,如console.table
、console.group
、console.assert
等。可以在Chrome的Console API文档中找到他们的使用方法.
Command Line API
尝试一下,在一个未引入jQuery
和zepto
的页面的控制台中,直接输入$
、$$
会出现什么?
// 直接打开控制台输入
console.log($,$$);
// 输出:
// ƒ $(selector, [startNode]) { [Command Line API] } ƒ $$(selector, [startNode]) { [Command Line API] }
可以看到,输出的函数中,包含了[Command Line API]
。Command Line API
是由控制台提供的一系列便捷函数集合,大概的功能有:选择和检查 DOM 元素,以可读格式显示数据,停止和启动分析器,以及监控 DOM 事件。
* 注1:此类API仅通过控制台本身获取,在JS代码中带上此类代码会报错。
* 注2:若全局已覆盖了相同名称的方法,则此类方法将被覆盖。
$、$$
$(selector)
等同于document.querySelector
,同样的,$(selector)
等同于document.querySelectorAll
。Command Line API
只是提供了较快捷的方式便于开发者进行调试。
$0-$4
$0
、$1
、$2
、$3
和$4
命令用作在 Elements 面板中检查的最后五个DOM元素或在 Profiles面板中选择的最后五个JavaScript堆对象的历史参考。$0
返回最近一次选择的元素或JavaScript对象,$1
返回仅在最近一次之前选择的元素或对象,依此类推。
以下结果是在测试页面上依次点击html标签、head标签、meta标签的结果:
![](https://upload-images.jianshu.io/upload_images/13925672-1862a6892ccfed1d.png?imageMogr2/auto-orient/strip|imageView2/2/w/618/format/webp)
others
此外,还有很多好用的Command Line API,如copy
、debug
、monitor
、profile
等。可以在Chrome的Command Line API文档中找到他们的使用方法.
控制台的坑
试想一下以下代码在控制台中输出的结果:
const fn = function(length){
const o = {
arr: [],
key1: 'test',
key2: 'test',
key3: 'test',
key4: 'test',
key5: 'test',
index: 0
};
console.log(JSON.stringify(o));
console.log(o);
console.log('Handling data');
for(let i = 0; i < length; i++){
o.arr.push(i);
}
o.index = length;
console.log(JSON.stringify(o));
console.log(o);
};
fn(5);
不难看出,控制台中输出的结果应该如下图:
![](https://upload-images.jianshu.io/upload_images/13925672-4255d7410deaeeb7.png?imageMogr2/auto-orient/strip|imageView2/2/w/668/format/webp)
此时,我们展开一下第二行与第五行,会发现一个很奇怪的现象:
![](https://upload-images.jianshu.io/upload_images/13925672-e83614e072114157.png?imageMogr2/auto-orient/strip|imageView2/2/w/742/format/webp)
展开第二行发现,arr里的长度是5,对象的index值居然是5!
延时计算
定位上述的问题,只需要将鼠标移至行尾的蓝色info标记上,控制台会提示以下内容:Value below was evaluated just now.
这句话意味着,展开当前的object的时候,控制台才会去计算出这个对象的key-value,再反馈到控制台中显示。
原来使用Console打印的时候,若发现当前需要打印的内容是一个对象,会将其保存下来,在控制台中先输出一个简要的快照(Snapshot),待开发者需要查看其中详细内容时,再点击展开,返回内存中的值。
这个是控制台的一个已知的坑点,有可能设计该功能是为了避免控制台对大对象深复制输出,导致调试过慢,也有可能是为了方便查看原型链上的属性,但这无疑是开发者调试代码时需要避开的问题。
要避免这种调试问题,建议使用JSON.stringify()进行输出调试,而不是直接打印当前对象。
内存泄漏问题
上面提到,使用Console打印对象时,会将这个对象的引用保存下来。由于开发者工具在浏览器中默认开启,且默认了“开发者之后需要查看该对象”的行为,就会导致在Console中引入的对象是不会进入GC(垃圾回收)逻辑中的,这就引发了内存泄漏问题。
要避免内存泄漏问题,需要将开发环境与线上环境进行分离,线上环境中避免产生控制台打印的语句,亦可以在项目打包时,将ESLint
中的no-console
的开关打开。
参考及拓展
https://medium.com/@aristretto/8-bit-fun-with-console-log-7905d87e8b9d
https://developers.google.com/web/tools/chrome-devtools/
https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects