console 的高级用法

本文内容参考自微信公众号 前端达人 —— [小技巧] console 的用法,不仅仅只有 console.log()点我火速到达

无论是在做前端的 JS 还是后端的 Node 服务,我们都少不了使用 console.log() 来打印一些运行日志,来帮助我们更好地判断程序是否按照预期运行,但是 console 的用法不仅仅局限于 console.log() ,它还有更多的用法,如果使用适当,开发、调试的效率会大大提高。我在一个公众号网上冲浪时,偶然发现了它一篇十分精彩的文章,分享出来与大家共勉。

一、console.log()

这是最常用的用法,我们把想要输出的数据放在圆括号里即可。有些同学可能有这样的苦恼,控制台的输出多了之后,没有办法和具体的代码对应上,所以在查找对应关系上会很耗费时间。这里提供一种解决办法,以下代码会将变量名一同输出。

let xiaoming = { name: "xiaoming", age: 8, grade: "三年级" };
let xiaohong = { name: "xiaohong", age: 10, grade: "五年级" };
console.log({ xiaoming, xiaohong });

Snipaste_2019-12-05_22-34-00.png

image-20191205225807934.png

二、console.table()

此方法常常用来打印数组(对象也用的比较多),如果数组的内容较多,使用console.log 打印出来会显示的不太直观,使用console.table 会以表格的形式展示。

let xiaoming = { name: "xiaoming", age: 8, grade: "三年级" };
let xiaohong = { name: "xiaohong", age: 10, grade: "五年级" };
let students = [xiaoming, xiaohong];
console.table(xiaoming);
console.table({ xiaoming, xiaohong });

Snipaste_2019-12-05_22-37-12.png

三、console.group()

有些时候我们需要将一些信息分组打印出来,将属于 XXX 的归为一类,将属于 YYY 的归为另一类,这时 console.group() 能够起到很好的帮助。

console.group("用户信息");
console.log("姓名: 狠人王某");
console.log("工作: 程序员");
// 嵌套分组
console.group("地址");
console.log("省市: 汉东省京州市");
console.log("街道: 中山路幸福花园");
console.groupEnd();
console.groupEnd();

image-20191205225649431.png

四、console.info()、console.warn() 和 console.error()

如果需要提示一些起到醒目作用的信息,可能会使用到 console.warn() & console.error(),这两者以彩色的形式展示,前者是警告,后者是错误。有时还可以使用自定义的样式输出到控制台。

console.error("发生了意外错误");

console.log("%c Auth", "color: white; background-color: #409EFF", "验证通过");
console.log("%c GraphQL", "color: white; background-color: #9564BA", "获取成功");
console.log("%c ERROR", "color: white; background-color: #D33F49", "获取失败");

image-20191205225522327.png

五、console.trace()

console.trace() 用于显示当前执行的代码在堆栈中的调用路径,如果代码比较混乱,分不清楚代码的调用次序,可以采用这种方法。

function add(a, b) {
  console.trace();
  return a + b;
}
function add3(a, b) { return add2(a, b) };
function add2(a, b) { return add(a, b) };
function add(a, b) { return add(a, b) };

image-20191205230449417.png

六、console.time()

如果在进行程序优化时,我们常常会把整个程序的执行时间统计下来,然后研究是哪里耗费了时间,再对症下药地进行优化。

let i = 0;
console.time("While Loop");
while(i < 10000000) {
    i ++;
}
console.timeEnd("While Loop");

console.time("For Loop");
for(let j = 0; j < 10000000; j ++) {}
console.timeEnd("For Loop");

image-20191205231013798.png

七、console.dir()

console.dir() 可以直观展示一个对象的所有属性和方法,但是我觉得和 console.log() 区别并不大。

function cat(name, age, score) {
  this.name = name;
  this.age = age;
  this.score = score;
}
let c = new cat("miao", 2, [6, 7, 8]);
console.dir(c);

添加新评论