摘自https://developer.mozilla.org/zh-CN/docs/Web/API/Console
Console 對象提供對瀏覽器控制臺的接入（如：Firefox 的 Web Console）驳阎，不同瀏覽器上他的工作方式不同劝贸，以下介紹為大多瀏覽器都會提供的接口特性驹溃。
Console 對象可以在任何全局對象中訪問访圃，如 Window话侧，WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義艰管。
它被瀏覽器定義為 Window.console物遇，也可被簡單的 console 調(diào)用绍傲。例如：
console.log("Failed to open the specified link")
Console.assert()
如果斷言為false，則將一個錯誤消息寫入控制臺碰声。如果斷言是true诡蜓，沒有任何反應(yīng)。
Note: 此特性在 Web Worker 中可用胰挑。
Note: console.assert( )方法在Node.js中的實(shí)現(xiàn)和瀏覽器中可用的console.assert()方法實(shí)現(xiàn)
是不同的蔓罚。在瀏覽器中當(dāng)console.assert()方法接受到一個值為假斷言（assertion）的時候椿肩，會向控
制臺輸出傳入的內(nèi)容，但是并不會中斷代碼的執(zhí)行豺谈，而在Node.js中一個值為假的斷言將會導(dǎo)致一個
AssertionError被拋出郑象，使得代碼執(zhí)行被打斷。
語法
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting
參數(shù)
- assertion：一個布爾表達(dá)式茬末。如果assertion為假厂榛，消息將會被輸出到控制臺之中。
- obj1 ... objN：被用來輸出的Javascript對象列表团南，最后輸出的字符串是各個對象依次拼接的結(jié)果噪沙。
- msg：一個包含零個或多個子串的Javascript字符串。
- subst1 ... substN： 各個消息作為字串的Javascript對象吐根。這個參數(shù)可以讓你能夠控制輸出的格式正歼。
實(shí)例
let obj = {a: 1, b: 2, c: 3};
// console.assert(obj.a == 1, obj); // 語句一
console.assert(obj.c == 1, obj); // 語句二
- 當(dāng)執(zhí)行 語句一，第一個參數(shù)值為 true拷橘，控制臺無任何打泳忠濉；
-
執(zhí)行 語句二冗疮，控制臺輸出：
Console.clear()
清空控制臺.
控制臺顯示的內(nèi)容將會被一些信息替換萄唇，比如‘Console was cleared’這樣的信息。
需要的注意的一點(diǎn)是在Google Chrome瀏覽器中术幔，如果用戶在設(shè)置中勾選了“Preserve log”選項(xiàng)另萤，console.clear()將不會起作用。
語法
console.clear();
Console.count()
輸出 count() 被調(diào)用的次數(shù)诅挑。此函數(shù)接受一個可選參數(shù) label(字符串)四敞。
如果有 label，此函數(shù)輸出為那個指定的 label 和 count() 被調(diào)用的次數(shù)拔妥。
如果 label 被忽略忿危，此函數(shù)輸出 count() 在其所處位置上被調(diào)用的次數(shù)。
語法
console.count([label]);
參數(shù)
- label: 字符串没龙，如果有铺厨，count() 輸出此給定的 label 及其被調(diào)用的次數(shù)。
例如：
var user = "";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "Alice";
greet(); // 第11行
greet();
console.count();
Console 的輸出如下:
"<no label>: 1"
"<no label>: 2"
"<no label>: 3"
"<no label>: 1"
注意最后一行的日志輸出：在 11 行對 count() 的單獨(dú)調(diào)用是被當(dāng)作一個獨(dú)立事件來處理的硬纤。
如果把變量 user 當(dāng)作 label 參數(shù)傳給前面調(diào)用的 count()解滓，把字符串 "alice" 傳給后面調(diào)用的 count()：
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "Alice";
greet(); // 第11行
greet();
console.count("Alice");
可以看到輸出如下:
"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
現(xiàn)在可以基于不同的 label 值維護(hù)不同的數(shù)值。由于 11 行的 label 匹配了兩次 user 的值筝家，因此它不會被當(dāng)作獨(dú)立的事件伐蒂。
Console.countReset()
語法
console.countReset([label]);
參數(shù)
- label：一個字符串， 若傳入此參數(shù) countReset() 重置此label的count為0肛鹏。
若忽略此參數(shù) countReset() 重置count()默認(rèn)的 default 字段的count為0
返回值
- 若傳入label參數(shù): counter-name: 0
- 若不傳入label參數(shù): default: 0
異常情況
若傳入一個不存在的 label, countReset 返回下面的警告信息:
Counter "counter-name" doesn’t exist.
若 label 沒有被傳入 并且 count() 也沒有被調(diào)用過, countReset 返回下面的警告信息:
Counter "default" doesn’t exist.
示例
下面給出示例代碼:
var user = "";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "Alice";
greet();
greet();
console.count();
console.countReset();
控制臺打印輸出結(jié)果:
"default: 1"
"default: 2"
"default: 3"
"default: 1"
"default: 0"
可以看到 調(diào)用 console.counterReset() 重置了default 的計(jì)數(shù)為0
如果我們把 user 變量做為 label 傳入第一次調(diào)用的 count() 把字符串 'alice' 作為第二次調(diào)用count() 的參數(shù)
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "Alice";
greet();
greet();
console.countReset("bob");
console.count("Alice");
我們看到的輸出如下:
"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"
調(diào)用countReset("bod")只是重置了 "bob" 的計(jì)數(shù)器值 而 "alice" 的計(jì)數(shù)器值沒有改變逸邦。
Console.debug()
Console.debug() 輸出“調(diào)試”級別的消息且僅僅控制臺配置為顯示調(diào)試輸出時才顯示該消息。
語法
console.debug(對象1 [, 對象2, ..., 對象N]);
console.debug(消息[, 字符串1, ..., 字符串N]);
參數(shù)
- 對象1 ... 對象N: 要輸出的JavaScript 對象列表在扰。 按傳參的順序把對象輸出到控制臺缕减。
- 消息: 一個JavaScript字符串，其中包含零個或多個替代字符串芒珠。
- 字符串1 ... 字符串N: JavaScript 對象桥狡，用來依次替換msg中的替代字符串。你可以在替代字符串中指定對象的輸出格式皱卓。查看使用字符串替換 in Console了解替換字符串如何工作裹芝。
console.dir
在控制臺中顯示指定JavaScript對象的屬性，并通過類似文件樹樣式的交互列表顯示娜汁。
語法
console.dir(object);
參數(shù)
- object: 打印出該對象的所有屬性和屬性值.
Console.dirxml()
顯示一個明確的XML/HTML元素的包括所有后代元素的交互樹嫂易。 如果無法作為一個element被顯示，那么會以JavaScript對象的形式作為替代掐禁。 它的輸出是一個繼承的擴(kuò)展的節(jié)點(diǎn)列表怜械，可以讓你看到子節(jié)點(diǎn)的內(nèi)容。
語法
console.dirxml(object);
參數(shù)
- object: 一個屬性將被輸出的JavaScript對象傅事。
Console.error()
向 Web 控制臺輸出一條錯誤消息缕允。
語法
console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);
console.exception(msg [, subst1, ..., substN]);
注意: console.exception() 是 console.error() 的別名；它們功能相同蹭越。
參數(shù)
- obj1 ... objN: 要輸出的 JavaScript 對象列表障本。 這些對象的字符串形式按順序加起來然后輸出。
- msg: 一個字符串响鹃，它包含零個或多個替代字符串驾霜。
- subst1 ... substN: JavaScript 對象可以用此來替換msg里的替代字符串。你可以控制輸出的格式茴迁。
console.group()/console.groupEnd()/console.groupCollapsed
在 Web控制臺上創(chuàng)建一個新的分組.隨后輸出到控制臺上的內(nèi)容都會被添加一個縮進(jìn),表示該內(nèi)容屬于當(dāng)前分組,直到調(diào)用console.groupEnd()之后,當(dāng)前分組結(jié)束.
console.groupCollapsed()新建的分組默認(rèn)是折疊的.用戶必須點(diǎn)擊一個按鈕才能將折疊的內(nèi)容打開.
Console.info()
向web控制臺輸出一個通知信息寄悯。在Firefox和Chrome中，web控制臺的日志中的項(xiàng)目旁邊會顯示一個小的‘I‘圖標(biāo)
語法
console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);
參數(shù)
obj1 ... objN: 要輸出的JavaScript對象列表堕义。對象obj1,obj2,...列出順序和輸出順序一致猜旬。
msg: JavaScript字符串【肼簦可包含零個或多個替換字符串洒擦。
subst1 ... substN: 用于替換msg內(nèi)的替換字符串的JavaScript對象。 可以對輸出的格式進(jìn)行額外的控制怕膛。
打印多個對象
var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
console.info("My first car was a", car, ". The object is: ", someObject);
打印結(jié)果類似下面:
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
console.log
向 Web 控制臺輸出一條消息熟嫩。
語法
console.log(obj1 [, obj2, ..., objN);
console.log(msg [, subst1, ..., substN);
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
console.log(`temp的值為: ${temp}`)
參數(shù)
- obj1 ... objN: 一個用于輸出的 JavaScript 對象列表。其中每個對象會以字符串的形式按照順序依次輸出到控制臺褐捻。
- msg: 一個JavaScript字符串掸茅，其中包含零個或多個替代字符串椅邓。
- subst1 ... substN: JavaScript 對象，用來依次替換msg中的替代字符串昧狮。你可以在替代字符串中指定對象的輸出格式景馁。
Console.table()
將數(shù)據(jù)以表格的形式顯示。
這個方法需要一個必須參數(shù) data逗鸣，data 必須是一個數(shù)組或者是一個對象合住；還可以使用一個可選參數(shù) columns。
它會把數(shù)據(jù) data 以表格的形式打印出來撒璧。數(shù)組中的每一個元素（或?qū)ο笾锌擅杜e的屬性）將會以行的形式顯示在表格中透葛。
表格的第一列是 index。如果數(shù)據(jù) data 是一個數(shù)組卿樱，那么這一列的單元格的值就是數(shù)組的索引僚害。 如果數(shù)據(jù)是一個對象，那么它們的值就是各對象的屬性名稱殿如。 注意（在 FireFox 中）console.table 被限制為只顯示1000行（第一行是被標(biāo)記的索引（原文：labeled index））贡珊。
語法
console.table(data [, columns]);
參數(shù)
- data: 要顯示的數(shù)據(jù)。必須是數(shù)組或?qū)ο蟆?/li>
- columns: 一個包含列的名稱的數(shù)組涉馁。
打印單一參數(shù)類型
數(shù)據(jù)的參數(shù)類型可以是數(shù)組或是對象门岔。
// 打印一個由字符串組成的數(shù)組
console.table(["apples", "oranges", "bananas"]);
// 打印一個屬性值是字符串的對象
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var me = new Person("John", "Smith");
console.table(me);
打印復(fù)合的參數(shù)類型
如果需要打印的元素在一個數(shù)組中，或者需要打印的屬性在一個對象烤送，并且他們本身就是一個數(shù)組或者對象寒随，則將會把這個元素顯示在同一行，每個元素占一列：
// 二元數(shù)組的打印
var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);
// 打印一個包含對象的數(shù)組
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily]);
請注意帮坚，如果數(shù)組包含對象妻往，則列將使用屬性名稱進(jìn)行標(biāo)記。
結(jié)果顯示试和，如果數(shù)組中包含該對象讯泣，打印出來的列標(biāo)簽將是該對象的屬性名
// 打印屬性名是對象的對象
var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);
選擇要隱藏的列
console.table() 會把所有元素羅列在每一列，你可以使用 columns 參數(shù)選擇要顯示的列的子集：
// 一個對象數(shù)組阅悍，只打印 firstName
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily], ["firstName"]);
按列重新排序
可以點(diǎn)擊每列的頂部標(biāo)簽來重排輸出的表格好渠。
console.trace
向Web控制臺輸出一個堆棧跟蹤.
在頁面console文檔中查看堆棧跟蹤的詳細(xì)介紹和示例.
語法
console.trace();
Console.warn()
向 Web 控制臺輸出一條警告信息。
語法
console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);
參考閱讀
- Tools
- Web Console - Firefox Console 對象
- On-device console logging - Firefox OS 控制臺信息記錄
