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

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

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

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

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

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

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

將完全按照您的預期輸出。

> I like Skittles but I do not like pus.

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

另一個有趣的是％c， 它實際上是CSS值的占位符。

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

這些值會運行到后面的任何內(nèi)容上，沒有“結束標記”，這有點奇怪。 但你可以將它變得像這樣。

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

它有用嗎？Ehhhhh。

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

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

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

這是記錄輸入的輸出：

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

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

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

但是，有一個更大的優(yōu)勢。 因為輸出是警告而不是信息，所以您可以過濾掉所有console.log并僅保留console.warn。 這對于偶爾會在瀏覽器中輸出大量無用廢話的偶爾繁瑣的應用程序尤其有用。 清除噪音可以讓您更輕松地看到輸出。

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

例如，這是一個數(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)儲上面的內(nèi)容，我們會得到一些非常無用的輸出：

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

小箭頭讓你點擊并打開陣列，當然，但這并不是我們想要的“一目了然”。

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

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

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

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

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

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

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

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

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

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

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

console.assert(tx.timestamp, tx);

當與任何有效的事務對象一起使用時，它只是跳過去。 但是false會觸發(fā)我們的日志記錄，因為時間戳是0或null。

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

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

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

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

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

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

另一個使用有用的功能，count只是作為一個計數(shù)器，可選擇作為一個命名計數(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");
  }
}

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

我們得到的應該基本上是一個列表

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

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

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

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

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

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

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

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

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

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

這是一種老式的方法。 我還應該指向上面的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ù)學運算或設置臨時變量。

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

// 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)。 你可以在這里看到輸出。

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

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)試信息的代碼，可能不是那么有用。 但它仍然是一個有趣的想法，您可以看到它可以使您的日志記錄更加清晰。

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

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

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

創(chuàng)建了一個程序員交流微信群，大家進群交流IT技術

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