js打印到控制台_调试 JavaScript 和 Node 时应使用的8个控制台命令

f87bc32e1fa5648d068e42d5566b22f7.png

只需要花费 3 分钟的时间,学习更多用于调试的控制台命令吧!

console API

每个 JavaScript 开发人员都使用过 console.log()console 模块是 JavaScript 中最常见的模块之一,其 API 在 Node 中表现为:

console 模块提供了一个简单的调试控制台,类似于 Web 浏览器提供的 JavaScript 控制台。

这是在 Node.js文档 页面上对 Console 模块的定义。但是,初学者在学习新技术时,更倾向于直接百度或谷歌搜索出具体的解决方案,而不是去阅读官方文档,这就使得初学者不能完全掌握该新技术的所有正确使用方案,容易在实际开发过程中踩坑。

在谈到 Console API,通常初学者只使用一些基本功能,如? console.log() 、⚠️ console.warn() ,或 ❌ console.error() 等。但是还有很多其他方法可以满足我们的要求,并能在开发过程中提高调试效率。

Console 对象可以从任何全局对象中访问到,因此不需要 console 模块。

一、console.assert ✅

console.assert 函数用于判断第一个参数是否为=真。false 的话抛出异常并且输出为 Assertion failed 以及第一个参数后的额外参数;true 的话代码执行将继续进行,而不会记录任何日志。

// true,没有打印输出
console.assert(1, 'Hello Bottle');
console.assert(true, 'Hello Bottle');
console.assert('hello an', 'Hello Bottle');

// false,有打印输出
console.assert(0, 'Hello Bottle');
// Assertion failed: Hello Bottle
console.assert(false, 'Hello Bottle');
// Assertion failed: Hello Bottle
console.assert('', 'Hello Bottle');
// Assertion failed: Hello Bottle

当我们想要检查值是否存在,并且希望保持控制台干净(避免记录较长的属性列表等),我们可以使用 console.assert 方法。

二、console.count 和 console.countReset ?

这两种方法用于设置和清除计数器,以记录特定字符串在控制台中调用 console.count 的次数:

// 控制台打印 Hello Bottle 被 console.count 的次数
console.count('Hello Bottle');
// Hello Bottle: 1
console.count('Hello Bottle');
// Hello Bottle: 2
console.count('Hello Bottle');
// Hello Bottle: 3

// 重置 Hello Bottle 的 console.count 次数为 0
console.countReset('Hello Bottle');

console.count('Hello Bottle');
// Hello Bottle: 1

计算并重置 Hello Bottle 字符串的日志出现次数。

三、console.group 和console.groupEnd ?

console.group 在控制台中创建一个新的分组,之后你所有输出到控制台的内容都属于该分组,直到 console.groupEnd 结束该分组。你可以设置参数作为 console.group() 创建分组的描述:

console.group('Grandparents group');
console.log('Grandpa');
console.log('Grandma');
console.groupEnd()

console.group('Parents group');
console.log('Father');
console.log('Mother');
console.groupEnd()

console.group('Children group');
console.log('Son');
console.log('Daughter');
console.groupEnd()

c5f99da80cc8196edd8c975f5114ec51.png

四、console.table ?

此方法用于描述特定化的数组或对象,它会把传入的数据以表格的方式输出:

const users = [
  {name: 'Bottle', age: 12},
  {name: 'AnGe', age: 18}
];

console.table(users);

54448e3289992e7da72f70b88bd876bb.png

用户对象列表。

console.table 使嵌套或复杂的数组/对象的检查和记录变得更加容易。

五、console.time 和 console.timeEnd ⏱

如果你想在执行时检查代码的性能,你可以在代码开始时使用 Date 创建一个开始时间戳,在代码结束时比较 Date.now() 与开始时间戳,像这样:

const start = Date.now();
// ...
const diff = Date.now() - start;
console.log('Time execution: ' + diff + ' ms');
// Time execution:  ms

这样实现起来很麻烦,那么有没有一种简单的方法来实现喃?

我们可以使用 console.timeconsole.timeEnd ,你只需执行以下操作即可获取某一个操作的执行时长:

const start = Date.now();
for(let i = 0; i 10000000; i++) {
    1+1; // ...
}
const diff = Date.now() - start;
console.log('Time execution with Date.now: ' + diff + ' ms');
// Time execution with Date.now: 8 ms

console.time('Time execution with console.time');
for(let i = 0; i 10000000; i++) {
    1+1; // ...
}
console.timeEnd('Time execution with console.time')
// Time execution with console.time: 7.21630859375ms

如你所见,console.time 还返回了更准确的结果。

总结

现在,你可以在 Console API 中使用更多出色的工具。将它们应用于项目开发调试中,你的开发速度将会成倍提高!

❤️感谢阅读

1. ❤️玩得开心,不断学习,并始终保持编程。?

2. ?点击原文,查看更多精彩文章!?

3. 如有任何问题或更独特的见解,欢迎联系瓶子君!(关注公众号,回复 123 即可)??

4191610cbbb7ad7984c548d669f4faf6.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值