优雅的console.log( )使用方法&其他方便的console.xx( )总结

本文转载自：qiita-「JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)」，已征得作者许可。

关于本文

我非常喜欢JavaScript。

学了JavaScript的console.log()，发现它有好几种使用方法，除了console.log()之外，JS也有各种各样的console.xx调试方法。

我学习并归纳了一些关于它们的用法。

优雅的console.log()用法

假设有如下三个对象。

 const foo = { name: "momoko", age: 29 };
 const bar = { name: "takeshi", age: 34 };
 const baz = { name: "saori", age: 15 };

不推荐的使用方法

 // Bad :(
 console.log("↓ Bad :(");
 console.log(foo);
 console.log(bar);
 console.log(baz);

这样使用的话，不会显示对应的变量名，哪个是哪个难以一瞬间搞明白。
并且这种写法需要需要输入好几行console.log()，非常麻烦。

优雅的使用方法

像这样把对象放入console.log()中。

 // Good :)
 console.log("↓ Good :)");
 console.log({foo, bar, baz});

这种写法不仅减少了代码行数，并且一瞬间就能明白哪个变量指的是哪个数据，非常好用。

console.log()中使用CSS样式

如果console.log的数据非常重要而需要使它显眼，「%c +字符串”, “CSS代码”」可以为console.log应用css样式。

 // Good :)
 console.log("↓ Good :)");
 console.log("%c お友達！", "color: red; font- weight:bold");
 console.log({foo, bar, baz});

console.table()非常方便的显示数据表格

这些对象拥有相同的属性，因此可以使用console.table()将它们显示为表格。

 console.table([ foo, bar, baz ]);

这个看起来很漂亮！当需要查看console.log中的对象数组时，console.table非常有用。

使用console.dir()查看DOM的详细情况

console.dir()和console.log()看起来差不多,但是，参数是element的时候就能看见差异。

 let element = document.getElementById('test');
 console.log("↓console.log()だとこうなるよ");
 console.log(element);
 console.dir("↓console.dir()だとこうなるよ");
 console.dir(element);

console.log(element)输出指定的DOM本身，console.dir(element)输出指定的DOM的详细内容。

使用console.warn()输出橙色警告

在查看控制台时，一眼就能看到橙色的控制台输出，这里使用的是console.warn()。

let element = document.getElementById('test');
console.warn("お尻がかゆい");
console.warn(element);

想引人注意的时候，console.warn非常方便。

还有console.assert()

console.assert（）的工作原理与console.log()非常相似。
不同之处在于，只有console.assert第一个参数的结果为“false”时，第二个参数才是log()。

// false时返回log
console.assert(document.getElementById("demo"), "'demo'というIDはありません"); 
// true不返回log
console.assert(document.getElementById("test"), "'test'というIDはありません");

不要忘记console.count()

如果要需要使用计数器输出，建议使用console.count（）。

for (i = 0; i < 10; i++) {
  console.count();
}

在callback中使用console.trace()

想知道callback是从哪里被调用时，console.trace()非常方便！

    function foo() {
        function bar() {
          console.trace();
        }
        bar();
      }
      foo();

计时器console.time()和console.timeEnd()

使用console.time()与console.timeEnd()，会输出它俩之间的时间间隔。

function foo() {
 function bar() {
   console.time();
   console.log("タイマー開始");
   console.trace();
   }
   bar();
   }
   foo();
   console.timeEnd();
   console.log("タイマー終了");

使用console.clear()清空控制台

console.clear()的功能非常简单，它会把控制台中的信息清空一次。

function foo() {
 function bar() {
  console.log("開始");
  console.log("いい天気だなぁ");
 }
 bar();
 console.clear();
}
foo();
console.log("終了");

「Console was cleared」这里被清空了！

想分组的话就用console.group()！

如果你进阶使用JavaScript，并且想要做更深入，更复杂和更高级的事情，你可能想使用console.group()。
它可以嵌套和显示数据。

let number = 1;

console.group('Loopの外だよ');
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('おわり');

你可能会想，这玩意虽然看起来叼的一比，但我该如何使用它呢？这里有个例子：

class momoClass {
  constructor(dataAccess) {
    console.group('データタイプチェック');
    console.log('チェック結果');
    console.assert(typeof dataAccess === 'object',
      '誤ったデータタイプのオブジェクトの可能性があります');
    this.initializeEvents();
    console.groupEnd();
  }
  initializeEvents() {
    console.group('イベント');
    console.log('イベント発動中');
    console.groupEnd();
  }
}
let myClass = new momoClass(false);

输入并执行这段代码，console.log（）会让你虎躯一震！哈哈。

总结

之前一直使用console.log(),没想到还有这么多console.xx方法，学习了！

转载许可

请忽视三脚猫英语。