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. 深刻理解Python中的元类(metaclass)--代码实践

    根据http://blog.jobbole.com/21351/所作的代码实践. 这篇讲得不错,但以我现在的水平,用到的机会是很少的啦... #coding=utf-8 class ObjectCre ...

  2. poj——1006 生理周期

    生理周期 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 138291   Accepted: 44300 Descripti ...

  3. Pivotal-tc-Server与Tomcat区别

    Pivotal-tc-Server之前叫做SpringSource tc Server,包含三个版本分别是:Spring版.标准版和开发版,但其中只有开发版是免费的.比如在STS中包含的版本就是开发板 ...

  4. zabbix全方位监控MySQL +cacti监控mysql

    http://www.linuxidc.com/Linux/2015-02/112690.htm http://john88wang.blog.51cto.com/2165294/1596272?ut ...

  5. 【分享】迅为iTOP4412开发板-Android系统屏幕旋转设置

    1.1概述 Android4.0,Androd4.4源代码能够编译成手机模式和平板模式,讯为iTop4412 开发平台 的Android系统默认编译为平板模式.客户须要依据自己的产品设计及应用环境,切 ...

  6. Photoshop 手动画金标准流程

    以下给出Photoshop手动画金标准的流程, 1. 读取 图片 2. 找到套锁button 3. 利用套锁button手动画金标准 4. 点击套锁区域.右键新建图层 此时能够看到右側出现新建的图层1 ...

  7. iOS----四方块 动画button实现

    突然想起来上一次面试考官提问的一个问题:怎样创建一个菱形,并让它对应单击事件.能够开合的效果. 当时第一反应使用button来填充菱形的图片来实现,只是考官说,这样点击的区域不够灵敏,毕竟button ...

  8. 如何删除 mac 系统信息下的安装记录

    方法:在finder中:Command+Shift+G 打开 /Library/Receipts/InstallHistory.plist 所有的记录都在 InstallHistory.plist 文 ...

  9. 【JavaScript】JS读取XML文件并进行搜索

    需求效果 点击链接.当前页面载入xml文件并展示相应内容 通过搜索框.搜索xml文件内节点数据.展示包括内容的节点数据 功能实现 Demo终于实现效果 http://loadxmldemo.coder ...

  10. Jar包中文乱码问题

    项目上遇用winrar修改替换jar中一个中文文件名后出现jar包解压读取错误问题,被这个问题纠缠了两次,都是现场比较情急的情况,于是就研究一下彻底弄清楚这个问题.中间也网上搜过一些内容,但实际测试不 ...