摘要：在舊的中有超出人期望令人驚訝的功能。令人驚訝的是，這并不是更為人所知，但是函數(shù)旨在以比拋出原始對象數(shù)組更簡潔的方式顯示表格數(shù)據(jù)。適用于過大的物體，細(xì)節(jié)基本無關(guān)。這樣做會(huì)將其稱為默認(rèn)值。最后要指出的是。

除了console.log之外，還有更多方式調(diào)試JavaScript來輸出值。 看起來很明顯我們沒有。

人們告訴我，做JavaScript應(yīng)該使用瀏覽器的調(diào)試器，但這肯定是要看運(yùn)行環(huán)境的。 但是很多時(shí)候你只想知道代碼的某一部分是執(zhí)行還是變量是什么，而不會(huì)看著斷點(diǎn)消失龐大的代碼類庫中。

盡管如此，雖然我們使用console.log，但是很多人都沒有意識到控制臺本身除了基本日志之外還有很多其他選項(xiàng)。 適當(dāng)使用這些功能可以使調(diào)試更容易，更快速，更直觀。

在舊的console.log中有超出人期望令人驚訝的功能。 雖然大多數(shù)人將它用作console.log（obj），但您也可以執(zhí)行console.log（object，otherObject，string），它會(huì)將它們?nèi)坑涗浵聛怼?有時(shí)候方便。

除此之外，還有另一種格式：console.log（msg，values）。 這很像像C或PHP中的sprintf。

console.log("I like %s but I do not like %s.", "Skittles", "pus");

將完全按照您的預(yù)期輸出。

> I like Skittles but I do not like pus.

常見的占位符是％o（這是一個(gè)字母o，而不是零），它接受一個(gè)對象，％s接受一個(gè)字符串，％d是一個(gè)十進(jìn)制或整數(shù)。

另一個(gè)有趣的是％c， 它實(shí)際上是CSS值的占位符。

console.log("I am a %cbutton", "color: white; background-color: orange; padding: 2px 5px; border-radius: 2px");

這些值會(huì)運(yùn)行到后面的任何內(nèi)容上，沒有“結(jié)束標(biāo)記”，這有點(diǎn)奇怪。 但你可以將它變得像這樣。

它不優(yōu)雅，也不是特別有用。 當(dāng)然，這不是一個(gè)真正的按鈕。

它有用嗎？Ehhhhh。

在大多數(shù)情況下，console.dir()函數(shù)非常類似于log()，盡管它看起來有點(diǎn)不同。

向下的小箭頭將顯示與上面相同的確切對象詳細(xì)信息，這也可以從console.log版本中看到。 當(dāng)你看到元素時(shí)，事物的分歧更加劇烈，更有趣。

let element = document.getElementById("2x-container");

這是記錄輸入的輸出：

我打開了一些元素。 這清楚地顯示了DOM，我們可以瀏覽它。 但是console.dir（element）為我們提供了驚人的不同輸出。

這是一種更加客觀的方式來查看元素。 有時(shí)候這就是你真正想要的東西，更像是檢查元素。

可能是最明顯的直接替換log()，你可以用完全相同的方式使用console.warn()。 唯一真正的區(qū)別是輸出有點(diǎn)黃。 具體來說，輸出處于警告級別而不是信息級別，因此瀏覽器將稍微區(qū)別對待它。 這具有使其在雜亂輸出中更明顯的效果。

但是，有一個(gè)更大的優(yōu)勢。 因?yàn)檩敵鍪蔷娑皇切畔?，所以您可以過濾掉所有console.log并僅保留console.warn。 這對于偶爾會(huì)在瀏覽器中輸出大量無用廢話的偶爾繁瑣的應(yīng)用程序尤其有用。 清除噪音可以讓您更輕松地看到輸出。

令人驚訝的是，這并不是更為人所知，但是console.table()函數(shù)旨在以比拋出原始對象數(shù)組更簡潔的方式顯示表格數(shù)據(jù)。

例如，這是一個(gè)數(shù)據(jù)列表。

