javascript之console篇
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.countReset()。
4、计时器
在代码的任意位置使用 console.time() 以启动计时器,并使用 console.timeEnd() 以结
束计时器并将结果发送到控制台。如果要为你的计时器添加标签或需要多个计时器,请为
console.time() 和 console.timeEnd() 方法传递具有作为参数的唯一标签的字符串。如果
不传递参数,这些方法将使用“default”作为标签
5、断言
它等效于写入:
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篇的更多相关文章
- Javascript本质第二篇:执行上下文
在上一篇文章<Javascript本质第一篇:核心概念>中,对Javascript执行上下文做了解释,但是这些都是基于Javascript标准中对执行上下文的定义,也就是说理论上的东西,本 ...
- [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇
前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...
- [Javascript] Advanced Console Log Arguments
Get more mileage from your console output by going beyond mere string logging - log entire introspec ...
- JavaScript 精髓整理篇之一(对象篇)postby:http://zhutty.cnblogs.com
废话篇头: 由于工作关系,所以写博文的时间有那么点~~,其实是输入法太懒了,都是输入法的错~~ 这一系列的博客将总结所有关于JavaScript语言的精髓,适合0基础到大师级别人物阅读. <Ja ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- rcGIS API for JavaScript之基础篇(一)
ArcGIS API for JavaScript之基础篇(一)上一篇文章介绍了ArcGIS 10.4的安装指南也包含了所需要资源,需要的同学可以去公众号中查找.最近几天学习了2D地图.3D地图以及图 ...
- javascript调试 console
Console命令详解,让调试js代码变得更简单 Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些 ...
- javascript的console.log用法
f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...
- Javascript本质第一篇:核心概念
很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...
随机推荐
- 洛谷—— P2047 社交网络
P2047 社交网络 题目描述 在社交网络(social network)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题.在一个社交圈子里有n个人,人与人之间有不同程度的关系. ...
- Servlet监听器(Listener)实例
以下内容是翻译自http://www.journaldev.com/1945/servletcontextlistener-servlet-listener-example: 说明:web.xml的加 ...
- CI 日志类
开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...
- javascript 事件对象(event 对象)
原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...
- 为XCode 6 加入新建类模板
用XCode 6在改动之前用XCode 5 的代码的时候突然间发现 XCode 6已经把新建带有 .xib 类的模板给删去了.而项目的新需求中又要用到新建带有 .xib 的类(用惯了~),全部不得不又 ...
- 【RefactoringCode】The description of the refactoring book
Last night the book named [Data Structure with Java Hubbed] was closed. When talked about the advant ...
- LeetCode 8. String to Integer (atoi) (字符串到整数)
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- Date类型转换为Integer类型
Date类型转换为Integer类型: Integer date = Integer.valueOf(String.valueOf(new SimpleDateFormat("yyyyMMd ...
- WAMP 2.5 "FORBIDDEN" error
对于web开发人员来说.远程訪问站点能够非常方便的提高开发站点开发效率,那么在wamp环境下,默认仅仅支持本地訪问,那么怎样訪问开启远程站点訪问呢? 开启方法: wamp2.5(32bit) 集成环境 ...