seven's blog | 你不知道大概也不会去用但可以了解一下的Console隐藏骚操作!

你不知道大概也不会去用但可以了解一下的Console隐藏骚操作!
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