使用控制臺(tái)

利用控制臺(tái)可以讓你：

• 日志診斷信息可以幫你分析 web 頁(yè)面或者應(yīng)用上的錯(cuò)誤
• 輸入命令來(lái)與文檔以及 Chrome 開(kāi)發(fā)者工具進(jìn)行交互

你可能也會(huì)自己評(píng)估一般的 JavaScript 表達(dá)式。這個(gè)文檔提供了一個(gè)控制臺(tái)的預(yù)覽和常規(guī)使用的概述。你可以瀏覽 Console API 和 Conmmand Line API 引用材料來(lái)理解更多的功能。

基礎(chǔ)操作

打開(kāi)控制臺(tái)

Javascript 控制臺(tái)可以在兩個(gè)地方打開(kāi)?？刂婆_(tái)面板是主要的進(jìn)入點(diǎn)。它同樣也可以在其他任何面板中通過(guò)使用抽屜來(lái)打開(kāi)。打開(kāi)控制面板，用下面的選擇下面提供的一種方式：

• 使用鍵盤(pán)快捷鍵 Command + Option + J（Mac） 或者 Control + Shitf + J（Windows/Linux）。
• 選擇 > More Tools > JavaScript Console.

一個(gè)干凈的控制臺(tái)界面

要打開(kāi)抽屜式控制臺(tái)，你需要在鍵盤(pán)上按下 Esc 鍵或者點(diǎn)擊開(kāi)發(fā)者工具窗口右上角的 Show Drawer 按鈕。

在元素面板上的抽屜式控制臺(tái)

清除控制臺(tái)歷史信息

要清除控制臺(tái)歷史信息，你需要這么做：

• 在控制臺(tái)中右鍵或者按住 Ctrl 點(diǎn)擊然后從上下文菜單中選擇 Clear Console
• shell 提示符中輸入 clear() 命令行 API。
• 在 Javascript 中執(zhí)行 console.clear() 調(diào)用控制臺(tái) API。
• 使用鍵盤(pán)快捷鍵 Cmd + K,^ + L(Mac)Ctrl + L（ Linux 和 Windows ）。

信息棧

控制臺(tái)會(huì)將以棧的形式持續(xù)輸出相同的信息。這使得提供給你的信息會(huì)盡可能的簡(jiǎn)短。

禁止時(shí)間戳（默認(rèn)）	允許時(shí)間戳

兩種棧狀態(tài)的例子

測(cè)試控制臺(tái)模式的簡(jiǎn)單代碼

msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])

選擇幀

控制臺(tái)可以在頁(yè)面的不同幀中運(yùn)行。主頁(yè)是文檔的最外層幀。以 iframe 元素為例，它將會(huì)創(chuàng)造出它自己的上下文框架。你也可以通過(guò)使用在過(guò)濾按鈕旁邊的下拉框來(lái)指定這個(gè)幀。

選擇一個(gè)次要的幀

這張圖片展示了窗口源在頂級(jí)幀和選中的次要幀中改變。

使用控制臺(tái) API

控制臺(tái) API 是一組方法的集合，它由開(kāi)發(fā)者工具定義的全局 console 對(duì)象提供。API 的其中一個(gè)主要目的就是在你的應(yīng)用運(yùn)行的時(shí)候輸出日志信息到控制臺(tái)中。你也可以在控制臺(tái)中為輸出信息分組，以減少視覺(jué)混亂。

向控制臺(tái)輸出

console.log() 方法會(huì)使用一個(gè)或者多個(gè)表達(dá)式來(lái)作為參數(shù)，之后會(huì)將他們當(dāng)前的值輸出到控制臺(tái)中。

一個(gè)簡(jiǎn)單的向控制臺(tái)輸出的例子：

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Node count: " + a.childNodes.length);

一個(gè)在控制臺(tái)中輸出的例子

多個(gè)參數(shù)會(huì)串聯(lián)到有限行中。

多個(gè)參數(shù)的 console.log()

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

多重參數(shù)的 console.log() 的輸出。

錯(cuò)誤和警告

錯(cuò)誤和警告就跟一般的日志信息的顯示一樣。不同的地方在于 error() 和 warn() 通過(guò)它們自己樣式來(lái)吸引注意力。console.error() 方法展示的是一個(gè)紅色的圖標(biāo)并且伴有紅色的信息文字。console.warn() 方法展示的是黃色的圖標(biāo)和黃色的信息文字。

使用控制臺(tái) warn 和 error 方法。

使用 error() 方法。

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

connectToServer() 如何在控制臺(tái)中顯示。

使用 warn() 方法

