f?簡介：

JS中默認沒有console對象, 這是某些瀏覽器提供的瀏覽器內置對象, 低版本IE就沒有, 其他主流瀏覽器應該都有。它能看到結構話的東西，如果是alert，淡出一個對象就是[object object],但是console能看到對象的內容。console不會打斷你頁面的操作，如果用alert彈出來內容，那么頁面就死了，但是console輸出內容后你頁面還可以正常操作。它是添加進window全局對象的一個方法集合，console對象提供瀏覽器控制臺的接入，不同的瀏覽器工作的方式是不一樣的。

console控制臺的方法和屬性列表：

["$$", "$x", "assert","count","debug","error","group","groupCollapsed","groupEnd","info","log","markTimeline","memory","get memory","set memory","time","timeEnd","timestamp","timeline","timelineEnd","trace","warn","dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

?

首先打印一下，console本身的文件樹，console.dir(console)。結果如圖：

1.assert

在JavaScript程序的開發和維護過程中，Assert(斷言)是一個很好的用于保證程序正確性的特性，判斷第一個參數是否為真，false的話拋出AssertionError異常并且在console輸出相應信息字符串。示例代碼：

function cat(name, age, score){this.name = name;this.age = age;this.score = score; } var c = new cat("miao", 2, [6,7,8]); console.assert(c.score.length == 3, "Assertion of score length failed.");

第一個參數為真，不打印錯誤信息。當第一個參數為假，打印第二個參數自定義的錯誤提示。錯誤提示如下：

如果第二個參數為空，打印結果如下：

console.assert()在有調試工具的瀏覽器上支持較好，各大瀏覽器均支持此功能。不過值得一提的是，Firefox自身并不支持此功能，在Firefox上必須安裝Firebug插件才能使用console.assert()。

?

2.clear

清除控制臺緩沖區和控制臺窗口顯示的信息。

你可以通過以下方式清除控制臺歷史：

1.在控制臺區域右鍵或者Ctrl-click 任何區域，然后選擇 'Clear Console'

2.在控制臺的命令行中輸入 clear() 然后回車

3.在你自己的javascript代碼中執行console.clear()方法

4.在Mac中使用快捷鍵Cmd+K,在Windows和Linux下使用Ctrl+L

?

3.count

統計代碼被執行的次數。放到正常的代碼邏輯之后，統計一個方法或函數的執行次數。代碼格式:console.count([title])，如下title是放在執行次數之前的方便閱讀的文字。

?

var num = 10; var i = 0; var func = function(){if(i<num){console.log(i++);setTimeout(func,1000);}else{i = 0;func();}console.count("func執行次數"); } func();

打印結果：

在Chrome中的結果，會打印出累積次數，而在firefox中則顯示最終數值。

?

4.debug

console.debug用于輸出調試信息。console.log方法的別稱。可參見下面對console.log的解釋。

?

5.dir

console.dir()可以顯示一個對象所有的屬性和方法。console.log跟console.debug打印內容一致，console.info顯示詳細信息，下面會詳解。而console.dir()則打印詳細屬性方法等。如圖：

很顯然，前三個顯示dom結構，而dir顯示的是該對象的屬性方法。我們再來看看數組的表現：

?

表現也是基本一致。

在顯示對象的時候，表現比較一致，有待進一步驗證。如圖：

?

6.dirxml

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。比如，先獲取一個表格節點，

var table = document.getElementByIdx_x("table1");

然后，顯示該節點包含的代碼。

console.dirxml(table);

var heads = document.getElementsByTagName("head"); head = heads[0]; console.dirxml(head);

打印結果：

dirxml打印的是html/xml結構，類似上面log，info，debug，而dir打印的是屬性方法詳情。

?

7.error，warn

會飄紅打印錯誤信息提示。在代碼中catch錯誤拋出起到提示作用。

?

?

8.group,grounCollapsed,grounpEnd

Console.group()打印樹狀結構，配合groupCollapsed以及groupEnd方法;Console.groupCollapsed()使用方法和group相同，不同的是groupCollapsed打印出來的內容默認是折疊的。Console.groupEnd()結束當前Tree。如圖所示：

展開如下:

?

9.info,log

分別用數字、字符串、數組、對象（包括DOM對象和jquery對象）、函數等來測試，看結果異同。

數字結果如下：

字符串結果如下：

數組結果如下：

?

普通對象：

DOM對象，全局對象都將屬性方法顯示了出來：

但非全局對象結果有所不同了，前三個為dom結果，而dir是屬性方法集合：

jquery對象：

函數的顯示結果：

格式化，pattern,意為模式(比如說像RegExp就是一種用于模式匹配的對象)，大多數語言里,pattern一般是這樣的形式:

"String%[patternType]string..."

比如像c中的prinft，printf("Hello,%s\n","world")

pattern類型如下：

%s:字符串
%i，%d：整數
%f：浮點數
%o：小o，DOM方式輸出對象
%O：大O，輸出對象

%c所對應的是一條行內CSS樣式

如圖：

?

10.marktimeline

原文鏈接http://www.2ality.com/2013/10/console-api.html，由于markTimeLine()的支持度不高，僅sarafi支持，因此不做講述。

?

11.memory

作用：用于顯示此刻使用的內存信息。注意：這個是console的屬性，而不是方法，此項信息需要在控制臺中輸入，再按enter鍵進行查看，它是一個記錄JavaScript堆內存的東西。如圖：

因為它不是一個方法，因此不能帶括號。console.set memory(),console.get memory()這是谷歌瀏覽器中的方法，在火狐中執行console.dir(console)并無此方法。

?

12.profile及profileEnd

性能測試。console.profile()的使用非常簡單：在需要開始profile的地方插入console.profile()，在結束profile的地方插入console.profileEnd()即可。

?執行結果：

來源于腳本之家的解釋：

結果的默認標題是”Profile”，可以通過向console.profile()函數傳入參數來進行自定義。比如，使用console.profile(“Test Profile”)即可在結果中將此次profile的標題改為”Test Profile”，這對于同時執行多個profile過程的情況下尤為有用。具體profile結果中各列的含義為：

1.Function。函數名。
2.Calls。調用次數。比如，在上面的例子中，doSubTaskA()函數被執行了2次。
3.Percent。該函數調用所消耗的時間在總體時間中所占的百分比。
4.Own Time。除去調用其它函數所消耗的時間，該函數本身的耗時數量。比如，在上面的例子中，doTask()無疑執行了很長時間，但是因為其耗時全部花在了對其它函數的調用上，因此其本身所耗時間并不多，僅為0.097ms。
5.Time。與Own Time相反，不考慮對其它函數的調用因素，計算函數的總耗時。在上面的例子中，doTask()函數執行了101.901ms。對于Time和Own Time，也可以得到一個結論：如果Time比Own Time數值要大，那么該函數內部就涉及了對其它函數的調用。
6.Avg。計算函數的平均總耗時，其計算公式為：Avg=Time/Calls。在上面的例子中，doSubTaskA()函數被執行了2次，其總耗時為1.054ms，因此其平均總耗時為0.527ms。
7.Min。對該函數調用的最小耗時。比如，在上面的例子中，doSubTaskA()函數被執行了2次，其最小耗時，也就是耗時較少的那次調用花掉了0.016ms。
8.Max。對該函數調用的最大耗時。比如，在上面的例子中，doSubTaskA()函數被執行了2次，其最大耗時，也就是耗時較多的那次調用花掉了1.038ms。

?

13.table

現在我們使用console.table()進行打印。

你可以看到如下表格：

?

整齊漂亮,當然表單最適合表單數據呈現。如果每個對象都擁有不同的結構，那么最后會發現有很多單元是undefined。盡管如此，屬性值都是整齊排列的，并給你很好的概述。后面傳一個數組或者字符串可以過濾需要顯示的屬性值，比如：

console.table(languages,"name");

或者console.table(languages,["name","fileEXtension"]);

?

14.time,timeEnd,timeStamp

當執行到timeStamp()方法時，會產生一個時間軸標志。該語句僅在啟用時間軸面板錄制時有效。關于時間軸面板詳見后續文章。time及timeEnd的執行結果如下：

?

15.trace

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

?

16."$0",?"$1",?"$2",?"$3",?"$4",?"$_"，$$, $x

$0-$4,是在審查元素模式下，點擊選擇元素的記錄，$0是最近的一次，$是最遠一次。如圖：

$_是緊隨$0-￥4輸出的，也即前一個輸出啥，$_輸出啥。

$ // 簡單理解就是 document.querySelector 而已。

$$ // 簡單理解就是 document.querySelectorAll 而已。

$_ // 是上一個表達式的值，如圖：

$0-$4 // 是最近5個Elements面板選中的DOM元素，待會會講。

?

另外值得一贊的是，Chrome 控制臺中原生支持類jQuery的選擇器，也就是說你可以用$加上熟悉的css選擇器來選擇DOM節點，多么滴熟悉。

$('body'); $$('div'); (selector)是原生JavaScript document.querySelector() 的封裝。 同時另一個命令$$(selector)返回的是所有滿足選擇條件的元素的一個集合，是對document.querySelectorAll() 的封裝。

$x(path)

將所匹配的節點放在一個數組里返回

$x("//p"); $x("//p[a]"); x(“//p[a]”);匹配所有子節點包含a的p節點

?

17.copy

copy通過此命令可以將在控制臺獲取到的內容復制到剪貼板

（剛剛從控制臺復制的body里面的html可以任意粘貼到哪,比如記事本）

?

18.keys and values

keys和values?前者返回傳入對象所有屬性名組成的數據，后者返回所有屬性值組成的數組

?

19.monitor & unmonitor

monitor(function)，它接收一個函數名作為參數，比如function a,每次a被執行了，都會在控制臺輸出一條信息，里面包含了函數的名稱a及執行時所傳入的參數。

而unmonitor(function)便是用來停止這一監聽。

看了這張圖，應該明白了，也就是說在monitor和unmonitor中間的代碼，執行的時候會在控制臺輸出一條信息，里面包含了函數的名稱a及執行時所傳入的參數。當解除監視（也就是執行unmonitor時）就不再在控制臺輸出信息了。

?

monitorEvents(object[, events]) ，unmonitorEvents(object[, events])

monitorEvents(object[, events])方法監聽特定對象上發生的特定事件。當這種情況發生時，會返回一個Event對象，包含該事件的相關信息。unmonitorEvents方法用于停止監聽。

monitorEvents(window, "resize");monitorEvents(window, ["resize", "scroll"])

上面代碼分別表示單個事件和多個事件的監聽方法。

monitorEvents($0, "mouse"); unmonitorEvents($0, "mousemove");

上面代碼表示如何停止監聽。

monitorEvents允許監聽同一大類的事件。所有事件可以分成四個大類。

mouse：”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key：”keydown”, “keyup”, “keypress”, “textInput”
touch：”touchstart”, “touchmove”, “touchend”, “touchcancel”
control：”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

monitorEvents($("#msg"), "key");

上面代碼表示監聽所有key大類的事件。

?

本文還有不完善之處，后續補充。

?

20.debug & undebug

debug同樣也是接收一個函數名作為參數。當該函數執行時自動斷下來以供調試，類似于在該函數的入口處打了個斷點，可以通過debugger來做到，同時也可以通過在Chrome開發者工具里找到相應源碼然后手動打斷點。而undebug 則是解除該斷點。而其他還有好些命令則讓人沒有說的欲望，因為好些都可以通過Chrome開發者工具的UI界面來操作并且比用在控制臺輸入要方便。

?

作者：Damonare
鏈接：https://zhuanlan.zhihu.com/p/24187505
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

?

21.$$(selector)

$$(selector)返回一個選中的DOM對象，等同于document.querySelectorAll。

$x(path)

$x(path)方法返回一個數組，包含匹配特定XPath表達式的所有DOM元素。

$x("//p[a]")

上面代碼返回所有包含a元素的p元素。

inspect(object)

inspect(object)方法打開相關面板，并選中相應的元素：DOM元素在Elements面板中顯示，JavaScript對象在Profiles中顯示。

?

參考：

1.http://dwz.cn/4YT1BQ

2.http://www.2ality.com/2013/10/console-api.html

3.http://dwz.cn/4YUj9A

4.http://dwz.cn/4YVIM9

5.http://www.cnblogs.com/chayan/p/5898073.html

6.https://zhuanlan.zhihu.com/p/24187505?refer=damonare

轉載于:https://www.cnblogs.com/jiangtian/p/6245035.html

總結

以上是生活随笔為你收集整理的consolel API大全-附测试结果的全部內容，希望文章能夠幫你解決所遇到的問題。

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