7. console.log() 的替代方案
有时在调试过程中,你可能会用到 ` console.logsetup` 或 ` console.warnsetout`。但还有很多其他方法可以帮助你更好地调试代码。让我们来看看其中的一些方法:
console.table()
这是列表中最便捷的方法。它可以用来以表格形式记录任何对象或数组。
console.table([
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
},
{
"userId": 1,
"id": 3,
"title": "fugiat veniam minus",
"completed": false
},
{
"userId": 1,
"id": 4,
"title": "et porro tempora",
"completed": true
},
{
"userId": 1,
"id": 5,
"title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
"completed": false
},
{
"userId": 1,
"id": 6,
"title": "qui ullam ratione quibusdam voluptatem quia omnis",
"completed": false
},
]);
这将给我们一个简洁的小表格:
凉爽的?
console.assert()
console.assert()用于断言某个信息是否为真。如果不是真,它会在控制台记录一条消息。
const isEven = n => n % 2 === 0;
for (let i = 0; i < 3; i++) {
console.assert(isEven(i), '%s is not even!', i);
}
这会记录日志Assertion failed: 1 is not even!,因为一不是偶数!(谁告诉你一是偶数了??去学校好好学学吧)
console.count()
console.count()用于检查该行被调用了多少次。
for (let i = 0; i < 3; i++) {
console.count();
}
这将记录日志:
default: 1
default: 2
default: 3
您还可以为计数添加标签:
for (let i = 0; i < 3; i++) {
console.count('outer loop');
for (let i = 0; i < 3; i++) {
console.count('inner loop');
}
}
这将记录日志:
outer loop: 1
inner loop: 1
inner loop: 2
inner loop: 3
outer loop: 2
inner loop: 4
inner loop: 5
inner loop: 6
outer loop: 3
inner loop: 7
inner loop: 8
inner loop: 9
console.group()和console.groupEnd()
console.group()并console.groupEnd()用于将相似(或不同;)的日志分组在一起。
console.group('group 1');
for (let i = 0; i < 3; i++) {
console.log(i);
}
console.groupEnd('group 1');
console.group('group 2');
for (let i = 0; i < 3; i++) {
console.log(i);
}
console.groupEnd('group 2');
这样应该会记录两个可打开/可关闭的组,这在处理大量日志时非常有用。
在组内,您可以使用任何其他控制台方法,即使是嵌套方法。console.group()
您还可以使用此功能console.groupCollapsed()将群组默认设置为关闭状态。
console.time()和朋友们
你可以使用console.time()它及其朋友console.timeStart(),,console.timeEnd()和console.timeLog()来测量东西。
console.time();
for (let i = 0; i < 1e9; i++) {
// Intense stuff
}
console.timeEnd()
这将记录类似这样的内容:
default: 9531ms - timer ended
9531msconsole.time()是和之间的时间console.timeEnd()。
您还可以为这些计时器添加标签,以便同时运行多个独立的计时器:
console.time('first');
for (let i = 0; i < 1e9; i++) {
// Intense stuff
}
console.timeLog('first'); // Logging how much time has passed
console.time('second');
for (let i = 0; i < 1e9; i++) {
// Intense stuff
}
console.timeEnd('first');
console.timeEnd('second');
这将记录日志:
first: 8497ms
first: 17815ms - timer ended
second: 9318ms - timer ended
console.trace()
当你在处理大量嵌套函数调用或递归时,你迟早会需要知道哪个函数调用了哪个函数。console.trace()这是一个很方便的方法:
const shallow = () => deep();
const deep = () => deeper();
const deeper = () => deepest();
const deepest = () => console.trace()
shallow()
这将记录以下堆栈跟踪信息:
console.trace()
deepest debugger eval code:4
deeper debugger eval code:3
deep debugger eval code:2
shallow debugger eval code:1
<anonymous> debugger eval code:1
现在我们可以很容易地看出,浅层被调用deep,这调用了,deeper这调用了deepest
清单到此结束!
如果你觉得这篇文章有用,请分享出去!或者在推特或这里关注我,以便及时了解我的博客文章!
文章来源:https://dev.to/byteslash/7-consolelog-alternatives-377k
