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>


javascript之console篇的更多相关文章

  1. Javascript本质第二篇:执行上下文

    在上一篇文章<Javascript本质第一篇:核心概念>中,对Javascript执行上下文做了解释,但是这些都是基于Javascript标准中对执行上下文的定义,也就是说理论上的东西,本 ...

  2. [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇

    前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...

  3. [Javascript] Advanced Console Log Arguments

    Get more mileage from your console output by going beyond mere string logging - log entire introspec ...

  4. JavaScript 精髓整理篇之一(对象篇)postby:http://zhutty.cnblogs.com

    废话篇头: 由于工作关系,所以写博文的时间有那么点~~,其实是输入法太懒了,都是输入法的错~~ 这一系列的博客将总结所有关于JavaScript语言的精髓,适合0基础到大师级别人物阅读. <Ja ...

  5. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  6. rcGIS API for JavaScript之基础篇(一)

    ArcGIS API for JavaScript之基础篇(一)上一篇文章介绍了ArcGIS 10.4的安装指南也包含了所需要资源,需要的同学可以去公众号中查找.最近几天学习了2D地图.3D地图以及图 ...

  7. javascript调试 console

    Console命令详解,让调试js代码变得更简单   Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些 ...

  8. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  9. Javascript本质第一篇:核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

随机推荐

  1. 强连通图 HDU - 1269

    为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<=100000),每个通道都是单向的,就是说若称某通道连通了A房间和B房间,只说明可以 ...

  2. Fast Matrix Calculation 矩阵快速幂

    One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...

  3. Sublime Text 3配置支持Markdown编辑

    继上一篇http://www.cnblogs.com/EasonJim/p/7119304.html文章安装好之后,对Markdown支持需要做如下处理: 1.按下[Ctrl]+[Shift]+[P] ...

  4. 第6章 TCP/IP路由协议故障处理

    第6章 TCP/IP路由协议故障处理 一.缺省网关 当包的目的地址不在路由器的路由表中,如路由器配置了缺省网关,则转发到缺省网关,否则就丢弃. Show ip route :查看Cisco路由器的缺省 ...

  5. Cocos2d-x教程(34)-三维物体OBB碰撞检測算法

    欢迎增加Cocos2d-x 交流群:193411763 个中心点.1个旋转矩阵和3个1/2边长(注:一个旋转矩阵包括了三个旋转轴,若是二维的OBB包围盒则是一个中心点,两个旋转轴,两个1/2边长). ...

  6. zoj 1880 - Tug of War

    题目:有n个人分成两组,两组人数差不能超过1,找到两组的人重量之差的最小值. 分析:dp,二维01背包. 由于必须放在两个组中的一组,直接背包全部可到状态, 取出相差不超过 1的最接近 sum/2的值 ...

  7. DetachedCriteria的使用

    设计上能够灵活的依据 Criteria 的特点来方便地进行查询条件的组装.如今对 Hibernate的Criteria 的使用方法进行总结:    Hibernate 设计了 CriteriaSpec ...

  8. iOS UITextView 高度随文字自己主动添加,并尾随键盘移动(二)

    上节地址:http://blog.csdn.net/lwjok2007/article/details/47401293 接着上节我们来实现 输入框自己主动调节高度 首先,我们得知道,要推断是否该换行 ...

  9. Android CardView使用和导入出错问题

    Android CardView使用和导入出错问题 第一部分:导入Android CardView出错的问题. Android CardView是Android在support.v7包里面的一个vie ...

  10. UVA 11423 - Cache Simulator (树状数组)

    UVA 11423 - Cache Simulator (树状数组) option=com_onlinejudge&Itemid=8&category=523&page=sho ...