console對象

console對象是JavaScript的原生對象，它有點像Unix系統的標準輸出stdout和標準錯誤stderr，能夠輸出各類信息用來調試程序，並且還提供了不少額外的方法，供開發者調用。它的常見用途有兩個。

顯示網頁代碼運行時的錯誤信息。
提供了一個命令行接口，用來與網頁代碼互動。

1.瀏覽器實現

console對象的瀏覽器實現，包含在瀏覽器自帶的開發工具之中。以Chrome瀏覽器的「開發者工具」（Developer Tools）爲例，首先使用下面三種方法的一種打開它。

1. 按F12或者Control + Shift + i（PC平臺）/ Alt + Command + i（Mac平臺）。

2. 在菜單中選擇「工具/開發者工具」。

3. 在一個頁面元素上，打開右鍵菜單，選擇其中的「Inspect Element」。

打開「開發者工具」之後，能夠看到在頂端有八個面板卡可供選擇，分別是：

Elements：用來調試網頁的HTML源碼和CSS代碼。
Resources：查看網頁加載的各類資源文件（好比代碼文件、字體文件、css文件等），以及在硬盤上建立的各類內容（好比本地緩存、Cookie、Local Storage等）。
Network：查看網頁的HTTP通訊狀況。
Sources：調試JavaScript代碼。
Timeline：查看各類網頁行爲隨時間變化的狀況。
Profiles：查看網頁的性能狀況，好比CPU和內存消耗。
Audits：提供網頁優化的建議。
Console：用來運行JavaScript命令。

這八個面板都有各自的用途。如下內容只針對Console面板，又稱爲控制檯。Console面板基本上就是一個命令行窗口，你能夠在提示符下，鍵入各類命令。

2.console對象的方法

console對象提供的各類方法，用來與控制檯窗口互動。

2.1 log()，info()，debug()

console.log方法用於在console窗口輸出信息。它能夠接受多個參數，將它們的結果鏈接起來輸出。

console.log("Hello World")
// Hello World

console.log("a","b","c")
// a b c

console.log方法會自動在每次輸出的結尾，添加換行符。

console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3

若是第一個參數是格式字符串（使用了格式佔位符），console.log方法將依次用後面的參數替換佔位符，而後再進行輸出。

console.log(' %s + %s = %s', 1, 1, 2)
//  1 + 1 = 2

上面代碼中，console.log方法的第一個參數有三個佔位符（%s），第2、3、四個參數會在顯示時，依次替換掉這個三個佔位符。console.log方法支持的佔位符格式有如下一些，不一樣格式的數據必須使用對應格式的佔位符。

%s 字符串
%d 整數
%i 整數
%f 浮點數
%o 對象的連接
%c CSS格式字符串

var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);
// 99 red balloons

上面代碼中，第二個參數是數值，對應的佔位符是%d，第三個參數是字符串，對應的佔位符是%s。

使用%c佔位符時，對應的參數必須是CSS語句，用來對輸出內容進行CSS渲染。

