javascript中的console使用得当,将会事半功倍,对bug,性能等的跟踪,优化是个不错的利器!

1、基本日志消息打印:

console.debug(msg);

console.info();

console.warn();

console.error();

console.log();





方法参数:

msg

类似C语言的printf

console.log("The number of %s is %d", mytext, myval)

变量替换具有五种变量类型:

%s - 字符串 

%d - 整数 

%f - 浮点数 

%i - 整数 

%o - 无类型/任意

变量类型控制变量的呈现方式。例如,由整数变量类型表示的浮点数值显示为一个整数。

2、打印可折叠的对象或者dom

要显示可检查的 JavaScript 对象,请使用 console.dir() 将其发送到控制台。

要显示可检查的 DOM 节点,请使用 console.dirxml() 将其发送到控制台。 console.dir(对象);

console.dirxml(domid);

3、计数器

使用 console.count(),其字符串包含作为参数的计数器标签。首次与特定标签一起使用时,

将在控制台输出中建立一个计数器。之后使用带有相同标签的 console.count() 时,计数

器的计数将增加。要将计数器重置为零,请使用带有标签的 console.countReset()。

4、计时器

在代码的任意位置使用 console.time() 以启动计时器,并使用 console.timeEnd() 以结

束计时器并将结果发送到控制台。如果要为你的计时器添加标签或需要多个计时器,请为

console.time() 和 console.timeEnd() 方法传递具有作为参数的唯一标签的字符串。如果

不传递参数,这些方法将使用“default”作为标签

5、断言

console.assert() 的第一个参数评估为 false,它将运行 console.error(),并将断言的额外参数用于错误消息
console.assert(f < 25, 'f is not less than %d, but is instead %o', 25, f);

它等效于写入:

if(!(f < 25)){

console.error('f is not less than %d, but is instead %o', 25, f)

}

6.跟踪和分析

了解从何处调用你的代码、正在运行哪个代码,以及执行任务需要多长时间,这些信息对于

分析速度缓慢或异常行为非常有用。

堆栈跟踪通过向上追溯路径的跟踪请求向你显示到达当前代码的执行路径。在代码中使用

console.trace() 以显示堆栈跟踪。
在其他实例中,查看两点间运行的代码的每个部分将十分有用。探查器是用于该目的的最佳

工具,但在一些情况下可能需要比手动停止和开始更高的精确度。

要从代码中精确地开始和停止探查器,请使用 console.profile() 开始记录探查器会话,并

使用 console.profileEnd() 停止记录。

将字符串作为方法的参数传递到 console.profile(),以将其用作分析报告的名称。

覆盖分析会话可能会创建异常报告。在首次测试运行时使用  console.trace() 替代

console.profile(),以确保不会在结束分析会话前多次调用 console.profile()。如果发现获

取的跟踪比预计的多,这可能是你的问题。

7、使用demo

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>Console</title> </head>
<body>
<div id="qunit">
<div id="qunit-fixture">test markup</div>
</div> </body>
</html>
<script type="text/javascript" >
//打印信息
var s = 'string',i=123,f=123.456,d=234,o={name:'wch',id:123};
console.debug('debug');
console.info(o);
console.warn('s=%s,i=%i,f=%f,d=%d,o=%o',s,i,f,d,o);
console.log('%o,%s',s,s); console.dir(o);
console.dir(s);
console.dirxml(qunit); console.count('mylabel');
for(var i = 0; i < 10; i++){
console.count('mylabel');
console.count(i);
} console.time('time');
alert('time');
console.timeEnd('time'); console.assert(d<100,"d 小于100");
console.assert(d<1000,"d小于1000"); console.profile('pro');
function a(){
c();
}
function b(){
c();
}
function c(){ console.trace()
}
function e(){
a();
b(); }
console.trace();
a();
e();
console.profileEnd('pro'); </script>


最新文章

  1. RichText
  2. html新增一些常用标签
  3. CentOS编译安装PHP 7.0
  4. 基于gulp 的前端自动化构建方案总结
  5. Oracle的rownum原理和使用
  6. PLSQL_性能优化工具系列02_SQL Tuning Health-Check Script (SQLHC)
  7. dede导航设置成单页面内容
  8. Weblogic安装NodeManager
  9. 淘宝ued - 前端智勇大闯关(第三季)答案(更新)
  10. Ajax写分页查询(实现不刷新页面)
  11. 201421123042 《Java程序设计》第8周学习总结
  12. C#中d的??和?
  13. 第26月第20天 springboot
  14. Scala学习教程笔记三之函数式编程、集合操作、模式匹配、类型参数、隐式转换、Actor、
  15. Kafka原理总结
  16. Oracle(转换函数)
  17. 4.HTTP入门.md
  18. java class 文件
  19. SSH 在ssh-copy-id 之后仍需输入密码的问题
  20. SVN版本冲突问题

热门文章

  1. 基本的文件I/O
  2. oracle 12c 初步操作
  3. 转:SQL 索引最左前缀原理
  4. Alcatel OmniSwitch 重置密码
  5. 从理论到实践,全方位认识DNS(实践篇)
  6. CN Internet
  7. Linux Rsync实现文件同步备份(转载)
  8. [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
  9. 【剑指offer】合并两有序单链表
  10. 负载均衡算法,轮询方式 大话设计模式之工厂模式 C#