除了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 < 1000000) {
  i++;
}
console.timeEnd("While loop");

console.time("For loop");
for (i = 0; i < 1000000; 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);复制代码

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

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