《JavaScript 教程》學習補遺（八）

Console 對象

（1）console對象是 JavaScript 的原生對象，能夠輸出各類信息到控制檯
（2）console的常見用途有兩個。

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

console 對象的靜態方法

（1）console.log方法用於在控制檯輸出信息。它能夠接受一個或多個參數，將它們鏈接起來輸出。console.log方法會自動在每次輸出的結尾，添加換行符。

console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c

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

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

（3）console.log方法支持如下佔位符，不一樣類型的數據必須使用對應的佔位符。

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

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

// 輸出的內容將顯示爲黃底紅字。
console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

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

console.log({foo: 'bar'})
// Object {foo: "bar"}
console.log(Date)
// function Date() { [native code] }

（6）console.info方法會在輸出信息的前面，加上一個藍色圖標。
（7）console.debug輸出的信息不會顯示，只有在打開顯示級別在verbose的狀況下，纔會顯示。
（8）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 出錯了！

（9）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)

（10）能夠這樣理解，log方法是寫入標準輸出（stdout），warn方法和error方法是寫入標準錯誤（stderr`）。
（11） 對於某些複合類型的數據，console.table方法能夠將其轉爲表格顯示。

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

console.table(languages);

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

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

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

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

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

（13）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"

（14）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

（15）顯示 DOM 對象的全部屬性。

console.dir(document.body)

（16）dirxml方法主要用於以目錄樹的形式，顯示 DOM 節點。

console.dirxml(document.body)

（17）若是參數不是 DOM 節點，而是普通的 JavaScript 對象，console.dirxml等同於console.dir。

console.dirxml([1, 2, 3])
// 等同於
console.dir([1, 2, 3])

（18）console.assert方法主要用於程序運行過程當中，進行條件判斷，若是不知足條件，就顯示一個錯誤，但不會中斷程序執行。

console.assert(false, '判斷條件不成立')
// Assertion failed: 判斷條件不成立

// 至關於
try {
  if (!false) {
    throw new Error('判斷條件不成立');
  }
} catch(e) {
  console.error(e);
}

（19） console.time()，console.timeEnd()這兩個方法用於計時，能夠算出一個操做所花費的準確時間。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

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

console.group('一級分組');
console.log('一級分組的內容');

console.group('二級分組');
console.log('二級分組的內容');

console.groupEnd(); // 二級分組結束
console.groupEnd(); //

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

console.groupCollapsed('Fetching Data');

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

console.groupEnd();

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

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

（23）console.clear方法用於清除當前控制檯的全部輸出，將光標回置到第一行。若是用戶選中了控制檯的「Preserve log」選項，console.clear方法將不起做用。

控制檯命令行 API

（1）$_

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

2 + 2
// 4
$_
// 4

（2）$0 - $4

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

（3）$(selector)

$(selector)返回第一個匹配的元素，等同於document.querySelector()。注意，若是頁面腳本對$有定義，則會覆蓋原始的定義。好比，頁面裏面有 jQuery，控制檯執行$(selector)就會採用 jQuery 的實現，返回一個數組。
（4）$$(selector)

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

（5）$x(path)

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

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

（6）inspect(object)

inspect(object)方法打開相關面板，並選中相應的元素，顯示它的細節。DOM 元素在Elements面板中顯示，好比inspect(document)會在 Elements 面板顯示document元素。JavaScript 對象在控制檯面板Profiles面板中顯示，好比inspect(window)。

（7）getEventListeners(object)

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

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

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

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

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

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

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

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

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove'); //中止監聽。

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove'); //中止監聽。

（9）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）其餘

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

debugger 語句

debugger語句主要用於除錯，做用是設置斷點。若是有正在運行的除錯工具，程序運行到debugger語句時會自動停下。若是沒有除錯工具，debugger語句不會產生任何結果，JavaScript 引擎自動跳過這一句。

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

打印出0，1，2之後，就會暫停，自動打開源碼界面，等待進一步處理。