if(a.childNodes.length < 3 ) {
    console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

警告輸出的例子。

斷言

console.assert() 方法僅僅只當(dāng)它的第一個(gè)參數(shù)為 false 時(shí)才顯示一個(gè)錯(cuò)誤信息字符串（它的第二個(gè)參數(shù)）

一個(gè)簡(jiǎn)單的斷言并且如何展示的例子。

在下面的代碼中，如果在列表中的子節(jié)點(diǎn)的數(shù)量超過(guò) 500，將會(huì)在控制臺(tái)中引起錯(cuò)誤信息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

一個(gè)失敗斷言如何在控制臺(tái)中顯示。

過(guò)濾控制臺(tái)的輸出

你可以通過(guò)過(guò)濾器選項(xiàng)中的安全級(jí)別來(lái)過(guò)濾控制臺(tái)的輸出。通過(guò)控制面板的左上角的過(guò)濾器圖標(biāo)來(lái)激活過(guò)濾器。下面的過(guò)濾器選項(xiàng)是可以選擇的：

過(guò)濾器只顯示錯(cuò)誤級(jí)別的信息。

輸出分組

你可以通過(guò)分組命令把相關(guān)聯(lián)的輸出信息分在一起。group 命令通過(guò)一個(gè)字符串的參數(shù)來(lái)給你的組命名?？刂婆_(tái)將會(huì)把所有所有的輸出信息組合到一塊。要結(jié)束分組，你只需要調(diào)用 groupEnd 即可。

一個(gè)分組的例子

示例代碼：

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

示例輸出

日志信息的分組可能還會(huì)相互嵌套，這對(duì)于在一個(gè)狹小空間一次性看大量信息來(lái)說(shuō)非常有用。

這個(gè)示例代碼展示了一個(gè)登錄程序中驗(yàn)證階段的日志分組。

代碼如下:

var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
    console.log("User '%s' was authenticated", user);
    // Start nested group
    console.group("Authorizing user '%s'", user);
    if (authorized) {
        console.log("User '%s' was authorized.", user);
    }
    // End nested group
    console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

控制臺(tái)中的嵌套分組輸出信息。

當(dāng)你對(duì)輸出信息進(jìn)行多次分組以后，你就不用直接看到全部的輸出信息了，這是非常有用的。你可以通過(guò)調(diào)用 groupCollapsed()，代替之前使用的 group() 來(lái)自動(dòng)為信息分組。

console.groupCollapsed() 的使用方式

示例代碼：

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
    ...
}
console.groupEnd();

groupCollapsed() 輸出信息

瀏覽結(jié)構(gòu)化數(shù)據(jù)

table() 方法提供一個(gè)簡(jiǎn)單的方法來(lái)查看相似數(shù)據(jù)對(duì)象。這將給一個(gè)數(shù)據(jù)提供屬性并且創(chuàng)建一個(gè)頭。行數(shù)據(jù)將會(huì)從每一個(gè)索引屬性值中獲取。

控制臺(tái)中一個(gè)使用 2 個(gè)數(shù)組的示例的顯示。

示例代碼：

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

輸出的示例代碼的結(jié)果：

table() 中的第二個(gè)參數(shù)是可選項(xiàng)。你可以定義任何你想顯示的屬性字符串?dāng)?shù)組。

一個(gè)使用了對(duì)象集合的控制臺(tái)輸出表。

示例代碼：

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);

示例代碼的輸出:

字符串的替換和格式化

任何日志方法的第一個(gè)參數(shù)可能都會(huì)包含一個(gè)或者多個(gè)格式說(shuō)明符。一個(gè)說(shuō)明符由一個(gè) % 符號(hào)和后面跟著的字符組成，這個(gè)字符用來(lái)定義用于格式化的值。這個(gè)參數(shù)跟隨的字符串就是占位符中所要顯示的。

下面的例子使用了字符串和數(shù)字格式來(lái)插入要輸出的字符串。你將會(huì)看到在控制臺(tái)中 Sam 有 100 個(gè)點(diǎn)。

console.log("%s has %d points", "Sam", 100);

完整的格式化說(shuō)明符如下：

這個(gè)例子使用了數(shù)字占位符來(lái)格式化 document.childNodes.length 的值。它也同樣使用了浮點(diǎn)類(lèi)型的占位符來(lái)格式化 Date.now();

代碼如下：

console.log("%s has %d points", "Sam", 100);

示例替代的輸出

示例代碼的輸出預(yù)覽

將 DOM 元素格式化成 JavaScript 對(duì)象

當(dāng)你想要在控制臺(tái)中記錄一個(gè) DOM 元素，就顯示成了 XML 格式。在元素面板中也會(huì)是同樣的顯示。要顯示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符來(lái)替換成你的 JavaScript。

兩種不同顯示的區(qū)別：

log() 視圖	dir() 視圖

使用 CSS 樣式來(lái)更改控制臺(tái)輸出形式

