你真的了解console吗？（肯定不进来看看）
对于console你的印象是什么呢？ 是console.log();仍是浏览器上的控制台？今天就来讲说你可能不了解的console；javascript
写在前面
浏览器的控制台能够说是前端程序猿最经常使用的东西了，通常都是配合console.log()，一块儿使用，其实console不止能够.log,今天就来讲说console的其余用法，要以为小弟收集总结的还能够的话，辛苦给个赞，要是以为那里写的有什么问题的话，请在下面给个评论，一块儿进步！o(*≧▽≦)ツhtml
总况
打开编译器打上console.,利用自动补全功能咱们能够看到console是有不少方法的；前端
总结下目前控制台方法和属性有：java
["$$", "$x", "dir", "dirxml","keys","values","profile","profileEnd","monitorEvents", "unmonitorEvents","inspect","copy","clear","getEventListeners","undebug","monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "_"]node
下面咱们来一一介绍一下各个方法主要的用途。chrome
通常状况下咱们用来输入信息的方法主要是用到以下四个：api
console.log
这个能够说是用的最多的了，主要用途是在浏览器控制台输出咱们想要输出的信息。数组
console.info
用于输出错误信息，用法和console.log()一致。浏览器
刚瞌睡就来了枕头！ 打开我们掘金网页的控制台看下！bash
console.warn
用于输出警示信息，用法和console.log()一致。
console.error
用于输出错误信息，用法和console.log()一致。
console.debug
用于输出调试信息，用法和console.log()一致。
为何都是输出信息却要分好几个呢？看出图说话。
这是一张IE上截取的图片，在Chrome上不一样的信息会分配到不一样的位置，很差截图！（万恶的IE仍是有那么一点用处的哈，哈哈）。
console对象的上面5种方法，均可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符a（%s）、整数（%d或%i）、浮点数（%f)和对象（%o）四种。
| 格式化符号 | 实现的功能 |
|---|---|
| %s | 格式化成字符串输出 |
| %d or %i | 格式化成数值输出 |
| %f | 格式化成浮点数输出 |
| %o | 转化成展开的DOM元素输出 |
| %O | 转化成JavaScript对象输出 |
| %c | 把字符串按照你提供的样式格式化后输入 |
看个栗子：
%o占位符，能够用来查看一个对象内部状况（Chrome无效）；
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);
复制代码
注意：收集资料的时候看到一些能够用console.log在控制台输出带样式的文字或者图片，我的以为用处不大，这里就直接忽略了，有兴趣的朋友能够本身查一下！
console.dirxml
用来显示网页的某个节点（node）所包含的html/xml代码。
<body>
<table id="mytable">
<tr>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>bbb</td>
<td>aaa</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>333</td>
<td>222</td>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function () {
var mytable = document.getElementById('mytable');
console.dirxml(mytable);
}
</script>
复制代码
console.group和console.groupEnd
用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，能够用鼠标折叠/展开。
好玩不？ 惋惜到如今我都没以为他有啥用。
开玩笑的，存在即合理怎么会没用呢！ヾ(≧O≦)〃嗷~
在查看别人代码的时候一打开控制台全都是输出的时候这东西就有用了！
console.groupCollapsed
与console.group方法很相似，惟一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
console.assert
对输入的表达式进行断言，接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，不然不会有任何结果。
假如在代码中，咱们须要知足条件才输出，是否是会常常这样写：
var isShow = false;
if (!isShow) {
console.log('为false时输出信息');
}
复制代码
如今一个console就给你解决了；
是否是很方便！（鄙人以为是）
console.count
输出 count() 被调用的次数。此函数接受一个可选参数label。若是有label，此函数输出为那个指定的 label 和 count() 被调用的次数。若是 label 被忽略，此函数输出count() 在其所处位置上被调用的次数。（这个方法很是实用哦）！
该特性是非标准的，请尽可能不要在生产环境中使用它！
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "alice: 3"
复制代码
console.countReset
重置计数器。此函数接受可选的参数标签。一个字符串， 若传入此参数 countReset() 重置此label的count为0。若忽略此参数 countReset() 重置count()默认的 default 字段的count为0；
// 不传参
var user = "";
function greet() {
console.count();
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
// "default: 1"
// "default: 2"
// "default: 3"
// "default: 1"
// "default: 0"
// 能够看到 调用 console.counterReset() 重置了default 的计数为0
复制代码
// 传参
var user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
// "bob: 1"
// "alice: 1"
// "alice: 2"
// "bob: 0"
// "alice: 3"
// 调用countReset("bod")只是重置了 "bob" 的计数器值 而 "alice" 的计数器值没有改变。
复制代码
console.table
对于某些复合类型的数据，console.table方法能够将其转为表格显示。
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
复制代码
上面代码的language，转为表格显示以下。
复合型数据转为表格显示的条件是，必须拥有主键。对于上面的数组来讲，主键就是数字键。对于对象来讲，主键就是它的最外层键。
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
复制代码
上面代码的language，转为表格显示以下。
console.dir
dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
该方法对于输出DOM对象很是有用，由于会显示DOM对象的全部属性。
console.dir(document.body);
复制代码
Chrome上我试验了下感受和log没区别IE上也是!(不知道什么鬼。 ╮（╯＿╰）╭)。固然了我没去实验DOM对象。哈哈~！
console.time和console.timeEnd
这两个方法用于计时，能够算出一个操做所花费的准确时间。
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
// Array initialize: 1914.481ms
复制代码
console.timeLog;
在控制台输出计时器的值，该计时器必须已经经过 console.time() 启动。
若是没有传入 label 参数，则以 default: 做为引导返回数据：
default: 1042ms
若是传入了一个已经存在的 label ，则会以 label: 做为引导返回数据：
label: 1242ms
栗子：
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
// 上例中的输出分别显示了用户从打开页面到关闭第一个 alert 和第二个 alert 框的时间间隔：
复制代码
注意：使用 timelog() 输出计时器的值会显示计时器名称。使用 timeEnd() 中止也会显示计时器名称和输出计时器的值，而且，最后的 " - timer ended" 能够清楚的显示计时器再也不计时的信息。
console.profile和console.profileEnd
console.profile方法用来新建一个性能测试器（profile），它的参数是性能测试器的名字。
该特性是非标准的，请尽可能不要在生产环境中使用它！
console.profile('p')
// Profile 'p' started.
复制代码
console.profileEnd方法用来结束正在运行的性能测试器。
console.profileEnd()
// Profile 'p' finished.
复制代码
console.timeStamp
该特性是非标准的，请尽可能不要在生产环境中使用它！
向浏览器的 Performance或者Waterfall工具添加一个标记。这样可让你将代码中的一个点和其余在时间轴上已记录的事件相关联，例如布局事件和绘制事件等。
你能够选择用一个参数来做为时间戳标签，而后标记旁边就会显示这个标签。
console.trace
堆栈跟踪相关的调试，console.trace方法显示当前执行的代码在堆栈中的调用路径。
上述方法只是我我的理解罢了。若是想查看具体API
console.clear
用于清除当前控制台的全部输出，将光标回置到第一行。
- 1. 满满的 maven 干货，你肯定不来看看吗？
- 2. 你真的了解 console 吗
- 3. 你肯定不来了解下 Redis 跳跃表的原理吗
- 4. 你肯定不来了解下 Redis 字符串的原理吗
- 5. 你肯定不来了解一下Redis中 Hash的原理吗
- 6. 你肯定不来了解一下Redis列表的原理吗
- 7. 你真的了解package.json吗？来看看吧，这多是最全的package解析
- 8. ES11来了，不进来看看嘛
- 9. 图解java数据结构之栈(Stack)，你肯定不看看吗？
- 10. 面试阿里，字节跳动90%会被问到的微服务，你肯定不进来看看吗？
- 更多相关文章...
- • 查看 XML 文件 - XML 教程
- • MySQL查看表中的约束 - MySQL教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • 互联网组织的未来：剖析GitHub员工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。