console对象
最后更新于：2022-04-01 23:53:41
## console对象
`console`对象是JavaScript的原生对象，可以将信息输出在控制台。
**1、打开控制台**
不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：
- 按F12
- 鼠标右键里选择“检查”
- 在右上角的菜单中点击“更多工具/开发者工具”
打开控制台以后，你可以看到下列不同的面板：
```
Elements：查看网页的HTML源码和CSS代码。
Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
Network：查看网页的HTTP通信情况。
Sources：查看网页加载的所有源码。
Timeline：查看各种网页行为随时间变化的情况。
Profiles：查看网页的性能情况，比如CPU和内存消耗。
Console：用来运行JavaScript命令。
```
**2、console对象的方法**
**2.1 log()、warn()、info()、error()、debug()**
`console.log()`，在控制台中打印信息，它会自动在每次输出的结尾，添加换行符，它可以接受任何字符串、数字和JavaScript对象，也可以接受换行符n以及制表符t。
```
console.log(1); // 1
console.log('hello'); // "hello"
```
它可以接受多个参数，将它们的结果连接起来输出。
```
console.log('a', 'b', 1); // a b 1
```
当然`console`可不止这一个方法，它还有：
- console.info 用于输出提示性信息，会带上一个蓝色图标
- console.error用于输出错误信息，会在最前面带上红色的叉，表示出错
- console.warn用于输出警示信息，会在最前面带上黄色三角
- console.debug用于输出调试信息
```
console.info(“提醒”);
console.error(“报错了”);
console.warn(“警告”);
console.debug(“调试信息”);
```
console对象的上面5种方法，如果第一个参数是格式字符串（使用了格式占位符），将依次用后面的参数替换占位符，然后再进行输出。
不过，占位符的种类比较少，只支持下列五种：
```
字符（%s）
整数（%d或%i）
浮点数（%f）
对象（%o）
CSS格式字符串（%c）
```
例子：
```
console.log('%s%s',1,2); // 12
console.log("%c自定义样式","font-size:20px;color:green");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");
```
**2.2 trace()、clear()**
`console.trace()`方法显示当前执行的代码在堆栈中的调用路径。
用`console.clear()`清空控制台。
**2.3 dir()、dirxml()**
`console.dir` 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等
```
console.log({name: 'tg', age: 12});
// Object {name: "tg", age: 12}
console.dir({name: 'tg', age: 12});
// Object
name: "tg",
age: 12,
__proto__: Object
```
`console.dirxml`用来显示网页的某个节点（node）所包含的html/xml代码
```
//输出：
```
**2.4 group()、groupEnd()、groupCollapsed()**
`console.group`和`console.groupend`这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
`console.group`输出一组信息的开头
`console.groupEnd`结束一组输出信息
`console.groupCollapsed`方法与`console.group`方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
**2.5 assert()**
`console.assert`对输入的表达式进行断言，接受两个参数，第一个参数是表达式，第二个参数是字符串。只有表达式为false时，才输出相应的信息到控制台，否则不输出。
```
var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2"); // "我是错误2"
```
**2.6 count()**
`console.count ` 当你想统计代码被执行的次数，这个方法很有用
```
function play(){
console.count("执行次数：");
}
play(); // 执行次数：1
play(); // 执行次数：2
play(); // 执行次数：3
```
**2.7 time()、timeEnd()**
这两个方法用于计时，可以算出一个操作所花费的准确时间。
`console.time` 计时开始
`console.timeEnd` 计时结束
```
console.time("array");
var a=0;
for(var i=0;i<100000;i++){
a += i;
}
console.timeEnd("array"); // array : 6.063ms
```
**2.8 profile()、profileEnd()**
`console.profile`和`console.profileEnd`配合一起使用来查看CPU使用相关信息
打开浏览器的开发者工具，在profile面板中，可以看到这个性能调试器的运行结果。
**2.9 timeLine()、timeLineEnd()**
`console.timeLine`和`console.timeLineEnd`配合一起记录一段时间轴
**3、自定义console对象的方法**
console对象的所有方法都可以被覆盖，也就是说，我们可以自定义方法。
```
console['log'] = console['log'].bind(console, '温馨提示');
console.log('自定义方法'); // 温馨提示 自定义方法
```
';