console

Console 對象可以接入瀏覽器控制臺（如：Firefox 的 Web Console）。在不同瀏覽器上它的實現細節可能是不一樣的，但這里會介紹一些典型的瀏覽器會提供的特性。

Console 對象可以從任何全局對象中訪問到，如 Window，WorkerGlobalScope 以及控制臺屬性中的特殊變量。它被定義為 Window.console，而且可直接通過 console 調用。例：

console.log("this is a log");

方法

Console.log() 打印通用的方法

語法

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

// 輸出對象
console.log({ test: "test" });

// 輸出字符串
console.log("String");

// 指定對象的輸出格式
var str = 1,
  ints = -6.3,
  floats = 1.1,
  obj = { test: "test" };
console.log(
  "String: %s, Int: %d, Float: %f, Object: %o",
  str,
  ints,
  floats,
  obj
);
// 控制臺輸出 String: 1, Int: -7, Float: 1.1, Object: {test: "test"}

// 模板字符串模式
console.log(`String: ${str}`);
// 控制臺輸出 String: 1

使用字符串替換有以下類型

為控制臺定義樣式 ( 你可以使用 %c 為打印內容定義樣式 )

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px"
);

console-style.png

Console.info() 打印資訊類說明信息

向 web 控制臺輸出一個通知信息。僅在 Firefox，web 控制臺的日志中的項目旁邊會顯示一個小的‘I‘圖標

語法

console.info(obj1 [, obj2, ..., objN]);

console.info(msg [, subst1, ..., substN]);

console.info({ info: "info" });
console.info("info1", "info2");
console.info("info");

console-info.png

Console.warn() 打印一個警告信息

向 Web 控制臺輸出一條警告信息。

語法

console.warn(obj1 [, obj2, ..., objN]);

console.warn(msg [, subst1, ..., substN]);

console.warn({ warn: "warn" });
console.warn("warn");

console-warn.png

Console.error() 打印一條錯誤信息

向 Web 控制臺輸出一條錯誤消息。

語法

console.error({ error: "error" });
console.error("error");
console.exception({ exception: "exception" });
console.exception("exception");

console-error.png

注意: console.exception() 是 console.error() 的別名；它們功能相同。chrome 未實現

Console.dir() 打印一條以三角形符號開頭的語句，可以點擊三角展開查看對象的屬性

在控制臺中顯示指定 JavaScript 對象的屬性，并通過類似文件樹樣式的交互列表顯示

語法

console.dir(object); 打印出該對象的所有屬性和屬性值

console.dir({ dir: "dir" });

console-dir.png

Console.debug() 在控制臺打印一條 "debug" 級別的消息

輸出“調試”級別的消息且僅僅控制臺配置為顯示調試輸出時才顯示該消息

語法

console.debug(對象 1 [, 對象 2, ..., 對象 N]);
console.debug(消息[, 字符串 1, ..., 字符串 N]);

console.debug({ debug: "debug" });
console.debug("debug");

console-debug.png

若控制臺不顯示, 可以參照上圖, 勾選 Verbose 試試

Console.assert() 判斷第一個參數是否為真，false 的話拋出異常并且在控制臺輸出相應信息

如果斷言為 false，則將一個錯誤消息寫入控制臺。如果斷言是 true，沒有任何反應

語法

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]);

console.assert(1 === 3, "not true");
console.assert(1 === 3, { assert: "assert", message: "not true" });

console-assert.png

Console.count() 以參數為標識記錄調用的次數，調用時在控制臺打印標識以及調用次數

輸出 count() 被調用的次數。此函數接受一個可選參數 label

語法

console.count()
console.count(label)

console.count();
console.count("count");
console.count("count");
console.count();
console.count();
console.count("count");
console.count();

console-count.png

Console.countReset() 重置指定標簽的計數器值

重置 console.count()的計數

語法

console.countReset([label]);
label 一個字符串， 若傳入此參數 countReset() 重置此 label 的 count 為 0。若忽略此參數 countReset() 重置 count()默認的 default 字段的 count 為 0

console.count();
console.count("count");
console.count("count");
console.count();
console.count();
console.count("count");
console.count();
console.countReset();
console.count();

console-countReset.png

Console.clear() 清空控制臺，并輸出 Console was cleared

控制臺顯示的內容將會被一些信息替換，比如‘Console was cleared’這樣的信息

需要的注意的一點是在 Google Chrome 瀏覽器中，如果用戶在設置中勾選了“Preserve log”選項，console.clear()將不會起作用

語法

console.clear();

console.count();
console.count("count");
console.count("count");
console.count();
console.count();
console.count("count");
console.count();
console.countReset();
console.count();
console.clear();

console-clear.png

Console.dirxml() 打印 XML/HTML 元素表示的指定對象，否則顯示 JavaScript 對象視圖

顯示一個明確的 XML/HTML 元素的包括所有后代元素的交互樹。 如果無法作為一個 element 被顯示，那么會以 JavaScript 對象的形式作為替代。 它的輸出是一個繼承的擴展的節點列表，可以讓你看到子節點的內容

語法

console.dirxml(object);

console.dirxml("xxx");
console.dirxml(false);
console.dirxml({ dirxml: "dirxml", two: "two" });

console-dirxml.png

Console.group() 創建一個新的內聯 group, 后續所有打印內容將會以子層級的形式展示。調用 groupEnd()來閉合組

