在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; background-color: #2274A5',
'Login page rendered');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A',
'Get user details');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'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”）;
说点题外话，帮UI妹子征男友，她身高160，颜值65分，93年的，想找个程序员男朋友，
有意者请扫描以下二维码，我给你介绍
