推荐几个不错的console调试技巧

在咱们的平常前端开发中，使用最频繁的莫过于使用console.log在浏览器的控制台中打印出咱们须要调试的信息，可是大部分人可能跟以前的我同样，没有意识到其实console除了log方法之外，还有不少实用的方法，这些方法可使咱们的调试过程更加容易，也表达得更加直观，更加丰富多彩，下面咱们就来看看有哪些实用的方法吧！

一、console.log()

咱们常常会使用console.log来打印出某个变量的值或者某个实体对象，也能够传入多个变量参数，它会按照传入顺序进行打印：

1. 传入一个变量
const a = 1;
console.log(a); // -> 1

2. 传入一个对象
const foo = {a: 1};
console.log(foo); // -> {a: 1}

3. 传入多个变量
console.log(a, foo); // -> 1 {a: 1}

除此以外，它还支持格式化打印的功能，传入特定的占位符来对参数进行格式化处理，常见的占位符有如下几种：
1) %s：字符串占位符
2) %d：整数占位符
3) %f：浮点数占位符
4) %o：对象占位符(注意是字母o，不是数字0)
5) %c: CSS样式占位符

const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};

一、%s 字符串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.

二、%d 整数占位符
console.log('I won %d times', number); // -> I won 100 times.

三、%f 浮点数占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5

四、%o 对象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.

五、%c CSS样式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);

其中CSS样式占位符效果以下：

二、console.warn()

你能够彻底使用console.warn来代替console.log方法，但前提是该条打印信息是属于警告级别而不是普通讯息级别，所以浏览器遇到一条警告级别的信息会区别对待，最明显的是它的左侧会有一个警告图标，而且背景色和文字颜色也会不同。

相比于普通讯息，警告信息会出如今上图左侧的warning面板中，而不是info面板中，这样也有助于咱们在一堆打印信息中快速筛选出警告信息，方便查看。

三、console.dir()

在大多数状况下，console.dir方法的做用和console.log做用类似，可是有一点细微的差异。

在上图中，咱们能够看到，console.log方法会将打印结果的详细信息显示完整，可是console.dir方法只会打印出对象，不会展开详细信息，固然点击以后看到的信息和前者同样。
惟一差别比较大的地方是当咱们打印HTML文档中的节点时，会有彻底不同的表现形式。例如咱们使用console.log来打印body标签：

咱们会方便地看到DOM结构，而且鼠标移上去可以帮咱们自动定位到对应的DOM节点。可是在某些状况下，其实这并非你想要看到的效果，或许你想看到的是该DOM节点下的全部属性信息，那么你能够尝试使用console.dir方法来试试：

四、console.table()

在咱们的项目开发中常常会遇到对象数组形式的列表数据，在调试过程当中咱们可能会使用console.log方法打印出这些数据来进行查看，但比起前者，还可使用一种比较可视化的方式来进行打印。例如，这里准备一些列表数据：

const response = [
  {
      id: 1,
      name: 'Marry',
      age: 18,
      sex: 0
  },
  {
     id: 2,
     name: 'John',
     age: 20,
     sex: 1
  }
];

而后咱们使用console.log来进行打印：

能够看出，咱们打印出的结果并不够直接，没有给人一种一目了然的效果，接着换着使用console.table来打印：

能够看到，咱们的列表数据被清晰完整地展示在了表格当中，同时console.table提供第二个可选参数用于筛选表格须要显示的列，默认为所有列都显示。

上图咱们经过添加第二个参数，数组中为须要在表格中显示的字段名，这样就很方便地在结果数据中过滤掉咱们不须要关心的信息。

五、console.assert()

assert即断言，该方法接收多个参数，其中第一个参数为输入的表达式，只有在该表达式的值为false时，才会将剩余的参数输出到控制台中。

上图中的第二行由于arr.length > 5值为false，所以打印出后面的信息。若是在某些场景下你须要评估当前的数据是否知足某个条件，那么不妨使用console.assert()方法来在控制台中查看断言信息。

