Using the Console[譯]

因爲最近的項目須要大量用到瀏覽器端的js編碼和調試，因此仔細閱讀了一下Chrome對於開發者工具中js部分的說明。雖然原來也用這個工具，但讀後仍然以爲受益不淺。因而抽空翻譯一下，與你們分享。

本人英文水平較渣，若有不妥之處，還請不吝賜教。

 

JavaScript Console 爲開發人員測試網頁和應用提供了兩種主要的功能：

• 提供了一個經過Console API，好比console.log()和 console.profile()，來顯示診斷信息的地方。
• 提供了一個讓你可以經過輸入命令與html文檔和Chrome開發者工具交互的shell。你能在Console中直接對錶達式求值，還能使用 Command Line API提供的各類方法，好比用 $() 命令選擇元素, 或者用 profile() 命令開始對CPU資源進行監控分析。

這篇文章將向您展現這兩類API的概況和一些基本用法. 您也能夠瀏覽 Console API 和 Command Line API 的使用手冊。

 

Basic operation

Opening the Console

Clearing the console history

Console settings

Using the Console API

Writing to the console

Errors and warnings

Assertions

Filtering console output

Grouping output

String substitution and formatting

Formatting DOM elements as JavaScript objects

Styling console output with CSS

Measuring how long something takes

Marking the Timeline

Setting breakpoints in JavaScript

Using the Command Line API

Evaluating expressions

Selecting elements

Inspecting DOM elements and JavaScript heap objects

Accessing recently selected elements and objects

Monitoring events

Controlling the CPU profiler

基本操做

打開Console

經過Chrome DevTools，咱們有兩種方式打開JavaScript Console：獨立的Console標籤頁, 或者在其餘標籤頁（好比Element標籤頁或Source標籤頁）中以分離視圖的方式顯示。

咱們能夠經過下面這些方法中的一種打開Console標籤頁：

• 經過鍵盤快捷鍵打開，Command - Option - J (Mac) 或者Control -Shift -J (Windows/Linux)。
• 經過菜單打開， View > Developer > JavaScript Console。

若是須要在其餘標籤頁上切換Console的開啓狀態, 能夠在鍵盤上按Esc鍵, 或者點擊Chrome DevTools窗口左下角的Show/Hide Console 按鈕。下面的這幅屏幕截圖中Console被以分離視圖的形式顯示在Element標籤頁面板中。

清除Console的歷史信息

能夠經過如下辦法中的一個清除Console的歷史信息：

• 在Console窗口的任何位置點擊鼠標右鍵，並在打開的右鍵菜單中選擇Clear Console。
• 在shell prompt中輸入並執行 clear() 命令行API。
• 經過JavaScript調用 console.clear() Console API。
• 使用鍵盤快捷鍵 ⌘K 或 ⌃L (Mac)， Control - L (Windows and Linux)。

在默認狀態下，Console歷史信息會在你跳轉到其餘頁面時自動清除。你能夠經過在設置對話框的Console區域啓用 Preserve log upon navigation來改變這一行爲 (參考Console preferences)。

Console 設置

在DevTools 設置對話框的General標籤頁中有兩個關於Console的全局設置項：

• Log XMLHTTPRequests——它決定了是否將每一個XMLHTTPRequest請求都顯示在Console面板中。
• Preserve log upon navigation——它決定了當你跳轉到其餘頁面時是否保留當前頁面的console歷史信息。

默認狀態下，這兩個設置項都是關閉狀態的。

你還能夠經過在Console的任何區域點擊鼠標右鍵所顯示的右鍵菜單中更改這兩個設置項。

使用Console API

Console API是一組由全局對象console所提供的方法的集合，這個全局對象是有DevTools定義的。這些API的一個主要功能就是在你的程序運行時往console區域 打印信息(好比一個屬性值，一個完整的對象或者一個DOM元素) 。你還能對console區域的信息進行可視化的分組以免混亂的信息顯示。

向console區域輸出信息

console.log() 能夠支持傳入一個或多個表達式做爲參數，它會把傳入的參數輸出到console區域。好比：

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

除了像上面那樣用+將表達式連接起來, 你還能夠把這些表達式分別做爲一個獨立的參數傳給此方法，他們會被合併爲一行，並用空格分隔開。

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

錯誤和警告

console.error()方法會在顯示紅色信息的同時顯示一個紅色的圖標。

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

console.warn()方法會在現實信息的同時顯示一個黃色的圖標。

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

斷言

console.assert() 方法會在他的第一個參數表達式的值爲false時顯示一條錯誤信息（就是他的第二個參數）。舉個栗子，在下面的示例中，當list元素中的子元素數目大於500時就會向console區域輸出一條錯誤信息。

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

