console對象提供對瀏覽器控制臺的接入。不同瀏覽器上它的工作方式是不一樣的，本文示例和截圖均來自Chrome瀏覽器。

一、輸出文本到控制臺

console對象中較多使用的主要有四個方法：

console.log(),console.info(),console.warn(),console.error()

語法

    console.log(obj1[,obj2,...,objN]);
    console.log(msg [, subst1,...,substN]);
    console.log('String: %s,Int:%d,Float: %f, Object: %o',str,ints,floats,obj)
    console.log(`temp的值為：${temp}`);
    //console.exception()是console.error()的別名；它們功能相同。

參數

    obj1...objN
    一個用于輸出的javascript對象列表。其中每個對象會以字符串的形式按照順序依次輸出到控制臺。
    msg
    一個JavaScript字符串，其中包含零個或多個替代字符串
    subst1...stbstN
    javascript對象，用來依次替換msg中的替代字符串。你可以在替代字符串中指定對象的輸出格式。

它可以格式化打印字符的功能類似于C語言的printf方法。

格式化打?。?/h4>

字符	描述
%o	打印javascript對象，可以是整數、字符串以及JSON數據
%d or % i	打印整數
%s	打印字符串
%f	打印浮點數

當要替換的參數類型和預期的打印類型不同時，參數會被轉換成預期的打印類型

    for(let i=0;i<5;i++){
        console.log("hello,$s. You've called me %d times.",'Bob',i+1);
    }
    console.log('I want to print a number: %d','string');

輸出顯示如下：

    hello, Bob. You've called me 1 times.
    hello, Bob. You've called me 2 times.
    hello, Bob. You've called me 3 times.
    hello, Bob. You've called me 4 times.
    hello, Bob. You've called me 5 times.
    I want to print a number: NaN  

可以看到最后一行，string被轉換成了NaN

我們可以為console定義樣式，使用%c。

    console.log('%cMy strylish message','color:red;font-style:italic');

效果：

模板輸出示例結果

二、在控制臺輸出樹狀信息

可以使用console.group/console.groupCollapsed方法來組織自己的打印內容以期獲得更好的顯示方式。

在web控制臺上創建一個新的分組。隨后輸出到控制臺上的內容都會被添加和一個縮進，表示該內容屬于當前分組，直到調用console.groupEnd()之后，當前分組結束。console.group和console.groupCollapsed方法的不同點是，新建的分組默認是折疊的，用戶必須點擊一個按鈕才能將折疊的內容打開。

語法：console.group();console.groupEnd();console.groupCollapsed();

參數：無

示例

    console.log("this is the outer level");
    console.group();
    console.log("level 2");
    console.group();
    console.log('level 3');
    console.warn('more of level 3');
    console.groupEnd();
    console.log('back to level 2');
    console.groupEnd();
    console.debug('back to the outer level');

執行結果

1樹狀信息示例結果

三、定時器：time 、timeEnd

可以啟動一個計時器來跟蹤某一個操作的占用時長。每一個計時器必須擁有唯一的名字，頁面中最多可同時運行10000個計時器。當以此計時器名字為參數調用console.timeEnd()時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間。

語法：console.time(timerName);console.timeEnd(timerName);

參數：新計時器的名字，用來標記這個計時器，作為參數調用console.timeEnd()可以停止計時并將經過的時間在終端中打印出來。

示例：

    console.time('answer time');
    alert('click to continue');
    console.timeEnd('answer time');

示例結果：

定時器示例結果

四、堆棧跟蹤

向web控制臺輸出一個堆棧跟蹤。

語法：console.trace()

參數：無

示例1：打印當前執行位置到console.trace()的路徑信息

    foo();
    function foo(){
        function bar(){
            console.trace();
        }
        bar();
    }

示例1結果：

堆棧跟蹤示例結果

示例2

    function add(a,b){
        console.trace();
        return a+b;
    }
    var x=add3(1,1);
    function add3(a,b){
        return add2(a,b);
    }
    function add2(a,b){
        return add1(a,b);
    }
    function add1(a,b){
        return add(a,b);
    }

示例2結果

trace示例2結果

五、console.table()