CSS 格式說(shuō)明符可以修改在控制臺(tái)中輸出的樣式。以你要修飾的文字配上占位符開(kāi)始，然后在第二個(gè)參數(shù)中寫(xiě)上你要展示的風(fēng)格。

更改日志樣式

示例代碼：

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

示例代碼的輸出結(jié)果。

計(jì)算時(shí)間開(kāi)銷(xiāo)

通過(guò) time() 方法可以啟動(dòng)一個(gè)計(jì)時(shí)器。你必須輸入一個(gè)字符串來(lái)識(shí)別時(shí)間的標(biāo)記。當(dāng)你要結(jié)束計(jì)算的時(shí)候，使用 timeEnd() 方法，并且傳遞一個(gè)相同的字符串給構(gòu)造器?？刂婆_(tái)會(huì)在 timeEnd() 方法結(jié)束的時(shí)候，記錄下標(biāo)簽以及時(shí)間的花銷(xiāo)。

關(guān)于 JavaScript 執(zhí)行時(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");

在控制臺(tái)上的輸出結(jié)果：

當(dāng) time() 方法正在執(zhí)行期間，將會(huì)生成一個(gè) 時(shí)間軸 記錄并為其做出注解。這對(duì)于追蹤應(yīng)用的使用以及其來(lái)源非常有用。

time() 執(zhí)行時(shí)間軸上的注解是如何顯示的。

制作時(shí)間軸

時(shí)間軸面板提供了關(guān)于引擎時(shí)間開(kāi)銷(xiāo)的完整概述。你可以在控制臺(tái)中調(diào)用 timeStamp() 添加一個(gè)標(biāo)記到時(shí)間軸中。這是將你的應(yīng)用的事件和其他事件相關(guān)聯(lián)的一個(gè)簡(jiǎn)單的辦法。

注意：只有在時(shí)間軸記錄正在運(yùn)行的時(shí)候 timeStamp() 方法才能使用。

timeStamp() 在下面的地方給時(shí)間軸做注解：

• 在時(shí)間軸的總結(jié)和詳細(xì)視圖中的黃色垂線處
• 在事件列表中添加了一個(gè)記錄

示例代碼如下：

function AddResult(name, result) {
    console.timeStamp("Adding result");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

時(shí)間軸中的時(shí)間戳

在 JavaScript 中設(shè)置斷點(diǎn)

調(diào)試器 聲明將會(huì)開(kāi)啟一個(gè)調(diào)試會(huì)話。這就相當(dāng)于在這一行中的腳本上設(shè)置一個(gè)斷點(diǎn)。

使用 brightness() 開(kāi)啟調(diào)試會(huì)話。

示例代碼：

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

示例代碼的輸出：

記錄語(yǔ)句的執(zhí)行

count() 方法將會(huì)記錄提供的字符串以及該字符串在一段時(shí)間內(nèi)的出現(xiàn)次數(shù)。這個(gè)字符串可能含有動(dòng)態(tài)的內(nèi)容。當(dāng)已經(jīng)傳給 count() 一個(gè)完全相同的字符串時(shí)，計(jì)數(shù)就會(huì)增加。

使用動(dòng)態(tài)內(nèi)容的 count() 例子：

示例代碼：

function login(user) {
    console.count("Login called for user " + user);
}
users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];
users.forEach(function(element, index, array) {
    login(element);
});
login(users[0]);

示例代碼使出的內(nèi)容：

使用命令行 API

命令行比一個(gè)簡(jiǎn)單的日志輸出目錄要強(qiáng)大的多。它在當(dāng)前網(wǎng)頁(yè)中，同樣是一個(gè)全終端的提示。命令行 API有以下的一些特征：

• 方便選擇 DOM 元素的函數(shù)
• 用來(lái)控制 CPU 檢測(cè)的函數(shù)
• 一些控制臺(tái) API 的匿名方法
• 顯示器事件
• 給一個(gè)物體注冊(cè)視圖事件的監(jiān)聽(tīng)

計(jì)算表達(dá)式

當(dāng)你按下 Enter 的時(shí)候，控制臺(tái)將會(huì)計(jì)算任何你提供的 JavaScript 表達(dá)式。有兩種完成方式，一種是全自動(dòng)，一種是使用tab。只要你輸入一個(gè)表達(dá)式，就會(huì)提供名稱(chēng)提示。如果有多個(gè)匹配的選項(xiàng)，使用 ↑ 和 ↓ 來(lái)在它們之間循環(huán)。按下 → 將會(huì)選擇當(dāng)前的選項(xiàng)。如果只有一個(gè)選項(xiàng)，按下 Tab 鍵也會(huì)選中當(dāng)前的選項(xiàng)。

一些示例表達(dá)式在控制臺(tái)的顯示

選擇元素

有一些選擇元素的快捷鍵。相比普通的使用方式，這些快捷鍵為你節(jié)省了大量時(shí)間。

目標(biāo)選擇的例子：

$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.

檢查 DOM 元素和 JavaScript 堆對(duì)象

inspect()函數(shù)可以讓 DOM 元素或者是 JavaScript 引用作為一個(gè)參數(shù)。如果你提供一個(gè) DOM 元素，開(kāi)發(fā)者工具將會(huì)跳轉(zhuǎn)到元素面板并且顯示那個(gè)元素。如果你提供一個(gè) JavaScript 引用，那么將會(huì)轉(zhuǎn)到概述面板。

當(dāng)這段代碼在你的頁(yè)面上執(zhí)行，它將會(huì)抓取數(shù)字，然后將其顯示在元素面板。這是采取了 $_ 屬性的優(yōu)點(diǎn)來(lái)估算這個(gè)輸出的表達(dá)式。

$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

使用最近選擇的元素和對(duì)象

控制臺(tái)存儲(chǔ)了最近的 5 個(gè)元素和對(duì)象。一旦你在元素面板中選中了元素，或者是在概述面板中選中了一個(gè)對(duì)象，就會(huì)被記錄在歷史棧中。$x 提供了一個(gè)進(jìn)入歷史棧的入口。要注意的是計(jì)算機(jī)是從 0 開(kāi)始計(jì)數(shù)的。這就意味著最先選中的是 $0,而最后選中的是 $4。

監(jiān)聽(tīng)事件

monitorEvents() 方法讓開(kāi)發(fā)者工具記錄特定目標(biāo)的日志信息。第一個(gè)參數(shù)是監(jiān)聽(tīng)的對(duì)象。如果第二個(gè)參數(shù)沒(méi)有提供參數(shù)，則所有事件都返回。為了具體說(shuō)明你要監(jiān)聽(tīng)的事件，你需要提供一個(gè)字符串或者一個(gè)字符串?dāng)?shù)組作為第二個(gè)參數(shù)。

