瀏覽器控制台常用命令小結


1.信息輸出  

Console.log,不僅可以向控制台輸出信息,而且能接受多個參數並支持按照指定格式輸出內容。

var animal = "cat", count = 30;
console.log("The mount of %s are %d", animal,count);
or
console.info("The mount of %s are %d", animal,count);

也可混合字符替代和字符鏈接使用。

var name = "Terry", thing1 = "book", thing2 = "pen";
console.log("I am %s and I have",name,thing1,"and",thing2);
or  
console.info("I am %s and I have %s",name,thing1,"and",thing2);

如果輸出內容為對象,在控制台中也查看對象的屬性和方法等信息。
目前輸出內容支持以下幾種格式:  

格式 說明
%s 字符串
%d, %i 整數(不支持指定位數)
%f 浮點數(不支持指定位數)
%O Object對象
%o Dom元素
%c Css樣式

注意:%o和%O的區別:

console.log("%o, %O",document.body, document.body); 

前者log 出body節點內的html,后者log 出body對象的屬性,方法。

另:根據信息的不同性質,console對象還有另外4種顯示信息的方法,分別是一般信息console.info()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error(),不同性質的信息前面有不同的圖標,並且每條信息后面都有超級鏈接,點擊后跳轉到網頁源碼的相應行。  

 

2.表達式判斷

console.assert(判斷語句)用於判斷一個表達式是否是真,如果為錯誤的話,會輸出錯誤提示;如果為真,直接輸出判斷表達式。

var a=3,b=4;
console.assert(a+b == 8);  
輸出:Assertion Failure 

3.信息分組顯示

使用console.group()、console.groupEnd()對輸出到控制台的信息進行分組顯示。如:

console.group("分組1");     
console.log(1);  
console.group("分組1.1");  
console.log(1.1);  
console.groupEnd();   
console.groupEnd(); 
console.group('分組2');   
console.log(2); 
console.groupEnd();  

 在控制台中顯示為:  

 

4.打印表格

console.table()方法可以在控制台打印表格,table內內容用對象字面量寫法。如:

console.table({'first' : {'name' : 'ququ', 'age' : 27}, 'second' : {'name' : 'kitty', 'age' : 100}});  

 顯示如下:

 

5.計時器

console.time()、console.timeEnd()可用來計算某段JavaScript執行的時間,在檢測代碼性能和JS優化上十分有用。如:

console.time("計時器一");  
for(var i=0;i<1000;i++){  
    for(var j=0;j<1000;j++){}  
}  
console.timeEnd("計時器一");  

顯示如下:

 

6.次數統計

console.count() 用來輸出console.count(); 所在語句執行的次數,例如你要看一個循環是否執行了你預想的次數,可以在循環中放入一個console.count("str");這樣,循環執行完成后,控制台就會顯示出循環執行的次數。

var count=0;  
for(var i=0;i<10;i++){  
    console.count();  
    count+=i;  
}  
console.log(count);    

顯示如下:

 

7.輸出對象屬性

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

 

8.輸出節點內html

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

 

9.代碼跟蹤

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

運行后,會顯示add()的調用軌跡,從上到下依次為add()、add1()、add2()、add3()。

顯示如下:

 

10.性能分析

console.profile()和profileEnd()能分析程序各個部分的運行時間,找出瓶頸所在。
假定有一個函數Foo(),里面調用了另外兩個函數funcA()和funcB(),其中funcA()調用10次,funcB()調用1次。

function Foo(){
    for(var i=0;i<10;i++){
        funcA(100);
    }  
    funcB(1000);  
}  
function funcA(count){  
    for(var i=0;i<count;i++){}  
}  
function funcB(count){  
    for(var i=0;i<count;i++){}  
}  

在控制台中輸入:

console.profile('性能分析器一');
Foo();
console.profileEnd();      

控制台顯示如下:  

 

 11.信息清空 

clear()和console.clear()都可以清空Console已有的信息。

 

 

 

參考:
1. Firebug入門指南(阮一峰);
2.Firebug控制台詳解(阮一峰);
3.Console API Reference


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM