語言： TypeScript

在線工具： PlayGround

console

---

console 對象是一個非常強大的控制臺日志顯示工具， 可以幫助我們在瀏覽器中調試代碼。

注： console不屬于TypeScript的語法，而是由JavaScript封裝的內置對象。

簡單的示例：

let array = [1, 2, 3, 4, 5];
console.log(array.toString());      // "1,2,3,4,5" 
console.log("hello", "TypeScript"); // "hello",  "TypeScript" 

提供的接口有：

接口	說明
assert()	斷言，如果斷言為false，則將信息寫入控制臺
clear()	清空控制臺，并輸出 Console was cleared
count()	以參數為標識記錄調用的次數，調用時在控制臺打印標識以及調用次數
countReset()	重置指定標簽的計數器值
debug()	在控制臺打印一條 debug 級別的消息
dir()	顯示一個由特定的 Javascript 對象列表組成的可交互列表
dirxml()	打印 XML/HTML 元素表示的指定對象，否則顯示 JavaScript 對象視圖
error()	打印一條錯誤信息
group()	創建一個新的內聯分組, 后續所有打印內容將會以子層級的形式展示
groupCollapsed()	創建一個新的內聯分組，同group類似，但它打印出來的內容默認是折疊的
groupEnd()	關閉內聯分組，與group或groupCollapsed配合使用
info()	打印資訊類說明信息
log()	打印內容的通用方法
table()	將列表型的數據打印成表格
time()	啟動一個以入參作為特定名稱的定時器
timeEnd()	結束特定的定時器并以毫秒打印其從開始到結束所用的時間
timeLog()	打印特定定時器所運行的時間
timeStamp()	添加一個標記到瀏覽器的 Timeline 或 Waterfall 工具
trace()	輸出堆棧信息
warn()	輸出警告消息到控制臺

注： 更多內容可參考: Console API

示例

---

在項目中為標明不同類型信息的重要程度，主要調用的幾個接口：

• info()/log() 輸出日志，灰色或黑色顯示，用于表示正在進行的操作
• debug() 測試日志，黑色顯示，用于表示做的測試操作
• warn() 警告日志，黃色顯示，表示開發者最好處理，但不處理也不會影響運行
• error() 錯誤日志，紅色顯示，表示開發者必須解決該問題

文字不同顏色的顯示，主要得益于console 對象支持使用%c為內容定義樣式，示例：

console.info("%cThis is info message", "color:gray;");
console.log("%cThis is log message", "color:block;");
console.debug("%cThis is debug message", "color:green;");
console.warn("%cThis is warn message", "color:yellow;");
console.error("%cThis is error message", "color:red;");

其他的一些示例如下：

• assert 斷言，如果條件為false， 則輸出日志

let obj = null;
console.assert(obj, "Error: obj is null");
// Error: obj is null

• count()/countReset() 輸出調用的次數或重置

function log() {console.count("count");
}
log();
log();
console.countReset("count");
log();// count: 1
// count: 2
// count: 1

• dir() 用于輸出JavaScript對象表
  

• **time()/timeLog()/timeEnd()**記錄某一個操作的運行毫秒

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

• table() 將數據以表格的形式顯示

待定…