在頁(yè)面的 body 上監(jiān)聽(tīng)點(diǎn)擊時(shí)間。

monitorEvents(document.body, "click");

如果開(kāi)發(fā)者工具支持的某個(gè)事件類(lèi)型映射到了標(biāo)準(zhǔn)事件名稱(chēng)上，那么該類(lèi)型的時(shí)間會(huì)被監(jiān)聽(tīng)。控制臺(tái) API 有一個(gè)完整的從事件到事件類(lèi)型上的映射。

停止對(duì) body 對(duì)象的監(jiān)聽(tīng)，可以調(diào)用 unmonitorEvents() 方法并且告訴它要停止監(jiān)聽(tīng)的對(duì)象。

停止對(duì) body 對(duì)象的監(jiān)聽(tīng)

unmonitorEvents(document.body);

控制 CPU 檢測(cè)

profile() 函數(shù)會(huì)開(kāi)啟 JavaScript CPU 檢測(cè)。你也可以通過(guò)輸入一個(gè)字符串來(lái)為檢測(cè)命名。要停止檢測(cè)就調(diào)用 profileEnd() 方法。

創(chuàng)建一個(gè)沒(méi)有命名的檢測(cè)。

profile()
profileEnd()

示例檢測(cè)：

如果你提供了一個(gè)標(biāo)簽，該標(biāo)簽會(huì)被當(dāng)做標(biāo)題。如果你創(chuàng)建了多個(gè)配置文件，并且它們用的是同一個(gè)標(biāo)簽，那么它們將會(huì)被分到統(tǒng)一組下。

示例代碼：

profile("init")
profileEnd("init")
profile("init")
profileEnd("init")

在配置面板上的結(jié)果：

多個(gè) CPU 配置文件可以同時(shí)操作。并且，你不需要按照創(chuàng)建順序關(guān)閉它們。

按照相同的順序嵌套的關(guān)閉語(yǔ)句：

profile("A")
profile("B")
profileEnd("A")
profileEnd("B")

按照交替的順序嵌套的關(guān)閉語(yǔ)句：

profile("A")
profile("B")
profileEnd("B")
profileEnd("A")

設(shè)置

在開(kāi)發(fā)者工具的設(shè)置窗口中的常規(guī)選項(xiàng)卡里你可以修改四個(gè)控制臺(tái)設(shè)置。

總結(jié)

Chrome 開(kāi)發(fā)者工具提供了一個(gè)強(qiáng)大的控制臺(tái)?，F(xiàn)在你應(yīng)該已經(jīng)知道了如何開(kāi)始使用這個(gè)工具來(lái)存儲(chǔ)信息以及獲取元素。該工具的實(shí)用性為你提供了無(wú)限的可能性，以此工具為基石，你可以構(gòu)筑你的 web 樂(lè)園。