## 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代码 ``` <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script> var table=document.querySelector("table"); console.dirxml(table); </script> //输出： <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> ``` **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('自定义方法'); // 温馨提示 自定义方法 ```