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. The Evaluation of Determinant(求行列式mod一个数的值)

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  2. java int怎么转换为string

    1.两种方法,一个是再int后面+“”,就可以转为字符串. 另一个, nt i=12345;String s="";第一种方法:s=i+"";第二种方法:s=S ...

  3. MQTT---HiveMQ源代码具体解释(一)概览

    源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 面向群体 想自己实现MQTT Broker的朋友 对现有开源的MQTT Broker或多 ...

  4. C++对象模型——继承体系下的对象构造(第五章)

    5.2 继承体系下的对象构造 当定义一个object例如以下: T object; 时,实际上会发生什么事情呢?假设T有一个constructor(不论是由user提供或是由编译器合成),它会被调用. ...

  5. MySQL用户及数据安全专题

    1 简单介绍 1.1 概要 1.2 权限分类 2 加入用户     2.1 语法例如以下: CREATE USER user_specification [, user_specification] ...

  6. javascript 将中文符号转换成英文符号

      javascript 将中文符号转换成英文符号 CreateTime--2018年3月30日09:01:29 Author:Marydon /** * 将中文符号转换成英文符号 */ functi ...

  7. protobuf-net precompile

    之前游戏为了解决在ios自动更新的问题,想到使用了将游戏代码打包成dll,使用反射加载执行的办法.办法想好了以后,一直没有做测试.上周不知道什么原因,终于有人去测试了,结果发现报错了.我当时觉得有点意 ...

  8. VBS调用Windows API函数

    Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  VBS调用Windows API函数 « 用VBS修改Windows用户密码 在VB中创建和使用 ...

  9. 【POJ 2777】 Count Color(线段树区间更新与查询)

    [POJ 2777] Count Color(线段树区间更新与查询) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4094 ...

  10. Recommendation system

    Dear Prof.Choi: My research interest is mainly the application and optimization of big data and arti ...