挖掘Chrome Console的小秘密

2018-09-15  本文已影响93人  SP_lyu

控制台应该是大多数前端开发人员日常开发调试离不开的神器。然而控制台仍有很多不为人知的属性及方法,能让你更爽地使用,当然也包括了一些隐藏的深坑(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*/');
Mario
*当然这里面还有到了其他的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
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});

上述代码输出结果见下图:


console.log with format

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);
})();

上述代码输出结果见下图:


console.error

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.tableconsole.groupconsole.assert等。可以在Chrome的Console API文档中找到他们的使用方法.

Command Line API

尝试一下,在一个未引入jQueryzepto的页面的控制台中,直接输入$$$会出现什么?

// 直接打开控制台输入
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.querySelectorAllCommand Line API只是提供了较快捷的方式便于开发者进行调试。

$0-$4

$0$1$2$3$4命令用作在 Elements 面板中检查的最后五个DOM元素或在 Profiles面板中选择的最后五个JavaScript堆对象的历史参考。$0返回最近一次选择的元素或JavaScript对象,$1返回仅在最近一次之前选择的元素或对象,依此类推。
以下结果是在测试页面上依次点击html标签、head标签、meta标签的结果:

$0 - $4

others

此外,还有很多好用的Command Line API,如copydebugmonitorprofile等。可以在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);

不难看出,控制台中输出的结果应该如下图:


console with complex object

此时,我们展开一下第二行与第五行,会发现一个很奇怪的现象:


object expand

展开第二行发现,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

上一篇下一篇

猜你喜欢

热点阅读