console.log('%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

上面代碼運行後，輸出的內容將顯示爲黃底紅字。

console.log方法的兩種參數格式，能夠結合在一塊兒使用。

console.log(' %s + %s ', 1, 1, '= 2')
// 1 + 1  = 2

若是參數是一個對象，console.log會顯示該對象的值。

console.log({foo: 'bar'})
// Object {foo: "bar"}

console.log(Date)
// function Date() { [native code] }

上面代碼輸出Date對象的值，結果爲一個構造函數。

console.info()和console.debug()都是console.log方法的別名，用法徹底同樣。只不過console.info方法會在輸出信息的前面，加上一個藍色圖標。

console對象的全部方法，均可以被覆蓋。所以，能夠按照本身的須要，定義console.log方法。

['log', 'info', 'warn', 'error'].forEach(function(method) {
  console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("瞧，我在前面添加了如今的時間！");
// 2014-05-18T09:00.000Z 出錯了！

上面代碼表示，使用自定義的console.log方法，能夠在顯示結果添加當前時間。

2.2 warn()，error()

warn方法和error方法也是輸出信息，它們與log方法的不一樣之處在於，warn方法輸出信息時，在最前面加一個黃色三角，表示警告；error方法輸出信息時，在最前面加一個紅色的叉，表示出錯，同時會顯示錯誤發生的堆棧。其餘用法都同樣。

console.error("Error: %s (%i)", "Server is not responding",500)
// Error: Server is not responding (500)

console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)

本質上，log方法是寫入標準輸出（stdout），warn方法和error方法是寫入標準錯誤（stderr）。

2.3 table()

對於某些複合類型的數據，console.table方法能夠將其轉爲表格顯示。

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

上面代碼的language，轉爲表格顯示以下。

複合型數據轉爲表格顯示的條件是，必須擁有主鍵。對於上面的數組來講，主鍵就是數字鍵。對於對象來講，主鍵就是它的最外層鍵。

var languages = {
  csharp: { name: "C#", paradigm: "object-oriented" },
  fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

上面代碼的language，轉爲表格顯示以下。

2.4 count()

count方法用於計數，輸出它被調用了多少次。

function greet(user) {
  console.count();
  return "hi " + user;
}

greet('bob')
//  : 1
// "hi bob"

greet('alice')
//  : 2
// "hi alice"

greet('bob')
//  : 3
// "hi bob"

上面代碼每次調用greet函數，內部的console.count方法就輸出執行次數。

該方法能夠接受一個字符串做爲參數，做爲標籤，對執行次數進行分類。

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

上面代碼根據參數的不一樣，顯示bob執行了兩次，alice執行了一次。

2.5 dir()

dir方法用來對一個對象進行檢查（inspect），並以易於閱讀和打印的格式顯示。

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

上面代碼顯示dir方法的輸出結果，比log方法更易讀，信息也更豐富。

該方法對於輸出DOM對象很是有用，由於會顯示DOM對象的全部屬性。

console.dir(document.body)

2.6 assert()

assert方法接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有當第一個參數爲false，纔會輸出第二個參數，不然不會有任何結果。

// 實例
console.assert(true === false, "判斷條件不成立")
// Assertion failed: 判斷條件不成立

下面是另外一個例子，判斷子節點的個數是否大於等於500。

console.assert(list.childNodes.length < 500, "節點個數大於等於500")

2.7 time()，timeEnd()

這兩個方法用於計時，能夠算出一個操做所花費的準確時間。

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

// Array initialize: 1914.481ms

time方法表示計時開始，timeEnd方法表示計時結束。它們的參數是計時器的名稱。調用timeEnd方法以後，console窗口會顯示「計時器名稱: 所耗費的時間」。

2.8 profile()，profileEnd()

console.profile方法用來新建一個性能測試器（profile），它的參數是性能測試器的名字。

console.profile('p')
// Profile 'p' started.

console.profileEnd方法用來結束正在運行的性能測試器。

console.profileEnd()
// Profile 'p' finished.

打開瀏覽器的開發者工具，在profile面板中，能夠看到這個性能調試器的運行結果。

2.9 group()，groupend()，groupCollapsed()

console.group和console.groupend這兩個方法用於將顯示的信息分組。它只在輸出大量信息時有用，分在一組的信息，能夠用鼠標摺疊/展開。

console.group('Group One');
console.group('Group Two');

// some code

console.groupEnd(); // Group Two 結束
console.groupEnd(); // Group One 結束

console.groupCollapsed方法與console.group方法很相似，惟一的區別是該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。

console.groupCollapsed('Fetching Data');

console.log('Request Sent');
console.error('Error: Server not responding (500)');

console.groupEnd();

上面代碼只顯示一行」Fetching Data「，點擊後纔會展開，顯示其中包含的兩行。

2.10 trace()，clear()

console.trace方法顯示當前執行的代碼在堆棧中的調用路徑。

console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate

console.clear方法用於清除當前控制檯的全部輸出，將光標回置到第一行。

3. 命令行API

在控制檯中，除了使用console對象，還可使用一些控制檯自帶的命令行方法。

（1）$_

$_屬性返回上一個表達式的值。

2+2
// 4
$_
// 4

（2）$0- $4

控制檯保存了最近5個在Elements面板選中的DOM元素，$0表明倒數第一個，$1表明倒數第二個，以此類推直到$4。

（3）$(selector)

$(selector)返回一個數組，包括特定的CSS選擇器匹配的全部DOM元素。該方法其實是document.querySelectorAll方法的別名。

var images = $('img');
for (each in images) {
    console.log(images[each].src);
}

上面代碼打印出網頁中全部img元素的src屬性。

（4）$$(selector)

$$(selector)返回一個選中的DOM對象，等同於document.querySelectorAll。

（5）$x(path)

$x(path)方法返回一個數組，包含匹配特定XPath表達式的全部DOM元素。

$x("//p[a]")

上面代碼返回全部包含a元素的p元素。

（6）inspect(object)

inspect(object)方法打開相關面板，並選中相應的元素：DOM元素在Elements面板中顯示，JavaScript對象在Profiles中顯示。

（7）getEventListeners(object)

getEventListeners(object)方法返回一個對象，該對象的成員爲登記了回調函數的各類事件（好比click或keydown），每一個事件對應一個數組，數組的成員爲該事件的回調函數。

（8）keys(object)，values(object)

keys(object)方法返回一個數組，包含特定對象的全部鍵名。

values(object)方法返回一個數組，包含特定對象的全部鍵值。

var o = {'p1':'a', 'p2':'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

（9）monitorEvents(object[, events]) ，unmonitorEvents(object[, events])

monitorEvents(object[, events])方法監聽特定對象上發生的特定事件。當這種狀況發生時，會返回一個Event對象，包含該事件的相關信息。unmonitorEvents方法用於中止監聽。

monitorEvents(window, "resize");

monitorEvents(window, ["resize", "scroll"])

上面代碼分別表示單個事件和多個事件的監聽方法。

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

上面代碼表示如何中止監聽。

monitorEvents容許監聽同一大類的事件。全部事件能夠分紅四個大類。

mouse：」mousedown」, 「mouseup」, 「click」, 「dblclick」, 「mousemove」, 「mouseover」, 「mouseout」, 「mousewheel」
key：」keydown」, 「keyup」, 「keypress」, 「textInput」
touch：」touchstart」, 「touchmove」, 「touchend」, 「touchcancel」
control：」resize」, 「scroll」, 「zoom」, 「focus」, 「blur」, 「select」, 「change」, 「submit」, 「reset」

monitorEvents($("#msg"), "key");

上面代碼表示監聽全部key大類的事件。

（10）profile([name])，profileEnd()

profile方法用於啓動一個特定名稱的CPU性能測試，profileEnd方法用於結束該性能測試。

profile("My profile")

profileEnd("My profile")

（11）其餘方法

命令行API還提供如下方法。

clear()方法清除控制檯的歷史。
copy(object)方法複製特定DOM元素到剪貼板。
dir(object)方法顯示特定對象的全部屬性，是console.dir方法的別名。
dirxml(object)方法顯示特定對象的XML形式，是console.dirxml方法的別名。

4. debugger語句

debugger語句必須與除錯工具配合使用，若是沒有除錯工具，debugger語句不會產生任何結果。

在chrome瀏覽器中，當代碼運行到debugger指定的行時，就會暫停運行，自動打開console界面。它的做用相似於設置斷點。

for(var i = 0;i<5;i++){
    console.log(i);
    if (i===2) debugger;
}

上面代碼打印出0，1，2之後，就會暫停，自動打開console窗口，等待進一步處理。