Firebug插件 和 Chrome的JavaScript控制臺 都有一個全局變量 conslole .
首先是大家最常用來調試的console.log([data]:any[,…args]:any),很多時候我們需要查看函數的參數是不是我們想要的值或者結果是不是我們預想的值的時候一般會使用它。

1. console.log

console.log(object[, object, …])
這樣就能在控制臺打印出 : Here is log!

console.log("Here is log!");

如果要輸入的內容存在變量,可以用多個參數的方式實現:

var firstName = "Maple", familyName = "Jan"; console.log("My name is ", firstName, " ", familyName); // My name is Maple Jan

還可以像C語言那樣使用占位符:

var firstName = "Maple", familyName = "Jan"; console.log("My name is %s %s", firstName, familyName); // My name is MapleJan

還可以這樣寫

var firstName = "Maple", familyName = "Jan", m = "m", a = "a", n = "n"; console.log("My name is %s %s. I am a ", firstName, familyName, m, a, n); // My name is Maple Jan. I am a m a n

占位符:

PatternType

%s	String (字符串)
%d, %i	Integer (整數)
%f	Floating point number (浮點數)
%o	Object hyperlink (對象)
%c	Style formatting (CSS樣式)

現代瀏覽器的console插件還支持css樣式:

console.log('%cThis is red text on a green background', 'color:red; background-color:green');

這樣在控制臺就會輸出 綠色背景 紅色字體的 This is red text on a green background

2. console.dir

console.dir(obj：any[,options]：Object)

• obj

  • options
  • options的參數：
    • showHidden如果為true，則也會顯示對象的不可枚舉屬性和符號屬性。默認值：false
    • depth告訴 util.inspect() 格式化對象時要遞歸多少次。這對于檢查大型復雜對象很有用。要使其無限遞歸，可傳入 null。默認值: 2。
    • colors 如果為 true，則輸出將使用 ANSI 顏色代碼進行樣式設置。顏色可定制，請參閱自定義 util.inspect() 顏色。默認值: false。

  使用方法：
  在obj上使用util.inspect()并將結果字符串打印到stdout。此函數繞過obj上定義的任何自定義inspect()函數。

  dog.bark = function(){alert("汪汪汪");}; console.dir(dog);

  firefox:
  

  chrome:
  

3. console.count

console.count([label]：string)
用來維護一個特定于label的內部計數器，并將用給定 label 調用 console.count() 的次數輸出到控制臺。

console.count() console.count() console.count("test") console.count("test") console.count()

注意：
1 . 與console.time一樣，不給參數是默認的default
2 . 中間就算被隔開了還是會接著之前的次數繼續計數

4. console.countReset

console.countReset([label]：string)
用來重置指定的計數

console.count() console.count() console.countReset() //重置計數 console.count()

可以看到在重置后輸出默認的default又重新從1開始計數了。

5. console.debug

console.debug(object[, object, …])
debug 的輸入和 log 輸出的效果一樣,但在Firebug中會被記錄下來,可以在"調試信息"中找到.

6. console.info

console.info(object[, object, …])
在 Firebug中,輸出信息的前面有藍色感嘆號的圖標,會被記錄到"消息"中.

7. console.warn

console.warn(object[, object, …])
Firebug和Chrome控制臺中,輸出信息的前面有黃色感嘆 圖標,會被記錄到"Warning"中.

8. console.error

console.error(object[, object, …])
Firebug和Chrome控制臺中,輸出信息的前面有紅色叉圖標,會被記錄到"Warning"中。該方法可以用于檢測參數數據類型報錯。

console.log("Here is log"); console.info("Here is info"); console.debug("Here is debug"); console.warn("Here is warn"); console.error("Here is error");;

firefox：

chrome：
谷歌似乎不支持console.debug（）命令

9. console.assert

console.assert(expression[, object, …])
判斷表達式或變量是否為真.

console.assert(0); console.assert(1); console.assert(1>0); console.assert(1<0);

firefox：

chrome：

10. console.clear()

console.clear()
console.clear()此方法用來清除控制臺的內容，有些時候我們的控制臺的東西太多的時候，亦或者是我想讓我現在輸出的東西顯示在最上面，它之前的輸出暫時隱藏的時候可以用到此方法：

11. console.dir

console.dir(object)
返回對象的全部屬性和方法.

12. console.dirxml

console.dirxml(object)
以 xml 的樹狀結構返回對象.

var _mydiv = document.getElementsByClassName("blog_container_aside"); console.dirxml(_mydiv);

firefox:

chrome:

13. console.trace()

console.trace()
追蹤函數的調用路徑,返回相應位置.

function plus(num1,num2){console.trace();return num1+num2; } var x = plus3(2,3); function plus3(num1,num2){return plus2(num1,num2);} function plus2(num1,num2){return plus1(num1,num2);} function plus1(num1,num2){return plus(num1,num2);}

firefox：

chrome：

14. console.group

console.group(object[, object, …])
以樹狀結構分組顯示,分組的內容全部展開顯示.

15. console.groupCollapsed

console.groupCollapsed(object[, object, …])
和 console.group() 作用一樣,不過 console.groupCollapsed()分組的內容不展開顯示.

16. console.groupEnd

console.groupEnd()
無論用 console.group() 還是 console.groupCollapsed(), 都要以 console.groupEnd() 為結束標記.

console.group("1"); console.log("1.1"); console.log("1.2"); console.log("1.3"); console.groupCollapsed("1.4"); console.log("1.4.1"); console.log("1.4.2"); console.groupEnd(); console.log("1.5"); console.groupEnd();

Firebug：

Chrome：

17. console.time

console.time(name) 和 console.timeEnd(name)
這個一般結合console.timeEnd([label]：string)使用，前端開發者想要自己測試性能的時候常用的方法，比如我現在想要測試一下執行這個循環需要多久。

console.time("times"); var n = 0; for(var i = 0; i < 9999999; i++) {n += 2; }; console.timeEnd("times")

firefox：

chrome：

注意：
1 . 如果console.time()和console.timeEnd()括號里沒有放入參數，那么會輸出默認的default:***；
2 . 輸出出來的時間不是固定的，是會隨著計算機的性能從而有波動
3 . 常用來測試算法/函數執行的時間，從而作比較選擇最優的算法/函數的方法。

18. console.profile

console.profile([title]) 和 console.profileEnd()
測試代碼的性能 ;
性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是 console.profile()。點擊性能Tab查看

function f(){for(var i=0;i<999999;i++){} } console.profile('power'); f(); console.profileEnd();

19. console.count

console.count([title])
計算改行代碼執行的次數

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

20. console.table

console.table(tabularData:any[,properties]:string[])
嘗試使用tabularData(或使用properties)的屬性列和tabularData的行來構造一個表并記錄它。如果無法將其解析為表格，則回退到進記錄參數。
以表格方式顯示數組

var table1 = new Array(5); for (var i=0; i<table1.length; i++)table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7]; console.table(table1);

firefox:

chrome:

總結

以上是生活随笔為你收集整理的console，控制台也能玩出花样（console操作大全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。