控制臺 API 為 Web 應(yīng)用程序提供輸入信息到控制臺、創(chuàng)建 JavaScript 文件和啟動調(diào)試會話的方法。

console.assert(expresson,object)

如果指定表達(dá)式返回 false，返回結(jié)果會隨著一個棧跟蹤器輸入到控制臺上。在接下來的示例中，只要當(dāng)文檔中包含的子節(jié)點少于 10 個，斷言消息才會被輸入到控制臺。

 var list =  document.querySelector('#myList');
 console.assert(list.childNodes.length < 10, "List item count is >= 10");

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_assert-failed-list.png" alt="assert-failed-list.png" />

console.clear()

清除控制臺

console.clear();

同樣在清除控制臺可見。

但是，如果 Preserve Logs 是開啟狀態(tài)，當(dāng)一些框架調(diào)用 console.clear()時，它不會做任何事，這會讓你的調(diào)試過程變得更難。"Clear console"在主菜單還是依然起作用的，能清除控制臺的信息。

console.count(label)

這個函數(shù)輸出 count()在同一行用同一個標(biāo)簽調(diào)用的次數(shù)。

下面例子中 每次 login() 函數(shù)被調(diào)用時， count() 也同樣被調(diào)用。

function login(user) {    console.count("Login called");    // login() code...}

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_count.png" alt="count.png" />

在這個例子中，count() 在不同的標(biāo)簽里被調(diào)用，每次返回結(jié)果都是單獨增加（不會累加）。

function login(user) {    console.count("Login called for user '" +  user + "'");    // login() code...}

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_count-unique.png" alt="count-unique.png" />

console.debug(object [, object, ...])

這種方法是與 console.log() 相同的。

console.dir(object)

輸出指定對象的 JavaScript 的描述. 如果被記錄的對象是一個 HTML 元素，那么它的 DOM 對象的屬性被輸出顯示，示例如下：

console.dir(document.body);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_consoledir-body.png" alt="consoledir-body.png" />

你也可以在一個 console.log()語句中使用對象制式（%0）來輸出一個元素的 JavaScript 屬性：

console.log("document body: %O", document.body);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_consolelog-object-formatter.png" alt="consolelog-object-formatter.png" />

在 JavaScript 對象上調(diào)用 console.dir() 同在相同對象上調(diào)用 console.log() 是等效的。他們都以樹的形式輸出對象的 Javascript 屬性。

將它與 console.log()的執(zhí)行進(jìn)行對比，console.log()會以 XML 的格式輸出元素，輸出在 Elements 面板中：

console.log(document.body);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_consolelog-body.png" alt="consolelog-body.png" />

console.dirxml(object)

輸出一個指定對象的 XML 形式，它會在 Elements 面板中顯示。對于 HTML 元素來講，調(diào)用這個方法同調(diào)用 console.log()是等價的。

var list = document.querySelector("#myList");console.dirxml();

• %0是 dir 的簡寫
• %o是和 dir 一樣還是和 dirxnl 一樣取決于對象類型(無 DOM 或 DOM)

console.error(object [, object, ...])

與 console.log() 、console.error() 相似，在該方法被調(diào)用的地方同樣包括一個棧追蹤器。

function connectToServer() {    var errorCode = 1;    if (errorCode) {        console.error("Error: %s (%i)", "Server is  not responding", 500);    }}connectToServer();

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_error-server-not-resp.png" alt="error-server-not-resp.png" />

console.group(object[, object, ...])

以可選標(biāo)題項開始一個新的記錄組。調(diào)用此方法后再調(diào)用 console.groupEnd() 后,所有控制臺輸出輸出在同一個視組。

console.group("Authenticating user '%s'", user);console.log("User authenticated");console.groupEnd();

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_log-group-simple.png" alt="log-group-simple.png" />

你也可以嵌套組：

// New group for authentication:console.group("Authenticating user '%s'", user);// later...console.log("User authenticated", user);// A nested group for authorization:console.group("Authorizing user '%s'", user);console.log("User authorized");console.groupEnd();console.groupEnd();

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_nestedgroup-api.png" alt="nestedgroup-api.png" />

console.groupCollapsed(object[, object, ...])

創(chuàng)建一個初始閉合而不是開放的記錄組，就像用 console.group()一樣

console.groupCollapsed("Authenticating user '%s'", user);console.log("User authenticated");console.groupEnd();console.log("A group-less log trace.");

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_groupcollapsed.png" alt="groupcollapsed.png" />

console.groupEnd()

關(guān)閉最近用 console.group() 或 console.groupCollapsed() 創(chuàng)建的記錄組。見 console.group() 和 console.groupCollapsed() 的例子。

console.info(object [, object, ...])

這個方法與 console.log() 是等效的

console.log(object [, object, ...])

這個方法在控制臺輸出消息。傳遞一個或多個對象作為這個方法的參數(shù)，每一個對象被單獨計算并連接成一個空間分隔的字符串。你傳入 log() 的第一個參數(shù),可能包含格式說明（format specifiers）。一個標(biāo)記字符串由百分號（%），接著一個字母，來表示要應(yīng)用的格式。

DevTools 支持以下格式說明：

基本的例子：

console.log("App started");

下面是使用字符串（%s）和整數(shù)（%d）格式說明插入所包含的變量 userName 和 userPoints 值的例子：

console.log("User %s has %d points", userName, userPoints);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_log-format-specifier.png" alt="log-format-specifier.png" />

下面是一個在相同 DOM 元素中使用元素格式 (%o) 和對象格式 (%0) 的例子：

console.log("%o, %O", document.body, document.body);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_log-object-element.png" alt="log-object-element.png" />

下面的示例使用 %c 格式說明上色的輸出字符串：

console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_log-format-styling.png" alt="log-format-styling.png" />

console.prifile([label])

當(dāng) Chrome DevTools 被打開，用一個可選標(biāo)簽調(diào)用這個函數(shù)來開啟一個 JavaScript CPU 狀態(tài)分析。為了完成這個分析，調(diào)用 console.profileEnd() 方法. 每個分析結(jié)果都會被添加到 Profiles 選項卡中。

在下面的實例中，CPU 狀態(tài)分析在一個函數(shù)入口開始，從而消耗過多的 CPU 資源，而當(dāng)函數(shù)退出時，狀態(tài)分析也隨之結(jié)束。

function processPixels() {  console.profile("Processing pixels");  // later, after processing pixels  console.profileEnd();}

console.profileEnd()

只有一個會話進(jìn)行時，停止當(dāng)前 CPU 的 JavaScript 分析會話，并且輸出結(jié)果到 Profiles 面板。

console.profileEnd()

見 console.profile() 有更多使用示例。

console.time(label)

開始一個新的計時器，與標(biāo)簽關(guān)聯(lián)。當(dāng) console.timeEnd()被相同的標(biāo)簽調(diào)用時，計時器停止計時，在控制臺中顯示的經(jīng)過時間。計時器的值精確到亞毫秒級。

console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {    array[i] = new Object();};console.timeEnd("Array initialize");

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_time-duration.png" alt="time-duration.png" />

注意：傳遞給 time() 和 timeEnd() 方法的字符串必須與定時器預(yù)期的結(jié)束返回的值相符。

console.timeEnd(label)

停止指定標(biāo)簽的計時器，輸出經(jīng)過的時間。

使用實例，見 console.time()

console.timeStamp([label])

這個方法在記錄期間增加了一個事件到時間軸。這可以讓你直觀地在時間戳上關(guān)聯(lián)生成的代碼到其他事件上，如屏幕布局和繪制，這些都被自動添加到時間軸上。

使用 console.timeStamp() 標(biāo)記時間軸的。

console.trace(object)

輸出從這個方法被調(diào)用的那個點的棧追蹤路徑，包括在 Javascript 源代碼中指向特定行的鏈接。計數(shù)器輸出 trace()方法在那個點被調(diào)用的次數(shù)，如下圖屏幕顯示的一樣。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_console-trace.png" alt="console-trace.png" />

向 trace中傳入?yún)?shù)也是可能的，例如：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_console-trace-args.png" alt="console-trace-args.png" />

console.warn(object [, object, ...])

這個方法和 console.log() 很像，但也輸出帶有黃色警告圖標(biāo)的日志消息。

console.warn("User limit reached! (%d)", userPoints);

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_log-warn.png" alt="log-warn.png" />

debugger

全局調(diào)試 （debugger) 功能使 Chrome 停止程序的執(zhí)行，并在它被調(diào)用的行啟動一個調(diào)試會話。它相當(dāng)于在 Chrome DevTools 的 Sources 選項卡設(shè)置 “手動” 斷點。

注意：debugger 命令不是控制臺對象的方法。

在下面的示例中， 當(dāng)一個對象的 brightness() 方法被調(diào)用 JavaScript 調(diào)試器被打開：

brightness : function() {    debugger;    var r = Math.floor(this.red*255);    var g = Math.floor(this.green*255);    var b = Math.floor(this.blue*255);    return (r * 77 + g * 150 + b * 29) >> 8;}

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_debugger.png" alt="debugger.png" />