console對(duì)象與控制臺(tái)

• console對(duì)象是JavaScript的原生對(duì)象，可以輸出各種信息到控制臺(tái)，并且還提供了很多有用的輔助方法。
• console的常見(jiàn)用途有兩個(gè):
  1、調(diào)試程序，顯示網(wǎng)頁(yè)代碼運(yùn)行時(shí)的錯(cuò)誤信息。
  2、提供了一個(gè)命令行接口，用來(lái)與網(wǎng)頁(yè)代碼互動(dòng)。

console.log（）、console.info、console.debug

• console.log方法用于在控制臺(tái)輸出信息。它可以接受一個(gè)或多個(gè)參數(shù)，將它們連接起來(lái)輸出。

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

• 如果第一個(gè)參數(shù)是格式字符串（使用了格式占位符），console.log方法將依次用后面的參數(shù)替換占位符，然后再進(jìn)行輸出。

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

• console.log方法支持以下占位符，不同類(lèi)型的數(shù)據(jù)必須使用對(duì)應(yīng)的占位符。
  %s 字符串
  %d 整數(shù)
  %i整數(shù)
  %f浮點(diǎn)數(shù)
  %o 對(duì)象的鏈接
  %c CSS格式字符串

var number = 11 * 9;
var color = 'red';

console.log('%d %s balloons', number, color);
// 99 red balloons

上面代碼中，第二個(gè)參數(shù)是數(shù)值，對(duì)應(yīng)的占位符是%d，第三個(gè)參數(shù)是字符串，對(duì)應(yīng)的占位符是%s。

• console.info是console.log方法的別名，用法完全一樣。只不過(guò)console.info方法會(huì)在輸出信息的前面，加上一個(gè)藍(lán)色圖標(biāo)。
• console.debug方法與console.log方法類(lèi)似，會(huì)在控制臺(tái)輸出調(diào)試信息。但是，默認(rèn)情況下，console.debug輸出的信息不會(huì)顯示，只有在打開(kāi)顯示級(jí)別在verbose的情況下，才會(huì)顯示。

console.warn()，console.error()

• warn方法輸出信息時(shí)，在最前面加一個(gè)黃色三角，表示警告
• error方法輸出信息時(shí)，在最前面加一個(gè)紅色的叉，表示出錯(cuò),同時(shí)，還會(huì)高亮顯示輸出文字和錯(cuò)誤發(fā)生的堆棧。其他方面都一樣。

console.table()

• 對(duì)于某些復(fù)合類(lèi)型的數(shù)據(jù)，console.table方法可以將其轉(zhuǎn)為表格顯示,例：

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

console.table(languages);

上面代碼的language變量，轉(zhuǎn)為表格顯示如下:

1.png

console.count()

• count方法用于計(jì)數(shù)，輸出它被調(diào)用了多少次，例：

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

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

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

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

上面代碼每次調(diào)用greet函數(shù)，內(nèi)部的console.count方法就輸出執(zhí)行次數(shù)。

• 該方法可以接受一個(gè)字符串作為參數(shù)，作為標(biāo)簽，對(duì)執(zhí)行次數(shù)進(jìn)行分類(lèi)。

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"

上面代碼根據(jù)參數(shù)的不同，顯示bob執(zhí)行了兩次，alice執(zhí)行了一次。

console.dir()，console.dirxml()

• dir方法用來(lái)對(duì)一個(gè)對(duì)象進(jìn)行檢查（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方法的輸出結(jié)果，比log方法更易讀，信息也更豐富。
該方法對(duì)于輸出 DOM對(duì)象非常有用，因?yàn)闀?huì)顯示DOM對(duì)象的所有屬性。

• dirxml方法主要用于以目錄樹(shù)的形式，顯示 DOM節(jié)點(diǎn)。
  如果參數(shù)不是 DOM 節(jié)點(diǎn)，而是普通的JavaScript對(duì)象，console.dirxml等同于console.dir。

console.assert()

• console.assert方法主要用于程序運(yùn)行過(guò)程中，進(jìn)行條件判斷，如果不滿足條件，就顯示一個(gè)錯(cuò)誤，但不會(huì)中斷程序執(zhí)行。這樣就相當(dāng)于提示用戶，內(nèi)部狀態(tài)不正確。

console.time()，console.timeEnd()

• 這兩個(gè)方法用于計(jì)時(shí)，可以算出一個(gè)操作所花費(fèi)的準(zhǔn)確時(shí)間。

console.group()，console.groupEnd()，console.groupCollapsed()

• console.group和console.groupEnd這兩個(gè)方法用于將顯示的信息分組。它只在輸出大量信息時(shí)有用，分在一組的信息，可以用鼠標(biāo)折疊/展開(kāi)。
• console.groupCollapsed方法與console.group方法很類(lèi)似，唯一的區(qū)別是該組的內(nèi)容，在第一次顯示時(shí)是收起的（collapsed），而不是展開(kāi)的。

console.trace()，console.clear()

• console.trace方法顯示當(dāng)前執(zhí)行的代碼在堆棧中的調(diào)用路徑。
• console.clear方法用于清除當(dāng)前控制臺(tái)的所有輸出，將光標(biāo)回置到第一行。如果用戶選中了控制臺(tái)的“Preserve log”選項(xiàng)，console.clear方法將不起作用。

debugger 語(yǔ)句

• debugger語(yǔ)句主要用于除錯(cuò)，作用是設(shè)置斷點(diǎn)。如果有正在運(yùn)行的除錯(cuò)工具，程序運(yùn)行到debugger語(yǔ)句時(shí)會(huì)自動(dòng)停下。如果沒(méi)有除錯(cuò)工具，debugger語(yǔ)句不會(huì)產(chǎn)生任何結(jié)果，JavaScript 引擎自動(dòng)跳過(guò)這一句。
  Chrome 瀏覽器中，當(dāng)代碼運(yùn)行到debugger語(yǔ)句時(shí)，就會(huì)暫停運(yùn)行，自動(dòng)打開(kāi)腳本源碼界面。

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

上面代碼打印出0，1，2以后，就會(huì)暫停，自動(dòng)打開(kāi)源碼界面，等待進(jìn)一步處理。