那些被忽略但很好用的 Web API / Console

虽然一招 console.log 就能打遍天下无敌手，但你其实有更好的选择。

我知道我知道，这次的主题是「被忽略」的 Web API，Console 显然不会是那个被大家忽略的，它可是各位 debug 的好夥伴，但你知道 Console 底下其实可不是只有 console.log 而已，还有很多更方便的 API 可以使用。

Console

Console 这个物件提供了我们操作浏览器中除错控制台（debugging console）的使用权，当按下 F12 後开启浏览器的 Developers Tools，就可以看到 Console 面板，那就是除错控制台啦。

而大家熟知的 console.log 就是在这个面板中打印出一笔纪录讯息（log），但每当 Console 面板中的讯息五花八门越来越多时，就会常常眼花撩乱，反而阻碍我们进行除错或开发，所以下面就介绍一些其实很好用但被使用度却偏低的几个 API。
　

# console.count

顾名思义，count 当然是拿来计数的，每当我们呼叫一次 console.count 就会进行一次计数。

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3

这样的功能我偶尔会在开发 Vue 专案的时候，用在元件的 update 的生命周期里，可以观察看看元件在实际操作前是否有过多的异常更新。

另外可以发现上面印出的内容除了数字不断增加之外，还多了一个 default 的字串，这是因为 console.count 可以传入一个参数来区隔不同的计数器，而这个参数预设值为 default。

console.count();      // default: 1
console.count("foo"); // foo: 1
console.count();      // default: 2
console.count("bar"); // bar: 1
console.count("foo"); // foo: 2

需要的话你还可以这麽做...

let zoo = ["lion", "tiger", "zebra", "lion", "zebra"];
for(let i = 0; i < zoo.length; i++) {
  console.count(zoo[i]);
};
// lion: 1
// tiger: 1
// zebra: 1
// lion: 2
// zebra: 2

# console.time / console.timeEnd

这一组 API 主要可以让你得知一段程序片段执行的时间，当你呼叫 console.time 时，浏览器会开始帮我们计时，直到你呼叫 console.timeEnd，Console 面板便会打印出这两个 API 被呼叫的的期间所花费的毫秒数。

console.time();
setTimeout(() => {
  console.timeEnd();
}, 500);
// default: 505.10107421875 ms

其实透过上面这段程序码就可以发现，setTimeout 其实并不是非常精准，只不过这样的误差可以省略不计，除此之外，default 字串又再次出现了，可想而知 console.time 是可以透过传参来区隔计时器的。

console.time("bar");
console.time("foo");
setTimeout(() => {
  console.timeEnd("bar");
}, 500);
setTimeout(() => {
  console.timeEnd("foo");
}, 1000);
// bar: 501.56689453125 ms
// foo: 1004.574951171875 ms

偶尔你可能会遇到同个问题有不同作法，也许你可以考虑看看用 console.time 和 console.timeEnd 来测试哪一种解决方案比较省时。
　

# console.group / console.groupEnd

偶尔我们 log 出的讯息或资讯非常的多，一不小心就会迷失在 Console 面板中，尤其是在 function 层级很复杂的时候，一时半刻的也分辨不出哪些讯息是哪边印出来的，那这组 API 就可以派上用场了。

console.group("level_1"); // 开启 group level_1
console.log("1-1");       // 在 level_1 中打印  1-1
console.group("level_2"); // 在 level_1 中开启 group level_2 
console.log("2-1");       // 在 level_2 中打印  2-1
console.group("level_3"); // 在 level_2 中开启 group level_3 
console.log("3-1");       // 在 level_3 中打印  3-1 
console.groupEnd();       // 关闭 level_3
console.log("2-2");       // 在 level_2 中打印  2-2 
console.groupEnd();       // 关闭 level_2
console.log("1-2");       // 在 level_1 中打印  1-2 

透过上面的程序码打印出的结果就会像是这样，当你开启了一个 group 後，之後的打印内容都会归类在该 group 底下，并且你可以进行收合，让 Console 面板的讯息可以更乾净更有系统。例如下面这段程序码，相比直接印出来，在前後进行 group 的操作，应该是更能看出程序顺序。

for(let i = 1; i <= 5; i++) {
  for(let j = 1; j <= 3; j++) {
    console.log(j);
  };
};
// this is better
for(let i = 1; i <= 3; i++) {
  console.group("level"+i);
  for(let j = 1; j <= 3; j++) {
    console.log(j);
  };
  console.groupEnd();
}

# console.table

table 这个 API 好不好用可能要看情境或因人而异，它主要的功能是可以将阵列或物件打印成一个表格，让你在观看时可以更一目了然。

let badminton_scoring = {
  taiwan: 21,
  china: 12
};
console.table(badminton_scoring);

let olympics = [["gold", 2], ["silver", 4], ["copper", 6]];
console.table(olympics);

可以看到，利用 console.table 把阵列或物件打印就会是上面这样的效果，另外要提的是，如果你打印的不是阵列或物件，那 console.table 就跟 console.log 没有什麽不同。

我个人认为，这个 API 比较适合刚接触程序语言的朋友，如果你对阵列或物件还不太了解，利用 console.table 把他们印出来，说不定能让你更好理解。

不晓得各位是否有使用过这些 API 的经验呢？如果还没有，或许之後当你想要 console.log 的时候，可以再多想几秒钟，上面这些 API 说不定是你更好的选择。