Web開發工具系列（1）---Firebug中的console API

時間 2019-12-26

標籤 web 開發工具系列 firebug console api 欄目 HTML 简体版

原文原文鏈接

前言

我我的一直在使用Firefox瀏覽器進行開發，而且常常使用Firebug進行一些簡單的調試，可是一直限於使用簡單的console.log()查看輸出，或者查看Ajax運行時的Http請求和Cookie等。爲了更好的掌握工具使用技巧，我但願最近騰出時間仔細探究下Firebug的使用。所以，本文將是「Web 開發工具」系列中的第一篇。javascript

本文主要探討Firebug中console的使用。firebug給全部當前加載的頁面添加了一個console全局對象，這個對象包含各類方法，能夠幫助咱們經過console API 輸出JavaScript代碼執行時的信息。相比alert()，console對象輸出不會中止代碼運行，而alert()必須點擊彈出窗口才能繼續觀察結果。例如經過for循環觀察一個較大數組的輸出，在循環體內使用alert無疑會是件很頭疼的事，由於你要連續點擊不少次，用console.log()則沒有這種顧慮：
php

console對象的方法

1) console.log(obiect[,object,object…]):這無疑是最經常使用的方法，用來輸出參數表明的值，參數能夠是任何字符串、數字和JavaScript對象，輸出時以空格間隔多個變量。與alert()函數相似，console.log()也能夠接受換行符n以及製表符t。console.log()語句所打印的調試信息能夠在瀏覽器的調試控制檯中看到。不一樣的瀏覽器中console.log()行爲可能會有所不一樣。
html

2) 與console.log()功能相似的console.debug()/console.info()/console.warn()/console.error()都會輸出參數內容，可是輸出時顯示的圖標不一樣。
代碼：java

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);//不顯示圖標

輸出：
node

console對象的上面5種方法，均可以使用C語言printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。
代碼：express

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>

測試：