本文转载自: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.log

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

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

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

这个看起来很漂亮!当需要查看console.log中的对象数组时,console.table非常有用。
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.dir

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

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

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

想引人注意的时候,console.warn非常方便。
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.assert

不要忘记console.count()

如果要需要使用计数器输出,建议使用console.count()。

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

console.count

在callback中使用console.trace()

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

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

console.trace()

计时器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.timeEnd

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

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

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

「Console was cleared」这里被清空了!
console.clear

想分组的话就用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('おわり');

console.groupEnd

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

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方法,学习了!

转载许可

请忽视三脚猫英语。
can reprint

我来吐槽

*

*

3位绅士参与评论

  1. ephanoco11-05 16:21 回复

    Awesome!

  2. 后宫学长06-27 14:22 回复

    前端调试好帮手。

  3. 广树06-21 12:53 回复

    最近正好需要,马克!