f?簡介：

JS中默認(rèn)沒有console對象, 這是某些瀏覽器提供的瀏覽器內(nèi)置對象, 低版本IE就沒有, 其他主流瀏覽器應(yīng)該都有。它能看到結(jié)構(gòu)話的東西，如果是alert，淡出一個對象就是[object object],但是console能看到對象的內(nèi)容。console不會打斷你頁面的操作，如果用alert彈出來內(nèi)容，那么頁面就死了，但是console輸出內(nèi)容后你頁面還可以正常操作。它是添加進(jìn)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)。結(jié)果如圖：

1.assert

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

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.");

第一個參數(shù)為真，不打印錯誤信息。當(dāng)?shù)谝粋€參數(shù)為假，打印第二個參數(shù)自定義的錯誤提示。錯誤提示如下：

如果第二個參數(shù)為空，打印結(jié)果如下：

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

?

2.clear

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

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

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

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

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

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

?

3.count

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

?

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執(zhí)行次數(shù)"); } func();

打印結(jié)果：

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

?

4.debug

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

?

5.dir

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

很顯然，前三個顯示dom結(jié)構(gòu)，而dir顯示的是該對象的屬性方法。我們再來看看數(shù)組的表現(xiàn)：

?

表現(xiàn)也是基本一致。

在顯示對象的時候，表現(xiàn)比較一致，有待進(jìn)一步驗(yàn)證。如圖：

?

6.dirxml

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

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

然后，顯示該節(jié)點(diǎn)包含的代碼。

console.dirxml(table);

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

打印結(jié)果：

dirxml打印的是html/xml結(jié)構(gòu)，類似上面log，info，debug，而dir打印的是屬性方法詳情。

?

7.error，warn

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

?

?

8.group,grounCollapsed,grounpEnd

Console.group()打印樹狀結(jié)構(gòu)，配合groupCollapsed以及groupEnd方法;Console.groupCollapsed()使用方法和group相同，不同的是groupCollapsed打印出來的內(nèi)容默認(rèn)是折疊的。Console.groupEnd()結(jié)束當(dāng)前Tree。如圖所示：

展開如下:

?

9.info,log

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

數(shù)字結(jié)果如下：

字符串結(jié)果如下：

數(shù)組結(jié)果如下：

?

普通對象：

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

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

jquery對象：

函數(shù)的顯示結(jié)果：

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

"String%[patternType]string..."

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

pattern類型如下：

%s:字符串
%i，%d：整數(shù)
%f：浮點(diǎn)數(shù)
%o：小o，DOM方式輸出對象
%O：大O，輸出對象

%c所對應(yīng)的是一條行內(nèi)CSS樣式

如圖：

?

10.marktimeline

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

?

11.memory

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

因?yàn)樗皇且粋€方法，因此不能帶括號。console.set memory(),console.get memory()這是谷歌瀏覽器中的方法，在火狐中執(zhí)行console.dir(console)并無此方法。

?

12.profile及profileEnd

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

?執(zhí)行結(jié)果：

來源于腳本之家的解釋：

結(jié)果的默認(rèn)標(biāo)題是”Profile”，可以通過向console.profile()函數(shù)傳入?yún)?shù)來進(jìn)行自定義。比如，使用console.profile(“Test Profile”)即可在結(jié)果中將此次profile的標(biāo)題改為”Test Profile”，這對于同時執(zhí)行多個profile過程的情況下尤為有用。具體profile結(jié)果中各列的含義為：

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

?

13.table

現(xiàn)在我們使用console.table()進(jìn)行打印。

你可以看到如下表格：

?

整齊漂亮,當(dāng)然表單最適合表單數(shù)據(jù)呈現(xiàn)。如果每個對象都擁有不同的結(jié)構(gòu)，那么最后會發(fā)現(xiàn)有很多單元是undefined。盡管如此，屬性值都是整齊排列的，并給你很好的概述。后面?zhèn)饕粋€數(shù)組或者字符串可以過濾需要顯示的屬性值，比如：

console.table(languages,"name");

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

?

14.time,timeEnd,timeStamp

當(dāng)執(zhí)行到timeStamp()方法時，會產(chǎn)生一個時間軸標(biāo)志。該語句僅在啟用時間軸面板錄制時有效。關(guān)于時間軸面板詳見后續(xù)文章。time及timeEnd的執(zhí)行結(jié)果如下：

?

15.trace

console.trace()用來追蹤函數(shù)的調(diào)用軌跡。如圖：

?

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

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

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

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

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

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

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

?

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

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

$x(path)

將所匹配的節(jié)點(diǎn)放在一個數(shù)組里返回

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

?

17.copy

copy通過此命令可以將在控制臺獲取到的內(nèi)容復(fù)制到剪貼板

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

?

18.keys and values

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

?

19.monitor & unmonitor

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

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

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

?

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

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

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

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

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

上面代碼表示如何停止監(jiān)聽。

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

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

上面代碼表示監(jiān)聽所有key大類的事件。

?

本文還有不完善之處，后續(xù)補(bǔ)充。

?

20.debug & undebug

debug同樣也是接收一個函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時自動斷下來以供調(diào)試，類似于在該函數(shù)的入口處打了個斷點(diǎn)，可以通過debugger來做到，同時也可以通過在Chrome開發(fā)者工具里找到相應(yīng)源碼然后手動打斷點(diǎn)。而undebug 則是解除該斷點(diǎn)。而其他還有好些命令則讓人沒有說的欲望，因?yàn)楹眯┒伎梢酝ㄟ^Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺輸入要方便。

?

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

?

21.$$(selector)

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

$x(path)

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

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

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

inspect(object)

inspect(object)方法打開相關(guān)面板，并選中相應(yīng)的元素：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

轉(zhuǎn)載于:https://www.cnblogs.com/jiangtian/p/6245035.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。