menu 光风霁月。
Console 用法
477 浏览 | 2020-05-22 | 阅读时间: 约 2 分钟 | 分类: Javascript 原理 | 标签: Javascript
请注意,本文编写于 153 天前,最后修改于 153 天前,其中某些信息可能已经过时。

前言

无论是在做前端的 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 });

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

console.group()

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

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

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", "获取失败");

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

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

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);
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表评论

email
web

全部评论 (共 1 条评论)

    2020-05-22 16:13
    原来 console 有这么多用法啊,学到了哈哈。