只会用console.log调试也太low了,不妨多学几个提效的方法

843 阅读3分钟

前言

JavaScript项目进行开发调试时,大部分人都习惯于使用console.log在控制台打印相关调试信息。但是web控制台的强大远不止于此,下面将推荐一些能够帮你提高开发效率的调试方法

1. console.time() 和 console.timeEnd()

通过这两个方法的组合使用,可以让你快速记录某个代码块的运行时间。

console.time() 方法用于记录开始运行时间。

console.timeEnd() 方法用于记录结束运行时间。

两者都可传递一个参数,用来标记开始的计时器名称及需要结束的计时器名称。

/**
 * 获取运行时间
 */
function getRunningTime(timerName){
  console.time(timerName);
  for(let i = 0; i < 100000; i++){
    // todo...
  }
  console.timeEnd(timerName);
}
getRunningTime()
getRunningTime('forTimer')

打印结果:

image.png

2. console.count()

该方法会记录调用count()方法的执行次数,快速帮你实现一个计数器。可传递一个参数用于标记计数器的名称。

function welcome() {
  console.count();
  return 'Welcome to the future!'
}
welcome()
welcome()
welcome('welcome')
welcome()
welcome()

打印结果:

image.png

3. console.group()、groupCollapsed 和 console.groupEnd()

group()groupCollapsed()方法用于在控制台创建一个分组打印信息,可通过groupEnd()方法来结束一个分组。

// 自动展开分组打印信息
console.group("用户信息");
console.log("Name: Vilan");
console.log("Age: 18");
console.groupEnd();

// 默认折叠分组打印信息
console.groupCollapsed("用户信息");
console.log("Name: 小明");
console.log("Age: 25");
console.groupEnd();

image.png

4. console.clear()

该方法会清空控制台,当你不想看到之前运行的打印信息时,可以先调用清空,再打印你想看到的信息。

console.log(1);
console.log(2);
console.log(3);
console.clear();
console.log('hello world');

image.png

5. console.dir()

该方法可以显示指定 JavaScript 对象的属性列表,并以树形数据格式展现。这在想要查看一个标签元素具有哪些属性和方法信息时非常有用。

<body>
  <input type="text">
  
  <script>
  const input = document.querySelector('input');
  // 原样打印input标签
  console.log(input);
  // 树形打印input标签的信息
  console.dir(input );
  </script>
</body>

image.png

6. console.table()

这个方法第一个参数为必传参数 datadata 必须是一个数组或者是一个对象;第二个参数为可选参数 columns

table()会把数据 data 以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。

6.1 打印单个数组表格

console.table(["vilan", "女", "18"]);

image.png

6.2 打印单个对象表格

console.table({name: 'vilan', age: 18, sex: '女'});
class Person {
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
}
const person = new Person('vilan', 18, '女');
console.table(person);

image.png

6.3 打印数组对象表格

console.table([
  {name: 'vilan', age: 18, sex: '女'},
  {name: '小明', age: 19, sex: '男'},
  {name: '小红', age: 18, sex: '女'},
]);

image.png

6.4 自定义显示的的列的表格

可向table方法传递第二个参数指定只显示哪些属性列。

console.table([
  {name: 'vilan', age: 18, sex: '女'},
  {name: '小明', age: 19, sex: '男'},
  {name: '小红', age: 18, sex: '女'},
], ['name']);

image.png

6.5 二维数组表格

const people = [
  ["vilan", "18", "女"],
  ["小明", "19", "男"],
  ["小红", "18", "女"]
];
console.table(people);

image.png

7. console.debug()

该方法用来打印一条控制台的调试日志消息,只有在控制台配置为显示调试输出时(勾选Verbose消息),才会向用户显示该消息。

image.png

8. console.assert()

如果传入的第一个参数为false,则将一个错误消息写入控制台。如果是 true,则不会做任何反应。

const count = 1
console.assert(count > 2, 'count大于2');
console.assert(count <= 1, 'count小于或等于1');
console.assert(count !== 1, 'count等于1');

image.png

9. 设置控制台日志样式

// 自定义打印样式
function myLog(str) {
  console.log(`%c${str}`, 'color: deeppink;font-size: 30px;font-weight: bold;')
}
myLog('hello world')

可自行封装一个打印方法,通过在打印内容前面增加%c去应用自定义的打印样式。

总结

如果你也是只会使用console.log(),发现控制台打印信息混乱,不妨试试以上方法,使你的调试更加高效。