const transactions = [{
  id: "7cb1-e041b126-f3b8",
  seller: "WAL0412",
  buyer: "WAL3023",
  price: 203450,
  time: 1539688433
},
{
  id: "1d4c-31f8f14b-1571",
  seller: "WAL0452",
  buyer: "WAL3023",
  price: 348299,
  time: 1539688433
},
{
  id: "b12c-b3adf58f-809f",
  seller: "WAL0012",
  buyer: "WAL2025",
  price: 59240,
  time: 1539688433
}];

如果我們使用console.log來轉(zhuǎn)儲(chǔ)上面的內(nèi)容，我們會(huì)得到一些非常無用的輸出：

? (3) [{…}, {…}, {…}]

小箭頭讓你點(diǎn)擊并打開陣列，當(dāng)然，但這并不是我們想要的“一目了然”。

雖然console.tabl(data)的輸出更有幫助。

可選的第二個(gè)參數(shù)是您想要的列的列表。 顯然默認(rèn)為所有列，但我們也可以這樣做。

> console.table(data, ["id", "price"]);

我們得到這個(gè)輸出，只顯示id和價(jià)格。 適用于過大的物體，細(xì)節(jié)基本無關(guān)。 索引列是自動(dòng)創(chuàng)建的，并且據(jù)我所知不可以去掉。

這里要注意的是這是亂序的 - 最右邊的列標(biāo)題上的箭頭顯示了原因。 我點(diǎn)擊該列進(jìn)行排序。 找到列的最大或最小，或者只是對數(shù)據(jù)進(jìn)行不同的查看非常方便。 順便說一句，該功能與顯示部分列無關(guān)。 它始終可用。

console.table()只能處理最多1000行，因此可能不適合所有數(shù)據(jù)集。

斷言有用的函數(shù)assert() 與log() 相同，但僅在第一個(gè)參數(shù)為false的情況下。 如果第一個(gè)參數(shù)為真，它什么都不做。

這對于有循環(huán)（或幾個(gè)不同的函數(shù)調(diào)用）并且只有一個(gè)顯示特定行為的情況特別有用。 基本上它和這樣做是一樣的。

if (object.whatever === "value") {
  console.log(object);
}

澄清的是，當(dāng)我說“相同”時(shí)，做起來卻是相反的。 所以你需要反轉(zhuǎn)條件。

因此，讓我們假設(shè)上面的一個(gè)值是在時(shí)間戳中使用null或0，這會(huì)搞砸我們的代碼格式化日期。

console.assert(tx.timestamp, tx);

當(dāng)與任何有效的事務(wù)對象一起使用時(shí)，它只是跳過去。 但是false會(huì)觸發(fā)我們的日志記錄，因?yàn)闀r(shí)間戳是0或null。

有時(shí)我們想要更復(fù)雜的條件。 例如，我們已經(jīng)看到用戶WAL0412的數(shù)據(jù)存在問題，并且只想顯示來自它們的事務(wù)。 這是直觀的解決方案。

console.assert(tx.buyer === "WAL0412", tx);

這看起來正確，但不起作用。 請記住，條件必須是false...我們要斷言，而不是過濾。

console.assert(tx.buyer !== "WAL0412", tx);

這將做我們想要的。 買方不是WAL0412的任何交易在該條件下都是正確的，只留下那些。 或者......不是。

像其中的一些，console.assert()并不總是特別有用。 但在特定情況下它可以是一個(gè)優(yōu)雅的解決方案。

另一個(gè)使用有用的功能，count只是作為一個(gè)計(jì)數(shù)器，可選擇作為一個(gè)命名計(jì)數(shù)器。

for(let i = 0; i < 10000; i++) {
  if(i % 2) {
    console.count("odds");
  }
  if(!(i % 5)) {
    console.count("multiplesOfFive");
  }
  if(isPrime(i)) {
    console.count("prime");
  }
}

這不是有用的代碼，有點(diǎn)抽象。 此外，我不打算演示isPrime函數(shù)，這是個(gè)偽代碼。

我們得到的應(yīng)該基本上是一個(gè)列表

odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...

等等。 這對于您可能只是轉(zhuǎn)儲(chǔ)索引的情況很有用，或者您希望保留一個(gè)（或多個(gè)）運(yùn)行計(jì)數(shù)。

您也可以像這樣使用console.count()，不帶參數(shù)。 這樣做會(huì)將其稱為默認(rèn)值。

如果您愿意，還可以使用相關(guān)的console.countReset()來重置計(jì)數(shù)器。

