在我们的日常前端开发中，使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息，但是大部分人可能跟之前的我一样，没有意识到其实console除了log方法以外，还有很多实用的方法，这些方法可以使我们的调试过程更加容易，也表达得更加直观，更加丰富多彩，下面我们就来看看有哪些实用的方法吧！
1、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}
除此之外，它还支持格式化打印的功能，传入特定的占位符来对参数进行格式化处理，常见的占位符有以下几种：
%s：字符串占位符
%d：整数占位符
%f：浮点数占位符
%o：对象占位符(注意是字母o，不是数字0)
%c: CSS样式占位符
const string = 'Glory of Kings'; const number = 100; const float = 9.5; const obj = {name: 'daji'}; 1、%s 字符串占位符 console.log('I do like %s', string); // -> I do like Golry of Kings. 2、%d 整数占位符 console.log('I won %d times', number); // -> I won 100 times. 3、%f 浮点数占位符 console.log('My highest score is %f', float); // -> My highest score is 9.5 4、%o 对象占位符 console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}. 5、%c CSS样式占位符 console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);
其中CSS样式占位符效果如下：
2、console.warn()
你可以完全使用console.warn来代替console.log方法，但前提是该条打印信息是属于警告级别而不是普通信息级别，因此浏览器遇到一条警告级别的信息会区别对待，最明显的是它的左侧会有一个警告图标，并且背景色和文字颜色也会不一样。
相比于普通信息，警告信息会出现在上图左侧的warning面板中，而不是info面板中，这样也有助于我们在一堆打印信息中快速筛选出警告信息，方便查看。
3、console.dir()
在大多数情况下，console.dir方法的作用和console.log作用相似，但是有一点细微的差别。
在上图中，我们可以看到，console.log方法会将打印结果的详细信息显示完整，但是console.dir方法只会打印出对象，不会展开详细信息，当然点击之后看到的信息和前者一样。唯一差异比较大的地方是当我们打印HTML文档中的节点时，会有完全不一样的表现形式。例如我们使用console.log来打印body标签：
我们会方便地看到DOM结构，并且鼠标移上去能够帮我们自动定位到对应的DOM节点。但是在某些情况下，其实这并不是你想要看到的效果，或许你想看到的是该DOM节点下的所有属性信息，那么你可以尝试使用console.dir方法来试试：
4、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提供第二个可选参数用于筛选表格需要显示的列，默认为全部列都显示。
上图我们通过添加第二个参数，数组中为需要在表格中显示的字段名，这样就很方便地在结果数据中过滤掉我们不需要关心的信息。
5、console.assert()
assert即断言，该方法接收多个参数，其中第一个参数为输入的表达式，只有在该表达式的值为false时，才会将剩余的参数输出到控制台中。
