美文网首页
挖掘Chrome Console的小秘密

挖掘Chrome Console的小秘密

作者: SP_lyu | 来源:发表于2018-09-15 18:25 被阅读93次

    控制台应该是大多数前端开发人员日常开发调试离不开的神器。然而控制台仍有很多不为人知的属性及方法,能让你更爽地使用,当然也包括了一些隐藏的深坑(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
    
    • 使用说明符输出,类似于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});
    

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


    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

    相关文章

      网友评论

          本文标题:挖掘Chrome Console的小秘密

          本文链接:https://www.haomeiwen.com/subject/hedtnftx.html