所有Console Api

<script type="text/javascript">
    console.dir(console);
</script>

所有Console Api

顯示簡單信息

<script type="text/javascript">
    console.log('hello world');
    console.info('信息');
    console.error('錯誤');
    console.warn('警告');
</script>   

顯示簡單信息

占位符

<script type="text/javascript">
    console.log('%d-%d-%d,%s',2016,08,21,'中國女排奪的冠軍！');
</script>   

占位符

統(tǒng)計(jì)代碼執(zhí)行次數(shù)

<script type="text/javascript">
    function getInfo()
    {
        console.count('執(zhí)行次數(shù):');
    }
    getInfo();
    getInfo();
    getInfo();
    getInfo();
</script>  

統(tǒng)計(jì)代碼執(zhí)行次數(shù)

顯示分組信息

<script type="text/javascript">
    console.group("第一組信息");
        console.log('第一組：自定義消息1');
        console.log('第一組：自定義消息2');
        console.log('第一組：自定義消息3');
    console.groupEnd();

    console.group("第二組信息");
        console.log('第二組：自定義消息1');
        console.log('第二組：自定義消息2');
        console.log('第二組：自定義消息3');
    console.groupEnd();
</script>  

顯示分組信息

顯示對象信息

<script type="text/javascript">
    var TomObj = {
        name  : "Tom",
        sex   : "男",
        age   : '31',
        hobby : "coding..."
    };
    console.dir(TomObj);
</script>  

顯示對象信息

顯示頁面信息

<div id="console">
    <h1>console api</h1>
</div>
<script type="text/javascript">
    var info = document.getElementById('console');
    console.dirxml(info);
</script> 

顯示頁面信息

判斷表達(dá)式或變量是否為真

<script type="text/javascript">
    var code = 200;
    console.assert(code);
    console.assert(code == 200);
    console.assert(code == 500);
</script>

判斷表達(dá)式或變量是否為真

追蹤函數(shù)的調(diào)用軌跡

<script type="text/javascript">
    function add(a,b) {
        console.trace();
        return a + b;
    }

    add(1,2);
    add(2,3);
    add(3,4);
</script>

追蹤函數(shù)的調(diào)用軌跡

計(jì)時功能

<script type="text/javascript">
    console.time("控制臺計(jì)時器") ;
    console.log('Start');
    for(var i=0;i<1000;i++) {
        for(var j=0;j<1000;j++){
        }
    }
    console.log('End');
    console.timeEnd("控制臺計(jì)時器");
</script>    

計(jì)時功能

分析性能

<script type="text/javascript">
    function getNews() {
        _getAjax_1();
        _getAjax_3();
    }

    function _getAjax_1 () {
        for(var i=0;i<10;i++){
            _getAjax_2();
        }
    }

    function _getAjax_2 () {
        for(var i=0;i<100;i++){
            _getAjax_3()
        }
    }

    function _getAjax_3 () {
        for(var i=0;i<1000;i++){
        }
    }
    console.profile('性能分析器');
    getNews();
    console.profileEnd();
</script>  

分析性能

嘗試用起來吧，讓自己愛上控制臺！