使用控制臺

利用控制臺可以讓你：

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

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

基礎(chǔ)操作

打開控制臺

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

• 使用鍵盤快捷鍵 Command + Option + J（Mac） 或者 Control + Shitf + J（Windows/Linux）。
• 選擇 http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-chrome-menu.png" alt="chrome-menu" /> > More Tools > JavaScript Console.

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-console1.png" alt="console1" /> 一個干凈的控制臺界面

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-console-in-drawer.png" alt="console-in-drawer" /> 在元素面板上的抽屜式控制臺

清除控制臺歷史信息

要清除控制臺歷史信息，你需要這么做：

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

信息棧

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

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

測試控制臺模式的簡單代碼

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

選擇幀

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-frame-selection.png" alt="frame-selection" /> 選擇一個次要的幀

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-locations-between-frames.png" alt="locations-between-frames" /> 這張圖片展示了窗口源在頂級幀和選中的次要幀中改變。

使用控制臺 API

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

向控制臺輸出

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

一個簡單的向控制臺輸出的例子：

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-log-basic.png" alt="log-basic" /> 一個在控制臺中輸出的例子

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-log-multiple.png" alt="log-multiple" /> 多重參數(shù)的 console.log() 的輸出。

錯誤和警告

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

使用控制臺 warn 和 error 方法。

使用 error() 方法。

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

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

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

使用 warn() 方法

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-warning-too-few-nodes.png" alt="warning-too-few-nodes" /> 警告輸出的例子。

斷言

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

一個簡單的斷言并且如何展示的例子。

在下面的代碼中，如果在列表中的子節(jié)點的數(shù)量超過 500，將會在控制臺中引起錯誤信息。

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-assert-failed.png" alt="assert-failed" /> 一個失敗斷言如何在控制臺中顯示。

過濾控制臺的輸出

你可以通過過濾器選項中的安全級別來過濾控制臺的輸出。通過控制面板的左上角的過濾器圖標(biāo)來激活過濾器。下面的過濾器選項是可以選擇的：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-filter-errors.png" alt="filter-errors" /> 過濾器只顯示錯誤級別的信息。

輸出分組

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

一個分組的例子

示例代碼：

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

示例輸出

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-group.png" alt="group" />

日志信息的分組可能還會相互嵌套，這對于在一個狹小空間一次性看大量信息來說非常有用。

這個示例代碼展示了一個登錄程序中驗證階段的日志分組。

代碼如下:

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-nestedgroup.png" alt="nestedgroup" /> 控制臺中的嵌套分組輸出信息。

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

console.groupCollapsed() 的使用方式

示例代碼：

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-groupcollapsed.png" alt="groupcollapsed" /> groupCollapsed() 輸出信息

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

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

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

示例代碼：

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-table-arrays.png" alt="table-arrays" />

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

一個使用了對象集合的控制臺輸出表。

示例代碼：

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

示例代碼的輸出:

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-table-people-objects.png" alt="table-people-objects" />

字符串的替換和格式化

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

下面的例子使用了字符串和數(shù)字格式來插入要輸出的字符串。你將會看到在控制臺中 Sam 有 100 個點。

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

完整的格式化說明符如下：

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

代碼如下：

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

示例替代的輸出

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

將 DOM 元素格式化成 JavaScript 對象

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

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

使用 CSS 樣式來更改控制臺輸出形式

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

更改日志樣式

示例代碼：

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-format-string.png" alt="format-string" /> 示例代碼的輸出結(jié)果。

計算時間開銷

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

關(guān)于 JavaScript 執(zhí)行時間的示例代碼以及輸出：

示例代碼：

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

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

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-time-annotation-on-timeline.png" alt="time-annotation-on-timeline" /> time() 執(zhí)行時間軸上的注解是如何顯示的。

制作時間軸

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

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

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

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

示例代碼如下：

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-timestamp2.png" alt="timestamp2" /> 時間軸中的時間戳

在 JavaScript 中設(shè)置斷點

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

使用 brightness() 開啟調(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/using-the-console-debugger.png" alt="debugger" />

記錄語句的執(zhí)行

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

使用動態(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)容：

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

使用命令行 API

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

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

計算表達(dá)式

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-evaluate-expressions.png" alt="evaluate-expressions" /> 一些示例表達(dá)式在控制臺的顯示

選擇元素

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

目標(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 堆對象

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

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

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

使用最近選擇的元素和對象

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

監(jiān)聽事件

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

在頁面的 body 上監(jiān)聽點擊時間。

monitorEvents(document.body, "click");

如果開發(fā)者工具支持的某個事件類型映射到了標(biāo)準(zhǔn)事件名稱上，那么該類型的時間會被監(jiān)聽。控制臺 API 有一個完整的從事件到事件類型上的映射。

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

停止對 body 對象的監(jiān)聽

unmonitorEvents(document.body);

控制 CPU 檢測

profile() 函數(shù)會開啟 JavaScript CPU 檢測。你也可以通過輸入一個字符串來為檢測命名。要停止檢測就調(diào)用 profileEnd() 方法。

創(chuàng)建一個沒有命名的檢測。

profile()
profileEnd()

示例檢測：

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-profile-panel.png" alt="profile-panel" />

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

示例代碼：

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

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

http://wiki.jikexueyuan.com/project/chrome-devtools/images/using-the-console-profile-panel-2.png" alt="profile-panel-2" />

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

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

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

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

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

設(shè)置

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

總結(jié)

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