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

console.assert(expresson,object)

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

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

清除控制臺(tái)

console.clear();

同樣在清除控制臺(tái)可見(jiàn)。

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

console.count(label)

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

下面例子中 每次 login() 函數(shù)被調(diào)用時(shí)， 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" />

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

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)

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

console.dir(document.body);

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

你也可以在一個(gè) console.log()語(yǔ)句中使用對(duì)象制式（%0）來(lái)輸出一個(gè)元素的 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 對(duì)象上調(diào)用 console.dir() 同在相同對(duì)象上調(diào)用 console.log() 是等效的。他們都以樹(shù)的形式輸出對(duì)象的 Javascript 屬性。

將它與 console.log()的執(zhí)行進(jìn)行對(duì)比，console.log()會(huì)以 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)

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

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

• %0是 dir 的簡(jiǎn)寫(xiě)
• %o是和 dir 一樣還是和 dirxnl 一樣取決于對(duì)象類型(無(wú) DOM 或 DOM)

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

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

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)題項(xiàng)開(kāi)始一個(gè)新的記錄組。調(diào)用此方法后再調(diào)用 console.groupEnd() 后,所有控制臺(tái)輸出輸出在同一個(gè)視組。

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)建一個(gè)初始閉合而不是開(kāi)放的記錄組，就像用 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)建的記錄組。見(jiàn) console.group() 和 console.groupCollapsed() 的例子。

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

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

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

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

DevTools 支持以下格式說(shuō)明：

基本的例子：

console.log("App started");

下面是使用字符串（%s）和整數(shù)（%d）格式說(shuō)明插入所包含的變量 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" />

下面是一個(gè)在相同 DOM 元素中使用元素格式 (%o) 和對(duì)象格式 (%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 格式說(shuō)明上色的輸出字符串：

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 被打開(kāi)，用一個(gè)可選標(biāo)簽調(diào)用這個(gè)函數(shù)來(lái)開(kāi)啟一個(gè) JavaScript CPU 狀態(tài)分析。為了完成這個(gè)分析，調(diào)用 console.profileEnd() 方法. 每個(gè)分析結(jié)果都會(huì)被添加到 Profiles 選項(xiàng)卡中。

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

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

console.profileEnd()

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

console.profileEnd()

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

console.time(label)

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

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() 方法的字符串必須與定時(shí)器預(yù)期的結(jié)束返回的值相符。

console.timeEnd(label)

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

使用實(shí)例，見(jiàn) console.time()

console.timeStamp([label])

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

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

console.trace(object)

輸出從這個(gè)方法被調(diào)用的那個(gè)點(diǎn)的棧追蹤路徑，包括在 Javascript 源代碼中指向特定行的鏈接。計(jì)數(shù)器輸出 trace()方法在那個(gè)點(diǎn)被調(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, ...])

這個(gè)方法和 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)用的行啟動(dòng)一個(gè)調(diào)試會(huì)話。它相當(dāng)于在 Chrome DevTools 的 Sources 選項(xiàng)卡設(shè)置 “手動(dòng)” 斷點(diǎn)。

注意：debugger 命令不是控制臺(tái)對(duì)象的方法。

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

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" />