在 Web 控制臺上創建一個新的分組.隨后輸出到控制臺上的內容都會被添加一個縮進,表示該內容屬于當前分組,直到調用 console.groupEnd()之后,當前分組結束.

語法

console.group();

console.group();
console.log("xxx");
console.log("xxx");
console.log("xxx");
console.log("xxx");
console.group();
console.log("yyyy");
console.log("yyyy");
console.log("yyyy");

console-group.png

Console.groupCollapsed() 創建一個新的內聯 group。使用方法和 group() 相同，不同的是，groupCollapsed() 方法打印出來的內容默認是折疊的

在 Web 控制臺上創建一個新的分組.隨后輸出到控制臺上的內容都會被添加一個縮進,表示該內容屬于當前分組,直到調用 console.groupEnd() 之后,當前分組結束.和 console.group()方法的不同點是,新建的分組默認是折疊的.用戶必須點擊一個按鈕才能將折疊的內容打開.

語法

console.groupCollapsed();

console.groupCollapsed();
console.log("xxx");
console.log("xxx");
console.log("xxx");
console.log("xxx");
console.groupCollapsed();
console.log("yyyy");
console.log("yyyy");
console.log("yyyy");

console-groupCollapsed.png

Console.groupEnd() 閉合當前內聯 group

在 Web 控制臺中退出一格縮進(結束分組). 請參閱 console 中的 Using groups in the console 來獲取它的用法和示例.

語法

console.groupEnd();

console.group();
console.log("xxx");
console.group();
console.log("xxx");
console.group();
console.log("xxx");
console.log("xxx");
console.groupEnd();
console.group();
console.log("yyyy");
console.log("yyyy");
console.log("yyyy");

console-groupEnd.png

Console.table() 將列表型的數據打印成表格

將數據以表格的形式顯示。

這個方法需要一個必須參數 data，data 必須是一個數組或者是一個對象；還可以使用一個可選參數 columns。

它會把數據 data 以表格的形式打印出來。數組中的每一個元素（或對象中可枚舉的屬性）將會以行的形式顯示在表格中。

表格的第一列是 index。如果數據 data 是一個數組，那么這一列的單元格的值就是數組的索引。 如果數據是一個對象，那么它們的值就是各對象的屬性名稱。 注意（在 FireFox 中）console.table 被限制為只顯示 1000 行

語法

console.table(data [, columns]);

參數

data
要顯示的數據。必須是數組或對象。
columns
一個包含列的名稱的數組。

let data = ["one", "two", "tree", "four"];
console.table(data);
let data2 = [{ one: "one", two: "two" }, { two: "two" }, { tree: "tree" }];
console.table(data2);
let data3 = { one: data, two: data2 };
console.table(data3);
let data4 = { one: "one", two: "two", tree: "tree" };
console.table(data4);

console-table.png

皮了一下, 這個函數太好玩了, 哈哈哈 O(∩_∩)O 哈哈~
還有更好玩的組合你們隨意, 我就不皮了, 點到為止

Console.time() 啟動一個以入參作為特定名稱的計時器，在顯示頁面中可同時運行的計時器上限為 10,000

你可以啟動一個計時器來跟蹤某一個操作的占用時長。每一個計時器必須擁有唯一的名字，頁面中最多能同時運行 10,000 個計時器。當以此計時器名字為參數調用 console.timeEnd() 時，瀏覽器將以毫秒為單位，輸出對應計時器所經過的時間。

語法

console.time(timerName);

console.time("tabletime");
console.log("start");
let sum = 0;
for (let i = 0; i < 10000; i++) {
  sum += i;
}
console.log("end");
console.timeEnd("tabletime");

console-time.png

Console.timeEnd() 結束特定的 計時器 并以豪秒打印其從開始到結束所用的時間

停止一個通過 console.time() 啟動的計時器

語法

console.timeEnd(label);

console.time("tabletime");
console.log("start");
let sum = 0;
for (let i = 0; i < 10000; i++) {
  sum += i;
}
console.log("end");
console.timeEnd("tabletime");

console-time.png

Console.timeLog() 打印特定 計時器 所運行的時間

在控制臺輸出計時器的值，該計時器必須已經通過 console.time() 啟動。

語法

console.timeLog(label);

label
計時器索引。

console.time("tabletime");
let sum = 0;
for (let i = 0; i < 10000; i++) {
  sum += i;
}
console.timeLog();
console.timeLog("tabletime");
console.timeEnd("tabletime");

console.time();
console.timeLog();
console.timeEnd();

console.timeLog("end");

console-timeLog.png

第一個 timeLog 由于沒有 console.time() 啟動, 所以警告 Timer 'default' does not exist;

第二個 timeLog 傳入了有 console.time() 啟動的 label 'tabletime', 所以正常運行

第三個 timeLog 有 console.time() 啟動, 所以正常運行

第四個 timeLog 傳入了 label, 但沒有 對應的 console.time() 來啟動, 所以警告 Timer 'default' is dose not exist

Console.trace() 輸出一個 stack trace

在頁面 console 文檔中查看堆棧跟蹤的詳細介紹和示例

語法

console.trace(); 無參數

console.trace();

console-trace.png

目前整理的常用的 console 用法就這些, 本文參考 MDN
有興趣的可以移步 MDN, 更多有趣的姿勢等你來解鎖, bye !