前言
在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')
打印结果:
2. console.count()
该方法会记录调用count()
方法的执行次数,快速帮你实现一个计数器。可传递一个参数用于标记计数器的名称。
function welcome() {
console.count();
return 'Welcome to the future!'
}
welcome()
welcome()
welcome('welcome')
welcome()
welcome()
打印结果:
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();
4. console.clear()
该方法会清空控制台,当你不想看到之前运行的打印信息时,可以先调用清空,再打印你想看到的信息。
console.log(1);
console.log(2);
console.log(3);
console.clear();
console.log('hello world');
5. console.dir()
该方法可以显示指定 JavaScript
对象的属性列表,并以树形数据格式展现。这在想要查看一个标签元素具有哪些属性和方法信息时非常有用。
<body>
<input type="text">
<script>
const input = document.querySelector('input');
// 原样打印input标签
console.log(input);
// 树形打印input标签的信息
console.dir(input );
</script>
</body>
6. console.table()
这个方法第一个参数为必传参数 data
,data
必须是一个数组或者是一个对象;第二个参数为可选参数 columns
。
table()
会把数据 data
以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。
6.1 打印单个数组表格
console.table(["vilan", "女", "18"]);
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);
6.3 打印数组对象表格
console.table([
{name: 'vilan', age: 18, sex: '女'},
{name: '小明', age: 19, sex: '男'},
{name: '小红', age: 18, sex: '女'},
]);
6.4 自定义显示的的列的表格
可向table
方法传递第二个参数指定只显示哪些属性列。
console.table([
{name: 'vilan', age: 18, sex: '女'},
{name: '小明', age: 19, sex: '男'},
{name: '小红', age: 18, sex: '女'},
], ['name']);
6.5 二维数组表格
const people = [
["vilan", "18", "女"],
["小明", "19", "男"],
["小红", "18", "女"]
];
console.table(people);
7. console.debug()
该方法用来打印一条控制台的调试日志消息,只有在控制台配置为显示调试输出时(勾选Verbose
消息),才会向用户显示该消息。
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');
9. 设置控制台日志样式
// 自定义打印样式
function myLog(str) {
console.log(`%c${str}`, 'color: deeppink;font-size: 30px;font-weight: bold;')
}
myLog('hello world')
可自行封装一个打印方法,通过在打印内容前面增加%c
去应用自定义的打印样式。
总结
如果你也是只会使用console.log()
,发现控制台打印信息混乱,不妨试试以上方法,使你的调试更加高效。