发布于 2026-01-06 0 阅读
0

7. console.log() 的替代方案

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



Enter fullscreen mode Exit fullscreen mode

这将给我们一个简洁的小表格:

console.table()

凉爽的?

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


Enter fullscreen mode Exit fullscreen mode

这会记录日志Assertion failed: 1 is not even!,因为一不是偶数!(谁告诉你一是偶数了??去学校好好学学吧)

console.count()

console.count()用于检查该行被调用了多少次。



for (let i = 0; i < 3; i++) {
    console.count();
}


Enter fullscreen mode Exit fullscreen mode

这将记录日志:



default: 1
default: 2
default: 3


Enter fullscreen mode Exit fullscreen mode

您还可以为计数添加标签:



for (let i = 0; i < 3; i++) {
    console.count('outer loop');
    for (let i = 0; i < 3; i++) {
        console.count('inner loop');
    }
}


Enter fullscreen mode Exit fullscreen mode

这将记录日志:



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

这样应该会记录两个可打开/可关闭的组,这在处理大量日志时非常有用。

在组内,您可以使用任何其他控制台方法,即使是嵌套方法。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()


Enter fullscreen mode Exit fullscreen mode

这将记录类似这样的内容:



default: 9531ms - timer ended


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

这将记录日志:



first: 8497ms
first: 17815ms - timer ended
second: 9318ms - timer ended


Enter fullscreen mode Exit fullscreen mode

console.trace()

当你在处理大量嵌套函数调用或递归时,你迟早会需要知道哪个函数调用了哪个函数。console.trace()这是一个很方便的方法:



const shallow = () => deep();
const deep = () => deeper();
const deeper = () => deepest();
const deepest = () => console.trace()

shallow()


Enter fullscreen mode Exit fullscreen mode

这将记录以下堆栈跟踪信息:



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


Enter fullscreen mode Exit fullscreen mode

现在我们可以很容易地看出,浅层被调用deep,这调用了,deeper这调用了deepest


清单到此结束!

如果你觉得这篇文章有用,请分享出去!或者在推特或这里关注我,以便及时了解我的博客文章!

文章来源:https://dev.to/byteslash/7-consolelog-alternatives-377k