這很難用簡單的數(shù)據(jù)進(jìn)行演示。 它擅長的地方在于你試圖弄清楚實(shí)際調(diào)用者導(dǎo)致問題的類或庫。

例如，可能有12個(gè)不同的組件調(diào)用服務(wù)，但其中一個(gè)組件沒有正確設(shè)置依賴關(guān)系。

export default class CupcakeService {
    
  constructor(dataLib) {
    this.dataLib = dataLib;
    if(typeof dataLib !== "object") {
      console.log(dataLib);
      console.trace();
    }
  }
  ...
}

在這里多帶帶使用console.log（）會(huì)告訴我們傳入的dataLib是什么，而不是在哪里。 但是，堆棧跟蹤將非常清楚地告訴我們問題是Dashboard.js，我們可以看到它是新的CupcakeService（false）并導(dǎo)致錯(cuò)誤。

用于跟蹤操作所用時(shí)間的專用函數(shù)console.time（）是跟蹤JavaScript執(zhí)行所用微時(shí)間的更好方法。

function slowFunction(number) {
  var functionTimerStart = new Date().getTime();
  // something slow or complex with the numbers. 
  // Factorials, or whatever.
  var functionTime = new Date().getTime() - functionTimerStart;
  console.log(`Function time: ${ functionTime }`);
}
var start = new Date().getTime();

for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}

var time = new Date().getTime() - start;
console.log(`Execution time: ${ time }`);

這是一種老式的方法。 我還應(yīng)該指向上面的console.log。 很多人都沒有意識到你可以在那里使用模板字符串和插值，但你可以。 很有幫助。

所以讓我們使用新方法試試。

const slowFunction = number =>  {
  console.time("slowFunction");
  // something slow or complex with the numbers. 
  // Factorials, or whatever.
  console.timeEnd("slowFunction");
}
console.time();

for (i = 0; i < 100000; ++i) {
  slowFunction(i);
}
console.timeEnd();

我們現(xiàn)在不再需要做任何數(shù)學(xué)運(yùn)算或設(shè)置臨時(shí)變量。

現(xiàn)在可能是控制臺輸出中最復(fù)雜和最先進(jìn)的區(qū)域。 group讓你......好吧，分組。 特別是它可以讓你嵌套東西。 它擅長的地方在于顯示代碼中存在的結(jié)構(gòu)。

// this is the global scope
let number = 1;
console.group("OutsideLoop");
console.log(number);
console.group("Loop");
for (let i = 0; i < 5; i++) {
  number = i + number;
  console.log(number);
}
console.groupEnd();
console.log(number);
console.groupEnd();
console.log("All done now");

這又是一種循環(huán)。 你可以在這里看到輸出。

雖然不是很有用，但你可能會(huì)看到其中一些是如何組合在一起的。

class MyClass {
  constructor(dataAccess) {
    console.group("Constructor");
    console.log("Constructor executed");
    console.assert(typeof dataAccess === "object", 
      "Potentially incorrect dataAccess object");
    this.initializeEvents();
    console.groupEnd();
  }
  initializeEvents() {
    console.group("events");
    console.log("Initialising events");
    console.groupEnd();
  }
}
let myClass = new MyClass(false);

這是很多工作和很多用于調(diào)試信息的代碼，可能不是那么有用。 但它仍然是一個(gè)有趣的想法，您可以看到它可以使您的日志記錄更加清晰。

最后要指出的是console.groupCollapsed。 在功能上，這與console.group相同，但塊開始關(guān)閉。 它沒有得到很好的支持，但如果你有一大堆廢話，你可能想要默認(rèn)隱藏它是一個(gè)選項(xiàng)。

這里沒有太多結(jié)論。 所有這些工具都可能有用，如果你可能只需要一點(diǎn)點(diǎn)console.log（pet），但實(shí)際上并不需要調(diào)試器。

可能最有用的是console.table，但所有其他api也都有自己的作用。 我是console.assert的粉絲，因?yàn)槲覀兿胝{(diào)試一些東西，但只能在特定情況下調(diào)試。

創(chuàng)建了一個(gè)程序員交流微信群，大家進(jìn)群交流IT技術(shù)

如果已過期，可以添加博主微信號15706211347，拉你進(jìn)群