讓js調試更簡單—console - chaoran－IT工程師數位筆記本

文章出處

一、顯示信息的命令

console.log 用于輸出普通信息
console.info 用于輸出提示性信息
console.error用于輸出錯誤信息
console.warn用于輸出警示信息

最常用的就是console.log了。

二、占位符

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）:

<script type="text/javascript">
     console.log("%d年%d月%d日",2011,3,26);
</script>

%o、%O都是用來輸出Object對象的，對普通的Object對象，兩者沒區別，但是打印dom節點時就不一樣了：

// 格式成可展開的的DOM，像在開發者工具Element面板那樣可展開 
console.log('%o',document.body.firstElementChild); 
// 像JS對象那樣訪問DOM元素，可查看DOM元素的屬性 
// 等同于console.dir(document.body.firstElementChild) 
console.log('%O',document.body.firstElementChild);

%c占位符是最常用的。使用%c占位符時，對應的后面的參數必須是CSS語句，用來對輸出內容進行CSS渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。

三、顯示某個節點的內容

<!DOCTYPE html>
    <html>
    <head>
        <title>常用console命令</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="info">
            <h3>我的博客：http://www.cnblogs.com/chaoran/</h3>
        </div>
        <script type="text/javascript">
            var info = document.getElementById('info');
            console.dirxml(info);
        </script>
    </body>
    </html>

四、判斷變量是否是真

console.assert()用來判斷一個表達式或變量是否為真。如果結果為否，則在控制臺輸出一條相應信息，并且拋出一個異常。

console.assert對輸入的表達式進行斷言，只有表達式為false時，才輸出相應的信息到控制臺。

<script type="text/javascript">
 　　var result = 1;
 　　console.assert( result );
 　　var year = 2014;
 　　console.assert(year == 2018 );
</script>

1是非0值，是真；而第二個判斷是假，在控制臺顯示錯誤信息

五、追蹤函數的調用軌跡

console.trace()用來追蹤函數的調用軌跡。

<script type="text/javascript">
    /*函數是如何被調用的，在其中加入console.trace()方法就可以了*/
　　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);}
</script>

控制臺輸出信息：

六、計時功能

console.time()和console.timeEnd()，用來顯示代碼的運行時間。

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

七、console.profile()的性能分析

性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。

<script type="text/javascript">
    function All(){
        alert(11);
　　　　 for(var i=0;i<10;i++){
           funcA(1000);
        }
 　　　　funcB(10000);
 　　}

    function funcA(count){
     　　for(var i=0;i<count;i++){}
    }

    function funcB(count){
    　　for(var i=0;i<count;i++){}

     　console.profile('性能分析器');
     　All();
    　 console.profileEnd();
　　｝
</script>