firbug之console 小结

最新推荐文章于 2019-06-12 11:49:28 发布

原创最新推荐文章于 2019-06-12 11:49:28 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

8 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

本文详细整理了Firbug工具中console命令的使用方法，包括log、debug、error、info、warn等，以及如何利用console.group、console.time等功能提升开发效率。通过实践案例展示如何在开发过程中更高效地记录、调试和展示信息。

目的：整理Firbug工具的常用命令：console。以提高开发效率。

/*
 目的：了解常用console命令.
 ps: 
 1.就本人经验来看，经常用到的也就是：[console.log()];所以客观上没有充分发挥console的作用。
 2.现在整理一点笔记，以便在今后开发过程中 更有效率。
   [console.group,console.groupEnd;
   console.time,console.timeEnd;
   console.profile,console.profileEnd;]
 3. console.log("%c, "font-size:25px; ...")
 
 */

testConsole : function(){
        
        // http://getfirebug.com/logging
        
        /*
        console.log:记录一行信息，无任何图标提示；
        console.debug:记录一行信息，带超链接，可以链接到语句调用的地方；
        console.error():向控制台中写入错误信息，带错误图标显示和高亮代码链接；
        console.info():向控制台中写入提示信息，带信息图标显示和高亮代码链接；
        console.warn():向控制台中写入警告信息，带警告图标显示和高亮代码链接；
        */
        
        console.log("%c ----testConsole----", [ 'font-size:25px', 'line-height:28px', 'color: skyblue' ].join(';'));
        console.log("%c we can use css to set style of the [console.log]!", 
        "font-size:25px; color: green; background:yellow;");
        
        console.group("Group 1 [console.log]");
        console.log("This is console.log");
        console.warn("This is console.warn");
        console.error("This is console.error");
        // console.debug("This is console.debug");
        console.groupEnd();
        
        // Logging object hyperlinks
        // Elements, functions, arrays, plain ol' objects, you name it.
        console.group("Group 2 [Logging object hyperlinks].");
        var car ={
        name:"BMW", 
        COLOR:"YELLOW",
        aaa:"aaa",
        bbb:"bbbb",
        ccc:"ccc",
        ddd:"ddd",
        };
        
        var ary01 = [1,2,3,4,5,6,7,8];
        
        console.log(" Object >>", car);
        console.log("function >>", this.testMain);
        console.log("Array >>", ary01);
        console.groupEnd();
        
        // 1. String formatting
        console.group("Group 3 [Logging object hyperlinks].");
        console.log(" %s is %d years old.", "Bob", 42);
        console.groupEnd();
        
        // Stack traces, 这个函数可以打印出程序执行时从起点到终点的路径信息。
        console.group("Group 4 [Stack traces].");
        console.trace();
        console.groupEnd();
        
        // Object inspection
        console.group("Group 5 [Object inspection].");
        // console.dir(object) will log an interactive listing of an object's properties
        console.dir(car);
        // console.dirxml(element) on any HTML or XML element.
        console.dirxml(document.getElementById("lstDiv"));
        console.groupEnd();
        
        
        // Be assertive
        console.group("Group 6 [Be assertive].");
        console.assert(1);
        console.assert(0);
        console.assert((3 == 4));
        console.groupEnd();


    },

运行效果图：