六、console.trace()

该方法用于在控制台中显示当前代码在堆栈中的调用路径，经过这个调用路径咱们能够很容易地在发生错误时找到原始错误点，示例以下：

function foo(data) {
  if (data === null) {
    console.trace();
    return [];
  }
  return [data.a, data.b];
}

function bar1(data) {
  return foo(data);
}

function bar2(data) {
  return foo(data);
}

bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null); // -> []

在上面代码中，咱们分别在bar1和bar2函数中调用foo函数并传入不一样的参数，很显然bar2函数在执行时会进入if语句并执行console.trace()方法，如下是控制台中打印结果：

能够看到自下而上的一条调用路径，并能够快速断定是在bar2函数中传入了不合适的参数null而致使出错，方便咱们跟踪发生错误的原始位置。

七、console.count()

该方法至关于一个计数器，用于记录调用次数，并将记录结果打印到控制台中。其接收一个可选参数console.count(label)，label表示指定标签，该标签会在调用次数以前显示，示例以下：

for (let i = 1;i <= 5;i++) {
    if (!(i % 2)) {
        console.count('even');
    } else {
        console.count('odd');
    }
}

代码中若是i是偶数，则会对even计数器进行计数，不然对odd计数器进行计数，执行后咱们会在控制台中看到以下列表：

odd: 1
even: 1
odd: 2
even: 2
odd: 3

八、console.time() & console.timeEnd()

这两个方法通常配合使用，是JavaScript中用于跟踪程序执行时间的专用函数，console.time方法是做为计算的起始时间，console.timeEnd是做为计算的结束时间，并将执行时长显示在控制台。若是一个页面有多个地方须要使用到计算器，则能够为方法传入一个可选参数label来指定标签，该标签会在执行时间以前显示。在以往咱们计算程序的执行时间时，咱们通常会采用以下方式：

const startTime = performance.now();
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
const diffTime = performance.now() - startTime;
console.log(`Execution time: ${ diffTime }`);

这是一种比较传统的作法，咱们还可使用console.time来实现：

console.time('sum');
let sum = 0;
for(let i = 0;i < 100000;i++) {
    sum += i;
}
console.timeEnd('sum');

控制台效果以下：

相比于第一种实现方式，咱们没有设置任何临时变量而且没有作任何计算。

九、console.group() & console.groupEnd()

顾名思义，对数据信息进行分组，其中console.group()方法用于设置分组信息的起始位置，该位置以后的全部信息将写入分组，console.groupEnd()方法用于结束当前的分组，示例以下：

class MyClass {
  constructor() {
    console.group('Constructor');
    console.log('Constructor executed');
    this.init();
    console.groupEnd();
  }

  init() {
    console.group('init');
    console.log('init executed');
    console.groupEnd();
  }
}
const myClass = new MyClass();

控制台效果以下：

该方法的做用主要是让咱们在控制台打印的日志更加清晰可读。

十、浏览器转为编辑器

在大部分状况下，咱们在浏览器中调试DOM结构或者编辑一些文本时，会在Chrome Developer Tools的Elements选项中对DOM节点进行编辑，可是一旦节点过多，会很容易增长调试过程的困难，这里咱们可使用一种方式来将浏览器直接转换为编辑器模式：

document.body.contentEditable = true;

在控制台中输入以上代码后，能够将浏览器中的全部内容变为可编辑状态，效果图以下：

十一、Chrome Command Line API

Google的Chrome Command Line API包含了一个用于执行如下常见任务的便捷函数集合：选择和检查DOM元素，以可读格式显示数据，中止和启动分析器，以及监控DOM事件。

注意：此API只能经过浏览器控制台获取，没法经过网页脚原本进行访问。

11.1 选择DOM元素