將數據以表格的形式顯示。在數組中的每一個元素（或對象的可枚舉的屬性）將會以行的形式顯示在table中。

table的第一列是index。如果數據是一個數組，那么值就是索引。如果數據是一個對象，那么它的值就是屬性名稱。

語法：console.table(data [,columns]);

參數：

    data:要顯示的數據必須是數組或者是對象，強制必須有并且是一個數組或對象。
    columns:一個數組需要包括列的名稱進行輸出否則顯示為索引。

示例1：打印單一參數類型

console.table(['apples','oranges','bananas']);

示例1結果：

table示例結果

示例2：打印一個屬性值是字符串的對象

    function Person(firstName,lastName){
        this.firstName=firstName;
        this.lastName=lastName;
    }
    var me=new Person('john','smith');
    console.table(me);

table示例2結果

示例3：打印復合的參數類型

    //如果需要打印的元素在一個數組中,或者需要打印的屬性在一個對象, 并且他們本身就是一個數組或者對象,則將會把這個元素顯示在同一行, 每個元素占一列
    var people=[["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]];
    console.table(people);

示例3結果

table示例3結果

示例4：控制每行元素是否顯示

    //console.table會把所有的元素羅列在每一列，你可以使用每一列的元素名做為第二個參數去選擇你所需要的列的內容去顯示。
    function Person(firstName,lastName){
        this.firstName = firstName;
        this.lastName = lastName;
    }

    var john = new Person("John", "Smith");
    var jane = new Person("Jane", "Doe");
    var emily = new Person("Emily", "Jones");

    console.table([john, jane, emily], ["firstName"]);

示例4結果

1534158671186.jpg

可以通過點擊每列的頂部標簽來得到每一個列里面的重排元素。

六、console.assert()

用來判斷一個表達式或變量是否為真。如果assertion為false，則將一個錯誤消息寫入控制臺。如果為true，沒有任何反應。

語法：

    console.assert(assertion,obj1 [,obj2,...objN]);
    console.assert(assertion,msg [,subst1,...,substN]);//類似c語法的格式輸出

參數：

    assertion
    一個布爾表達式。如果assertion為假，消息將會被輸出到控制臺之中。
    obj1...objN
    被用來輸出的JavaScript對象列表，最后輸出的字符串是各個對象依次拼接的結果。
    msg
    一個包含零個或多個子串的JavaScript字符串。
    subst1...substN
    各個消息作為子串的JavaScript對象。這個參數可以讓你能夠控制輸出的格式。

七、清空控制臺信息：console.clear()

八、console.count()

輸出count()被調用的次數。

如果有label，此函數輸出為那個指定的label和count()被調用的次數。

如果沒有lable,此函數輸出count()在其所處位置上被調用的次數。

語法：console.count([label])

參數：lable字符串，如果有，count()輸出此給定的label及其被調用的次數

示例代碼：

    var user='';
    function greet(){
        console.count();
        return 'hi '+user;
    }
    user = 'bob';
    greet();
    user = 'alice';
    greet();
    greet();
    console.count();

示例結果：

count示例結果1

如果我們給count加上參數，greet里面改為console.count('inner');最后改為console.count('outer');

則輸出結果如下：

count示例結果2

當然也可以把變量user傳遞給count()

九、console.dir()

在控制臺顯示指定JavaScript對象的屬性，并通過類似文件樹樣式列表顯示。

語法：console.dir(Object);

參數：object打印出該對象的所有屬性和屬性值

十、console.dirxml()

顯示一個明確的xml/html元素的包括所有后代元素的交互樹。如果無法作為一個element被顯示，那么會以javascript對象的形式作為替代。它的輸出是一個繼承擴展的節點列表，可以讓你看到子節點的內容。

語法：console.dirxml(object)

參數：object一個屬性將被輸出的javascript對象。

初學者能力有限，在一次開發中發現console.log打印的不是程序當時的狀態，而是之后的狀態，所以系統地了解了下控制臺console相關內容，不過還是沒有解決問題，如有新的體會隨時補充，也希望能有大神提點，感謝！

參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Console/trace
https://www.cnblogs.com/kuangke/p/5794444.html