除了console.log以外，另有更多体式格局调试JavaScript来输出值。 看起来很显著我们没有。

人们通知我，做JavaScript应当运用阅读器的调试器，但这肯定是要看运转环境的。 然则许多时刻你只想晓得代码的某一部份是实行照样变量是什么，而不会看着断点消逝巨大的代码类库中。

尽管如此，虽然我们运用console.log，然则许多人都没有意想到控制台自身除了基础日记以外另有许多其他选项。 恰当运用这些功用能够使调试更轻易，更疾速，更直观。

console.log()

在旧的console.log中有超出人希冀使人惊奇的功用。 虽然大多数人将它用作console.log（obj），但您也能够实行console.log（object，otherObject，string），它会将它们悉数纪录下来。 偶然刻轻易。

除此以外，另有另一种花样：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是一个十进制或整数。

另一个风趣的是％c， 它现实上是CSS值的占位符。

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

这些值会运转到背面的任何内容上，没有“完毕标记”，这有点新鲜。 但你能够将它变得像如许。

它不文雅，也不是迥殊有用。 固然，这不是一个真正的按钮。

它有用吗？Ehhhhh。

console.dir()

在大多数状况下，console.dir()函数异常类似于log()，尽管它看起来有点差别。

向下的小箭头将显现与上面雷同的确实对象详细信息，这也能够从console.log版本中看到。 当你看到元素时，事物的不合越发猛烈，更风趣。

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

这是纪录输入的输出：

我翻开了一些元素。 这清楚地显现了DOM，我们能够阅读它。 然则console.dir（element）为我们供应了惊人的差别输出。

这是一种越发客观的体式格局来检察元素。 偶然刻这就是你真正想要的东西，更像是搜检元素。

console.warn()

多是最显著的直接替代log()，你能够用完整雷同的体式格局运用console.warn()。 唯一真正的区别是输出有点黄。 具体来说，输出处于正告级别而不是信息级别，因而阅读器将轻微区别对待它。 这具有使其在芜杂输出中更显著的结果。

然则，有一个更大的上风。 由于输出是正告而不是信息，所以您能够过滤掉一切console.log并仅保存console.warn。 这关于偶然会在阅读器中输出大批无用空话的偶然烦琐的应用程序特别有用。 消灭噪音能够让您更轻松地看到输出。

console.table()

使人惊奇的是，这并非更为人所知，然则console.table()函数旨在以比抛出原始对象数组更简约的体式格局显现表格数据。

比方，这是一个数据列表。

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来转储上面的内容，我们会获得一些异常无用的输出：

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

小箭头让你点击并翻开阵列，固然，但这并非我们想要的“一览无余”。

虽然console.tabl(data)的输出更有协助。

可选的第二个参数是您想要的列的列表。 明显默以为一切列，但我们也能够如许做。

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

我们获得这个输出，只显现id和价钱。 适用于过大的物体，细节基础无关。 索引列是自动建立的，而且据我所知不能够去掉。

这里要注意的是这是乱序的 – 最右侧的列标题上的箭头显现了缘由。 我点击该列举行排序。 找到列的最大或最小，或许只是对数据举行差别的检察异常轻易。 趁便说一句，该功用与显现部份列无关。 它一直可用。

console.table()只能处置惩罚最多1000行，因而能够不适合一切数据集。

console.assert()

断言有用的函数assert() 与log() 雷同，但仅在第一个参数为false的状况下。 假如第一个参数为真，它什么都不做。

这关于有轮回（或几个差别的函数挪用）而且只要一个显现特定行动的状况迥殊有用。 基础上它和如许做是一样的。

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

廓清的是，当我说“雷同”时，做起来倒是相反的。 所以你须要反转前提。

因而，让我们假定上面的一个值是在时候戳中运用null或0，这会搞砸我们的代码花样化日期。

console.assert(tx.timestamp, tx);

当与任何有用的事件对象一同运用时，它只是跳过去。 然则false会触发我们的日记纪录，由于时候戳是0或null。

偶然我们想要更庞杂的前提。 比方，我们已看到用户WAL0412的数据存在题目，而且只想显现来自它们的事件。 这是直观的解决方案。

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

这看起来准确，但不起作用。 请记着，前提必需是false…我们要断言，而不是过滤。

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

这将做我们想要的。 买方不是WAL0412的任何生意业务在该前提下都是准确的，只留下那些。 或许……不是。

像个中的一些，console.assert()并不老是迥殊有用。 但在特定状况下它能够是一个文雅的解决方案。

console.count()

另一个运用有用的功用，count只是作为一个计数器，可选择作为一个定名计数器。

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函数，这是个伪代码。

我们获得的应当基础上是一个列表

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

等等。 这关于您能够只是转储索引的状况很有用，或许您愿望保存一个（或多个）运转计数。

您也能够像如许运用console.count()，不带参数。 如许做会将其称为默许值。

假如您情愿，还能够运用相干的console.countReset()来重置计数器。

console.trace()

这很难用简朴的数据举行演示。 它善于的处所在于你试图弄清楚现实挪用者致使题目的类或库。

比方，能够有12个差别的组件挪用效劳，但个中一个组件没有准确设置依靠关联。

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）并致使毛病。

console.time()

用于跟踪操纵所用时候的专用函数console.time（）是跟踪JavaScript实行所用微时候的更好要领。

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

我们如今不再须要做任何数学运算或设置暂时变量。

console.group()

如今多是控制台输出中最庞杂和最先进的地区。 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');

这又是一种轮回。 你能够在这里看到输出。

虽然不是很有用，但你能够会看到个中一些是怎样组合在一同的。

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

这是许多工作和许多用于调试信息的代码，能够不是那末有用。 但它仍然是一个风趣的主意，您能够看到它能够使您的日记纪录越发清楚。

末了要指出的是console.groupCollapsed。 在功用上，这与console.group雷同，但块最先封闭。 它没有获得很好的支撑，但假如你有一大堆空话，你能够想要默许隐蔽它是一个选项。

结论

这里没有太多结论。 一切这些东西都能够有用，假如你能够只须要一点点console.log（pet），但现实上并不须要调试器。

能够最有用的是console.table，但一切其他api也都有本身的作用。 我是console.assert的粉丝，由于我们想调试一些东西，但只能在特定状况下调试。

建立了一个程序员交换微信群，人人进群交换IT手艺

假如已过期，能够增加博主微信号15706211347，拉你进群