当咱们使用jQuery的时候，咱们能够经过各类选择器例如$('#id')和$('.class')来选择匹配的DOM元素，可是若是咱们没有引入jQuery时，咱们仍然能够在Chrome的控制台中进行一样的操做。Chrome Command Line API提供了如下几种选择DOM元素的方式：

• $(selector)：返回匹配指定CSS选择器的DOM元素的第一个引用，至关于document.querySelector()函数。
• $$(selector)：返回匹配指定CSS选择器的DOM元素数组，至关于document.querySelectorAll()函数。
• $x(path)：返回一个与给定XPath表达式匹配的DOM元素数组。

$x('//p[a]')表示返回包含 <a>元素的全部 <p>元素。

11.2 检索最后一个结果的值

在控制台中咱们常常会进行一些计算，某些状况下你可能须要跟踪你以前的计算结果来用于后面的计算，使用$_标记可用于返回最近评估的表达式的值，示例以下：

1 + 2 + 3 + 4 // -> 10

$_ // -> 10

$_ * $_ // -> 100

Math.sqrt($_) // -> 10

$_ // -> 10

11.3 查找与指定DOM元素关联的事件

当咱们须要查找DOM中与某个元素关联的全部事件时，控制台提供了getEventListeners方法来帮助咱们找到这些关联的事件。
getEventListeners($('selector'))返回在指定DOM元素上注册的事件监听器。返回值是一个对象，对象的key为对应的事件类型(例如click，focus)，对象的value为一个数组，其包含了对应事件类型下的全部事件监听器。例如，下面列出了在document上注册的全部事件监听器：

若是咱们须要找到某个特定的事件监听器，能够经过以下方式进行访问：

// eventName表示对应的事件类型
// index表示该事件类型下的事件监听器数组的索引
getEventListeners($('selector')).eventName[index].listener

// 例如获取document下click事件监听器数组的第一项
getEventListeners(document).click[0].listener

11.4 监控事件

若是你但愿在执行绑定到DOM中特定元素的事件时监视它们，控制台提供了monitorEvents方法来帮助你使用不一样的命令来监控其中的一些或者全部事件：

• monitorEvents($('selector'))：将监视与选择器匹配的元素关联的全部事件，当这些事件被触发时会将它们打印到控制台。例如monitorEvents($('#content'))将监视id为content的元素关联的全部事件。
• monitorEvents($('selector'), 'eventName')：将监视选择器匹配的元素的某个特定的事件。 例如，monitorEvents($('#content'), 'click')将监视id为content的元素关联的click事件。
• monitorEvents($('selector'), [eventName1, eventName2, ...])：将监视选择器匹配的元素的某些特定的事件。与上述不一样的是，第二项能够传入一个字符串数组，包含全部须要监听的事件类型名称，以此达到自定义监听的目的。例如monitorEvents($('#content'), ['click', 'focus'])将监视id为content的元素关联的click和focus事件。
• unmonitorEvents($('selector'))：将中止监视选择器匹配的元素关联的全部事件。例如unmonitorEvents($('#content'))将中止监视id为content的元素关联的全部事件。

效果图以下：

11.5 检查DOM元素

控制台提供了inspect()方法让咱们能够直接从控制台中检查一个DOM元素。

• inspect($('selector'))：将检查与选择器匹配的元素，而且会自动跳转到Chrome Developer Tools的Elements选项卡中。例如inspect($('#content'))将检查id为content的元素。

效果图以下：

交流

这篇主要是分享了几个笔者以为不错的console调试技巧，但愿在你的前端代码调试过程当中能对你有所帮助，以为文章不错的话，欢迎关注笔者的公众号，每周都会原创和整理一些前端技术干货，但愿和你们一块儿互相交流学习，共同进步。

文章已同步更新至Github博客，若觉文章尚可，欢迎前往star！

你的一个点赞，值得让我付出更多的努力！

逆境中成长，只有不断地学习，才能成为更好的本身，与君共勉！