你不知道大概也不会去用但可以了解一下的Console隐藏骚操作！
2019年07月23日
次
2019年07月23日
次
console.log()差不多是我们平时开发过程中最常用的调试手法了，但其实关于Console还有很多其他方法可以帮助我们提高开发效率，虽然不常用，但可以作为扩展知识，稍作了解。
关于控制台
可以先全面了解一下 console 控制台选项卡中的内容。
第一行：
清空 console 控制台
top — 在默认状态下，Console 的上下文（context）为 top（顶级）。不过当你检查元素或使用 Chrome 插件上下文时，它会发生变化。 你可以在此更改 console 执行的上下文（页面的顶级 frame）。
过滤： 对控制台的输出进行过滤。你可以根据输出严重级别、正则表达式对其进行过滤，也可以在此隐藏网络连接产生的消息。
设置：
- Hide network — 隐藏诸如 404 之类的网络错误。
- Preserve log — 控制台将会在页面刷新或者跳转时不清空记录。
- Selected context only — 勾上后可以根据前面 top 选择的上下文来指定控制台的日志记录范围。
- group similar — 默认勾选。
- Log XMLHttpRequests — 顾名思义，记录 XMLHttpRequest 产生的信息。
- Eager evaluation — 译为及早求值，用来节省内存和提高执行速度。
- Autocomplete from history — Chrome 会记录你曾经输入过的命令，进行自动补全。
Console
平时我们用的最多的console.log大家应该已经非常熟悉，基础用法就不赘述了。
补充一点可能不太了解的点，就是它的占位符用法：
| 占位符 | 作用 |
|---|---|
| %s | 字符串 |
| %d or %i | 整数 |
| %f | 浮点数 |
| %o | 可展开的DOM |
| %O | 列出DOM的属性 |
| %c | 根据提供的css样式格式化字符串 |
console.log("%d年%d月%d日",2011,3,26);
2011年3月26日
console.log('%ctest',"color: red; font-size: 20px")
下面是一些我们几乎没有用过的方法列举:
console.assert()
用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常
该方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果
console.assert(true === false, "判断条件不成立")
// Assertion failed: 判断条件不成立
console.count()
用于计数，输出它被调用了多少次。
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
console.table()
将复合类型的数据转为表格显示,同时也会显示正常的打印结果
var arr= [
{ num: "1"},
{ num: "2"},
{ num: "3" }
];
console.table(arr);
上图可以看出，输出的表格是可以排序的。
console.time()
显示代码的运行时间，在进行性能优化时，可以有很好的参考作用。
console.time('计时器1');
for (var i = 0; i < 100; i++) {
for (var j = 0; j < 100; j++) {}
}
console.timeEnd('计时器1');
console.trace()
console.trace 会将调用栈打印在控制台中。如果你正在构建库或框架时，它给出的信息将十分有用。
console.profile()
性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在
function All() {
alert(1);
for (var i = 0; i < 10; i++) {
funcA(1000);
}
funcB(10000);
}
function funcA(count) {
for (var i = 0; i < count; i++) {}
}
function funcB(count) {
for (var i = 0; i < count; i++) {}
}
console.profile('性能分析器');
All();
console.profileEnd();
以上这些方法，如果运用的合理，还是对我们平时的开发效率很有帮助的。
23 Jul 2019
