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. 眼镜h5

    // 填充博乐纯门店数据 (function() { var $biotrueCitySelect = $('.regional-popup select.city'); jQuery.each(st ...

  2. JAVA高速开发平台 - 开源 免费 - JEECG

    JEECG 微云高速开发平台 当前最新版本号: 3.6.2(公布日期:20160315) 下载地址:http://git.oschina.net/jeecg/jeecg 前言: 随着 WEB UI 框 ...

  3. javaScript 检測 能否够连接指定server

    本文主要讲述怎样在js里面从多个服务端servlet中找到可用的地址 一般项目部署到生产环境之后会有一个生产网段(就是你能够在家訪问)和一个办公网段(仅仅能在公司才干訪问). 我们的项目部署好了之后, ...

  4. wordpress 配置(ubuntu)---修改 linux hostname

    使用阿里云服务器的 ubuntu 系统时的 hostname 太扭曲,而且有些命令会受 hostname 的影响不能正常使用,所以,一定要改掉它! 永久修改 hostname: 使用 nano 命令: ...

  5. 玩转CPU之直线

    近期在看编程之美,看到第一个问题时,一下子就被吸引了,原来在windows 的任务管理器中还能够让CPU舞动起来,再一次的相信了编程中仅仅有想不到没有做不到,对于书中的做法和网上的实现大致都同样.只是 ...

  6. python 数据描述字符串转整数

    q3 = int(float(q3.replace('万', '')) * 10000)

  7. 500万url的es 批删除

    bash  循环 算术计算 读写文件 [root@hadoop2 ~]# sh looh.sh1234LIZ1 2 3 4 0 1 2 3 4 5 6 7 8 9 10 0games:x:12:100 ...

  8. 【Unity】用Shader编程实现3D红心

    有些形状,即使没有3D美术设计师提供模型,也能够用代码生成. 对于想保持原创性不想借用他人模型的独立开发人员来说,这无非是一个非常重要的途径. 今天献给大家的是用Shader编程实现的一颗红心,寄托下 ...

  9. ALSA声卡驱动中的DAPM详解之四:在驱动程序中初始化并注册widget和route

    前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...

  10. MarkMonitor 目前最安全的域名注册商,因此,世界500强网站中的22%域名托管于markmonitor公司

    也许你查询某个大型公司域名whios信息时,常常会发现很多这些大型公司的域名都在一家名为MarkMonitor的公司注册,那么markmonitor是家什么样的公司呢? MarkMonitor是一家从 ...