Web开发工具系列（1）---Firebug中的console API

前言

我个人一直在使用Firefox浏览器进行开发，并且经常使用Firebug进行一些简单的调试，但是一直限于使用简单的console.log()查看输出，或者查看Ajax运行时的Http请求和Cookie等。为了更好的掌握工具使用技巧，我希望最近腾出时间仔细探究下Firebug的使用。因此，本文将是“Web 开发工具”系列中的第一篇。

本文主要探讨Firebug中console的使用。firebug给所有当前加载的页面添加了一个console全局对象，这个对象包含各种方法，可以帮助我们通过console API 输出JavaScript代码执行时的信息。相比alert()，console对象输出不会停止代码运行，而alert()必须点击弹出窗口才能继续观察结果。例如通过for循环观察一个较大数组的输出，在循环体内使用alert无疑会是件很头疼的事，因为你要连续点击很多次，用console.log()则没有这种顾虑：
图片描述

console对象的方法

1) console.log(obiect[,object,object…]):这无疑是最常用的方法，用来输出参数代表的值，参数可以是任何字符串、数字和JavaScript对象，输出时以空格间隔多个变量。与alert()函数类似，console.log()也可以接受换行符n以及制表符t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同。
图片描述

2) 与console.log()功能类似的console.debug()/console.info()/console.warn()/console.error()都会输出参数内容，但是输出时显示的图标不同。
代码：

var a = new Array(),b = new Date(), c = 1;
console.info(a, b, c);//显示info图标
console.error(a, b, c);//显示错误图标
console.warn(a, b, c);//显示警告图标
console.debug(a, b, c);//不显示图标

输出：
图片描述

console对象的上面5种方法，都可以使用C语言printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
代码：

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

输出：
图片描述

%o占位符，可以用来查看一个对象内部情况。
代码：

var dog = {}; dog.name = '大毛'; dog.color = '黄色';
 console.log('%o', dog);

结果：
图片描述

3) console.assert(expression[,object]):参数是表达式或者对象，判断内部是否为true，我认为会经过一个布尔类型转换。如果转换结果是真就不输出，为假就输出判断结果。最好只输入一个参数，多个参数时判断结果很奇怪。连续多次执行assert()方法，会一次性输出总的断言失败数，不指出是哪一个失败。
测试实例：

//除console.assert(a)外的断言都是失败的
var a = new Array(),b = new Date(), c = 0;
console.assert();//无参数
console.assert(c);//数值0
console.assert(a);//数组对象
console.assert(null);//null

输出结果：
图片描述

4）console.clear()：无参数，清空console窗口。
5） console.dir(object)：输出对象的所有特性，包括方法和属性; 直接将该DOM结点以DOM树的结构进行输出。
代码：

//输出console的所有方法和属性
console.dir(console);

图片描述

6）console.dirxml()：用来显示网页的某个节点（node）所包含的html/xml代码。
代码

    /*<table id="mytable">
        <tr>zhang</tr>
        <tr>zhang</tr>
    </table>
    */
    <script type="text/javascript">
    var a = document.getElementById("mytable");
        alert(1);
        console.dirxml(a);
    </script>

测试：
图片描述

7）console.trace()：追踪函数的调用轨迹
代码：

function add(a, b) {
  console.trace();
  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);

测试：
图片描述

8）console.group(object[, object, ...])和console.groupEnd()：分组显示。
代码：

    console.group("第一组信息");
　　　　console.log("第一组第一条");
　　　　console.log("第一组第二条");
　　console.groupEnd();
　　console.group("第二组信息");
　　　　console.log("第二组第一条");
　　　　console.log("第二组第二条");
    console.groupEnd();

测试：
图片描述

9）console.count(): 统计调用count()的那行代码被执行的次数。
代码：

<!DOCTYPE html>  
    <html>  
    <head>  
    <title>JS Performance</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script type="text/javascript">  
        function createArrayOne() {  
            for ( var i = 0; i < 100; i++) {  
                var arr = new Array();  
                console.count();
            }  
        }  
        createArrayOne();
        alert("string");
          
    </script>  
    </head>  
    <body>  
    </body>  
   </html>

测试：运行了100次
图片描述

10）console.time(name)和console.timeEnd(name)：用来显示代码的运行时间。
测试：
图片描述

11）console.profile()：计算运行性能
代码：

<!DOCTYPE html>  
    <html>  
    <head>  
    <title>JS Performance</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
   
    <script type="text/javascript">  
        function createArrayOne() {  
            for ( var i = 0; i < 1000; i++) {  
                var arr = new Array();  
            }  
        }  
        function createArrayTwo() {  
            for ( var i = 0; i < 1000; i++) {  
                var arr = [];  
            }  
        }  
        function init() {  
            console.profile('createArrayOne');  
            createArrayOne();  
            console.profileEnd('createArrayOne');  
      
            console.profile('createArrayTwo');  
            createArrayTwo();  
            console.profileEnd('createArrayTwo');  
        }  
    </script>  
    </head>  
    <body onload="init()">  
    </body>  
</html>

测试：
图片描述

Reference：

firebug介绍的具体网址：
http://getfirebug.com/wiki/in...
一篇相关的博文：
http://www.ruanyifeng.com/blo...

Web开发工具系列（1）---Firebug中的console API

前言

console对象的方法

Reference：

zhangding

引用和评论

数组去重的JavaScript实现

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合