console的用法，不仅仅只有console.log()

在JavaScript开发调试中，console.log()是我们最常用的方法，但是还有其它几个常用的方法，值得我们试一试，也许会起到意想不到的效果。

预计本篇文章阅读时间预计2分钟

基础用法——console.log()

打印一段文本

console.log('Is this working?'); 

打印对象

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

接着我们看控制台的输出展现：

从图中我们看出，无法看出对应的变量名；如果想让两个对象一起输出，我们可以使用console.log({ foo, bar })，由于一行内容显示有限，对象内容部分进行了省略，我们必须点击左边的小箭头看更详细的内容，如下图所示：

console.table()

为了增加输出的可读性，我们可以使用console.table()让其通过表格的形式进行展示，比如我们在控制台输出console.table({ foo, bar})，如下图所示：

console.group()

有时候，为了方便分析，你需要将一些对象变量等信息进行分组打印输出，示例如下：

console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer'); // Nested Group console.group('Address'); console.log('Street: 123 Townsend Street'); console.log('City: San Francisco'); console.log('State: CA'); console.groupEnd(); console.groupEnd(); 

console.warn() & console.error()

一些特别的信息我们需要特别强调醒目的输出出来，比如警告和错误信息，你可以使用console.warn() & console.error()，输出的展示形式如下图所示，是不是更醒目：

你还可以更进一步，自定义打印输出的样式，我们可以使用%c语法。使用这个语法我们可以更直观的区分打印输出来源哪个API调用，用户事件等，示例如下：

console.log('%c Auth ', 'color: white; background-color: #2274A5', '登录验证通过'); console.log('%c GraphQL ', 'color: white; background-color: #95B46A', '获取用户信息'); console.log('%c Error ', 'color: white; background-color: #D33F49', '获取用户信息失败'); 

console.trace()

console.trace()方法用于显示当前执行的代码在堆栈中的调用路径。如下段代码所示，在控制台里清晰了展示了add()的调用轨迹

function add(a,b){ console.trace(); return a+b; } function add3(a,b){return add2(a,b);} function add2(a,b){return add1(a,b);} function add1(a,b){return add(a,b);} var x = add3(1,1); 

console.time()

我们在开发过程中，经常需要知道一个方法运行了多长时间，方便我们做出修改完善的判断，我们可以使用console.time()，示例如下：

let i = 0; console.time("While loop"); while (i < ) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < ; i++) { // For Loop } console.timeEnd("For loop"); 

console.dir()

console.dir()可以直观展示一个对象的所有属性和方法，示例代码如下：

function cat(name, age, score){ this.name = name; this.age = age; this.score = score; } var c = new cat("miao", 2, [6,8,7]); console.dir(c); 

今天的小技巧分享就到这里，希望对你有所帮助，欢迎到留言区进行交流分享。

更多精彩内容，请微信关注“前端达人”公众号