過濾console輸出信息

你能夠經過選擇Console窗口下方的過濾選項來快速地經過輸出信息的嚴重等級來過濾輸出的信息。以下圖所示：

過濾選項：

• All——顯示全部的輸出信息。
• Errors——只顯示經過console.error()方法輸出的信息。
• Warnings——只顯示經過console.warn()方法輸出的信息。
• Logs——只顯示經過 console.log()，console.info()和console.debug()方法輸出的信息。
• Debug——只顯示經過console.timeEnd()方法輸出的信息。

對輸出信息分組

你能夠經過console.group()和groupEnd()命令對相關的console輸出信息進行分組顯示。

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

你還能夠嵌套分組。好比在下面的例子，在登入過程當中建立了一個認證信息分組。若是用戶認證經過，就會在認證信息分組中再建立一個信息分組。

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

若是要建立一個在初始時處於摺疊狀態的信息分組，就用console.groupCollapsed()方法，而不是console.group()方法,以下所示：

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

格式字符串和字符串格式化

你傳給任何console信息輸出方法(好比log()或error())的第一個參數均可以包含一個或多個格式字符串。一個格式字符串由一個%符號和緊跟其後的一個字母構成，這個字母表明瞭將要應用到值上面的一種特定格式(好比%s表明字符串)。格式字符串還標識出了在哪裏替換成後面的參數值。

下面的例子演示了用%s (字符串)和%d (整數)格式字符串將值插入到輸出的字符串中。

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

這個表達式將會在console區域輸出"Sam has 100 points"。

下面的表格列出了全部受支持的格式字符串和他們說表明的含義：

Format specifier	Description
%s	將值格式化爲字符串。
%d or %i	將值格式化爲整數。
%f	將值格式化爲浮點數。
%o	將值格式化爲可展開的DOM元素(就像在Elements面板中同樣)。
%O	將值格式化爲可展開的JavaScript對象。
%c	將第二個參數說知道的css規則應用到輸出信息。

下面這個例子中 %d格式字符串會被document.childNodes.length的值替換，並顯示爲一個整數;而%f格式字符串則被Date.now()的值替換，並顯示爲一個浮點數。

console.log("Node count： %d, and the time is %f.", document.childNodes.length, Date.now());

將DOM元素格式化爲JavaScript對象

默認狀態下，當你將一個DOM元素輸出到console區域時，它會像在Elements面板中同樣顯示爲XML格式：

console.log(document.body.firstElementChild)

你還能夠用console.dir()方法將DOM元素輸出爲JavaScript樣式：

console.dir(document.body.firstElementChild);

你還能夠用console.log()方法配合%O 格式字符串以達到一樣的效果：

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

對console輸出信息應用CSS樣式

你能夠用%c格式字符串將自定義CSS 規則應用到任何你用console.log()或相似的方法輸出到Console的信息上。

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

測量花費的時間

你能夠用console.time()和console.timeEnd()方法測量一個函數或操做完成所需的時間。你能夠在開始計時的地方調用console.time()方法，而後調用console.timeEnd()方法中止計時。這兩次調用之間所花費的時間將被顯示在console區域。

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

注意：你必須在調用console.time()和timeEnd()時傳入一樣的字符串以獲得你想要的結果。

建立Timeline

Timeline面板爲你提供了一個關於頁面或應用在加載和使用時哪些地方花費了時間的概覽。console.timeStamp()方法會在它被執行的時候在Timeline上作一個標記。這樣，你能夠很容易地找到你的應用中的事件和瀏覽器事件，好比layout和paints，之間的聯繫。

注意：console.timeStamp()方法只在Timeline處於記錄過程當中時纔會起做用。

在下面的例子中當程序執行到AddResult()函數內部時，就會在Timeline上作一個標記。

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

以下面的屏幕截圖所示，timeStamp()命令會在Timeline的這些位置留下標記：

• 在Timeline的summary和detail視圖中的垂直黃線。
• 在事件記錄列表中的一條記錄。

在JavaScript中設置斷點

你能夠在JavaScript代碼中調用debugger命令來開始一次debug。好比在下面的例子中，當brightness()方法被調用時就會開始一次JavaScript調試：

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

Brian Arnold開發了一種很是有趣的條件調試技術， 參見Breakpoint Actions in JavaScript.。

使用Command Line API

Console除了用做經過應用程序顯示信息的地方，它仍是一個讓你能夠直接對錶達式求值或執行由Command Line API提供的命令的地方。該API提供瞭如下功能：

