JS中的九個console命令以及用法

灬同學發表於2019-02-26

一、顯示資訊的命令 根據資訊的不同,console物件有四種顯示資訊的方法,分別是

console.log('text'); 日誌的輸出

console.info('資訊'); 資訊提示

console.error('錯誤'); 錯誤資訊

console.warn('警告'); 警告資訊 效果:

JS中的九個console命令以及用法

其中console.log 最常用

二:佔位符 console物件的五種方法都可以使用printf的風格的佔位符,支援的佔位符有:字元(%s)、整數(%d或%i)、浮點數(%f)和物件(%o)

console.log("%d年%d月%d日",2011,3,26);
console.log("圓周率是%f",3.1415926);
複製程式碼

效果:

JS中的九個console命令以及用法

JS中的九個console命令以及用法

三、資訊分組

    console.group("第一組資訊");        
    console.log("第一組第一條資訊");
    console.log("第一組第二條資訊");
    console.groupEnd();//第一組資訊結束;可以開始第二條
    console.group("第二組資訊");
    console.log("第二組第一條資訊");
    console.log("第二組第二條資訊");
    console.groupEnd();//第二組資訊結束
複製程式碼

效果:

JS中的九個console命令以及用法

四、檢視物件的屬性和方法 console.dir()可以顯示一個物件所有的屬性和方法。

var info = {
    name:"Bob",
    age:23,
    message:"今年大學畢業"
};
console.dir(info);
複製程式碼

效果:

JS中的九個console命令以及用法

五、顯示某個節點的內容 console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml程式碼。

var table = document.getElementById("table1");
console.dirxml(table);
複製程式碼

效果和上一個類似。

六、判斷變數是否是真 console.assert()用來判斷一個表示式或變數是否為真。如果結果為否,則在控制檯輸出一條相應資訊,並且丟擲一個異常。

var result = 1;  
console.assert(result);  
var year = 2018;  
console.assert(year == 2015);
var year = 2018;  
console.assert(year == 2018);
複製程式碼

1是非0值,是真;而第二個判斷是假,在控制檯顯示錯誤資訊 效果:

JS中的九個console命令以及用法

七、追蹤函式的呼叫軌跡。 console.trace()用來追蹤函式的呼叫軌跡。

/*函式是如何被呼叫的,在其中加入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);
}
複製程式碼

效果:

JS中的九個console命令以及用法

八、計時功能 console.time()和console.timeEnd(),用來顯示程式碼的執行時間。

console.time("控制檯計時器");//計時開始  
for (var i = 0; i < 1000; i++) {&emsp;&emsp;&emsp;&emsp;
    for (var j = 0; j < 1000; j++) {}&emsp;&emsp;
}&emsp;&emsp;
console.timeEnd("控制檯計時器");//計時結束
複製程式碼

執行時間是:4.843994140625s

JS中的九個console命令以及用法

九、console.profile()的效能分析 效能分析(Profiler)就是分析程式各個部分的執行時間,找出瓶頸所在,使用的方法是console.profile() 假定有一個函式Foo(),裡面呼叫了另外兩個函式funcA()和funcB(),其中funcA()呼叫10次,funcB()呼叫1次。

&emsp;&emsp;function Foo(){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<10;i++){funcA(1000);}
&emsp;&emsp;&emsp;&emsp;funcB(10000);
&emsp;&emsp;}
&emsp;&emsp;function funcA(count){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<count;i++){}
&emsp;&emsp;}
&emsp;&emsp;function funcB(count){
&emsp;&emsp;&emsp;&emsp;for(var i=0;i<count;i++){}
&emsp;&emsp;}
複製程式碼

然後,就可以分析Foo()的執行效能了。

&emsp;&emsp;console.profile('效能分析器一');
&emsp;&emsp;Foo();
&emsp;&emsp;console.profileEnd();
複製程式碼

控制檯會顯示一張效能分析表,一共執行了12個函式,共耗時2.656毫秒。其中funcA()執行10次,耗時1.391毫秒,最短執行時間0.123毫秒,最長0.284毫秒,平均0.139毫秒;funcB()執行1次,耗時1.229ms毫秒。

除了使用console.profile()方法,firebug還提供了一個"概況"(Profiler)按鈕。第一次點選該按鈕,"效能分析" 開始,你可以對網頁進行某種操作(比如ajax操作),然後第二次點選該按鈕,"效能分析"結束,該操作引發的所有運算就會進行效能分析。

相關文章