九個 Console 命令，讓 js 調試更簡單

標籤：

一、顯示資訊的命令

    console.log(‘hello‘);    console.info(‘資訊‘);    console.error(‘錯誤‘);    console.warn(‘警告‘);

二、預留位置

console上述的集中度支援printf的預留位置格式，支援的預留位置有：字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）

console.log("%d年%d月%d日",2011,3,26);

三、資訊分組

console.group("第一組資訊");    console.log("第一組第一條");    console.log("第一組第二條");console.groupEnd();console.group("第二組資訊");    console.log("第二組第一條");    console.log("第二組第二條");console.groupEnd();

四、查看對象的資訊

console.dir()可以顯示一個對象所有的屬性和方法。

    var info = {        qq:"332877552",        message:"哈哈哈",        dd: "ddddd"    };    console.dir(info);

五、顯示某個節點的內容

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。

<div id="info">    <h3>歡迎光臨</h3>    <p>我的qq是332877552</p></div><script type="text/javascript">    var info = document.getElementById(‘info‘);    console.dirxml(info);</script>

六、判斷變數是否是真

console.assert()用來判斷一個運算式或變數是否為真。如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。

var result = 1;console.assert( result ); // 1是非0值，是真；var year = 2014;console.assert(year == 2018 );  //而第二個判斷是假，在控制台顯示錯誤資訊

 

七、追蹤函數的調用軌跡

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

    console.log(‘列印資訊‘);    /*函數是如何被調用的，在其中加入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);}

八、計時功能

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

   console.log(‘列印資訊‘);    console.time("控制台計時器一");    for(var i=0;i<100;i++){        for(var j=0;j<100;j++){}    }    console.timeEnd("控制台計時器一");

九、console.profile()的效能分析

效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。

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();

 

九個 Console 命令，讓 js 調試更簡單