• 方便的DOM元素選取功能
• 對CPU性能監控分析的方法
• 部分Console API方法的別名
• 監視事件
• 查看對象上註冊的事件監聽

表達式求值

當你按下Return或Enter鍵時，Console會嘗試對任何你輸入的JavaScript表達式求值。Console還提供了自動完成提示和tab自動完成輸入。好比你輸入一個表達式，他的屬性名稱就會自動顯示在提示中。若是有多個屬性都擁有相同的前綴，此時按tab鍵就會循環遍歷它們。按下向右箭頭按鍵，就會輸入當前的建議項。當只有一個建議項時，按tab鍵也會輸入該建議項。

若是要輸入一個多行的表達式（好比一個方法的定義內容），能夠按Shift+Enter換行。

選擇元素

Command Line API提供了一些方法以訪問應用中的DOM元素。好比，$() 方法會像 document.querySelector()同樣返回與指定CSS選擇器相匹配的第一個元素。下面的代碼會返回ID爲 "loginBtn"的元素。

$('#loginBtn');

$$() 命令則像document.querySelectorAll()同樣返回全部與指定CSS規則匹配的元素。以下面的代碼會顯示全部CSS class爲"loginBtn"的<button>元素：

$$('button.loginBtn');

最後，x()方法會返回全部與傳入的XPath路徑參數相匹配的元素。下面的代碼會返回<body>標籤下的全部<script> 元素：

$x('/html/body/script');

檢查DOM元素和JavaScript對象

inspect()將一個指向DOM元素的引用 (或指向JavaScript對象的引用)做爲參數，並將其顯示在相應的面板中——在 Elements面板顯示DOM元素，或在Profile面板顯示JavaScript對象。

好比，在下面的截圖中，$()方法會獲得一個對<li>元素的引用。而後在最後的表達式中用($_)傳給inspect()方法，以在Elements面板中顯示該元素。

訪問當前選中的元素和對象

一般，你會在測試的時候用放大鏡或直接在Element面板中選擇DOM元素，同時你也就能夠進一步檢視這些元素。或者，在你用Profiles面板分析一個內存使用狀況快照時，你也能夠選擇一個JavaScript對象作進一步查看。

Console會記錄下你最近選擇的5個元素（或者堆對象），並給他們命名爲$0, $1, $2, $3和$4.。最近選擇的對象爲 $0，其次爲$1，以此類推。

下面的截圖顯示了在選擇了3個元素後這些屬性的值：

注意： 你也能夠在任何元素上用鼠標右鍵點擊並選擇Reveal in Elements Panel。

監視事件

monitorEvents()能夠監視一個對象的一個或多個事件。當被監視的對象上有事件被觸發時，相應的事件對象就會被顯示在Console中。你能夠指定要監視的對象和它上的事件。好比，下面的代碼會監視window對象上的"resize"事件：

monitorEvents(window, "resize");

若是須要監視一組事件，你能夠將事件名稱數組做爲第二個參數傳給該方法。下面的代碼同時監視了body的"mousedown"事件和"mouseup"事件。

monitorEvents(document.body, ["mousedown", "mouseup"]);

你還能夠傳一個合法的"事件類型"給這個方法，DevTools會把它對應到一組事件名稱。好比，"touch"事件類型會讓DevTools監視指定對象上的"touchstart"，"touchend"，"touchmove"，和"touchcancel"事件。

monitorEvents($('#scrollBar'), "touch");

你能夠在Console API Reference中查看monitorEvents()章節，以得到合法的事件類型列表。

你能夠調用 unmonitorEvents()方法中止監視事件，只需將須要中止監視的對象做爲參數傳入該方法。

unmonitorEvents(window);

控制CPU分析器

你能夠在命令行用profile()和 profileEnd()方法建立JavaScript CPU性能分析。你還能夠給你建立的分析指定一個名字。

下面的例子中用默認名稱建立了一個新的性能分析：

這個新的性能分析會在Profile面板中的"Profile 1"項目下顯示：

若是你爲新的性能分析指定了一個標籤，它會被用做這個性能分析的標題。若是你對多個性能分析用了相同的名稱，它們會被做爲獨立的性能分析並分組顯示在同一個名稱下：

Profiles面板中顯示的結果：

CPU性能分析也能夠被嵌套使用：

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

性能分析的開始和結束方法並不必定須要被嵌套調用。好比，下面的用法將獲得和前面相同的效果：

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

 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License.

Last updated 六月 21, 2013.

 

原文見：https://developers.google.com/chrome-developer-tools/docs/console?hl=zh-CN

如需轉載，請註明轉自：http://www.cnblogs.com/silenttiger/p/3154598.html

 

歡迎關注個人微信公衆號：老虎的小窩