js的console.log()你真的会用吗？很少人知道的特殊用法

在JavaScript中调试任何内容的最简单方法之一是使用console.log。但是其实还有许多其他方法可以帮助我们更好地进行调试。

 

现在，想象一下您需要打印出这些对象

const foo = { id: 1, verified: true, color: 'green' };
const bar = { id: 2, verified: false, color: 'red' };

 

 

如你所见，虽然打印出来了，但是并没有显示对象的变量名，如果在一个项目里，打印了很多对象，我们很难分辨哪个对应哪个对象，这看起来太累了，在此，我推荐用：

console.log({ foo, bar });

 

这样子能看到foo和bar这两个名字，看起来是不是清楚了很多

 

console.table（）

console.table()可以让对象以表格的形式展现出来，我们这样写：console.table({ foo, bar})，控制台显示如下：

 

 

console.group（）

console.group()可以用来分组，不多说，直接看例子：

console.group（'用户详细信息'）;
console.log（'name：John Doe'）;
console.log（'job：Software Developer'）;//嵌套组
console.group（'Address'）;
console.log（'街：123 Townsend Street'）;
console.log（'城市：旧金山'）;
console.log（'State：CA'）;
console.groupEnd（）; console.groupEnd（）;

 

 

看见没，console.group()跟console.groupEnd()之间的log被分成了一组，group和groupEnd之间还可以包含子分组。

如果您希望在默认情况组是折叠起来的，可以使用console.groupCollapsed()代替console.group()。这样，您需要点击左侧的箭头才能展开。

console.warn（）和console.error（）

console.warn()打印出来的信息前面会有警告图标

console.error()。打印出来的信息会是红色的

如下图所示：

 

还可以自定义样式。您可以在第一个参数前加%c指令，第二个参数写css代码，这样，打印出来的就会是带样式的，看下面的例子：

console.log('%c Auth ', 

            'color: white;

            'Login page rendered');

 

console.log('%c GraphQL ', 

            'color: white;

            'Get user details');

 

console.log('%c Error ', 

            'color: white;

            'Error getting user details');

 

 

console.trace（）

console.trace()将堆栈跟踪输出到控制台，并显示代码在某个点结束的方式。某些方法只需要调用一次，例如从数据库中删除。console.trace()可用于确保代码按照我们希望的方式运行。

console.time()和console.timeEnd()

 

把代码放在console.time()和console.timeEnd()之间，会自动打印出执行里面代码所用的时间

console.time（“While循环”）;
while（i <1000000）{
  i ++;
}
console.timeEnd（“while loop”）; console.time（“For loop”）;
for（i = 0; i <1000000; i ++）{
  // For Loop
}
console.timeEnd（“For loop”）;

 

 

想学习更多前端干货，请长按以下二维码，关注订阅号，帮助你成为前端高手