Chrome開發(fā)工具 控制臺 API 參考

控制臺 API 參考

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

console.assert(expresson,object)

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

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

console.clear()

清除控制臺

console.clear();

同樣在清除控制臺可見。

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

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

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

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

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

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

console.dir(object)

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

console.dir(document.body);

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

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

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

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

console.log(document.body);

console.dirxml(object)

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

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

• %0是 dir 的簡寫
• %o是和 dir 一樣還是和 dirxnl 一樣取決于對象類型(無 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();

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

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

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

你也可以嵌套組：

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

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

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

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

console.groupEnd()

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

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

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

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

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

DevTools 支持以下格式說明：

基本的例子：

console.log("App started");

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

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

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

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

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

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

console.prifile([label])

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

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

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

console.profileEnd()

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

console.profileEnd()

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

console.time(label)

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

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");

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

console.timeEnd(label)

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

使用實(shí)例，見 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ù)，如下圖屏幕顯示的一樣。

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

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

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

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

debugger

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

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

在下面的示例中， 當(dāng)一個(gè)對象的 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;}