在我们的日常前端开发中，使用最频繁的莫过于使用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} 

除此之外，它还支持格式化打印的功能，传入特定的占位符来对参数进行格式化处理，常见的占位符有以下几种：
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'};  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样式占位符效果如下：

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

11.1 选择DOM元素

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

• $(selector)：返回匹配指定CSS选择器的DOM元素的第一个引用，相当于document.querySelector()函数。
• $$(selector)：返回匹配指定CSS选择器的DOM元素数组，相当于