深入分析javascript中console命令


Posted in Javascript onAugust 14, 2016

一、显示信息的命令

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
</script>
</body>
</html>

深入分析javascript中console命令

最常用的就是console.log了。

二:占位符

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

代码如下:

<script type="text/javascript">
console.log("%d年%d月%d日",2016,8,20);
</script>

效果:

深入分析javascript中console命令

三、信息分组

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
 console.group("第一组信息");


console.log("第一组第一条:我的技术博客(https://segmentfault.com/u/learnme)");



console.log("第一组第二条:我的gitHub(https://github.com/specialCoder/)");


console.groupEnd();


 console.group("第二组信息");



console.log("第二组第一条:程序爱好者");



console.log("第二组第二条:欢迎你加入");


 console.groupEnd();
</script>
</body>
</html>

效果:

深入分析javascript中console命令

四、查看对象的信息

console.dir()可以显示一个对象所有的属性和方法。
代码如下:

<script type="text/javascript">
var info = {
blog:"https://segmentfault.com/u/learnme/",
gitHub:"https://github.com/specialCoder/",
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>

效果:

深入分析javascript中console命令

五、显示某个节点的内容

console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客:https://segmentfault.com/u/learnme/
<p>程序爱好者,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>

效果:

深入分析javascript中console命令

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
Assert(断言)是一个很好的用于保证程序正确性的特性。在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现。

代码如下:

<script type="text/javascript">
var result = 1;

console.assert( result );

var year = 2014;

console.assert(year===2018,"Assertion failed");
</script>

在console.assert()语句中,第一个参数为需要进行assert的结果,正常情况下应当为true;第二个参数则为出错时在控制台上打印的错误信息。

1是非0值,是真;而第二个判断是假,在控制台显示错误信息

显示结果:

深入分析javascript中console命令

七、追踪函数的调用轨迹

console.trace()用来追踪函数的调用轨迹。
代码如下:

<script type="text/javascript">
/*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
function add(a,b){
console.trace();


return a+b;

}

var x = add3(1,1);

function add3(a,b){return add2(a,b);}

function add2(a,b){return add1(a,b);}

function add1(a,b){return add(a,b);}
</script>

控制台输出信息:

深入分析javascript中console命令

八、计时功能

console.time()和console.timeEnd(),用来显示代码的运行时间。
代码如下:

<script type="text/javascript">
console.time("计数1000*1000");

for(var i=0;i<1000;i++){


for(var j=0;j<1000;j++){}

}

console.timeEnd("计数1000*1000");
</script>

运行时间是10.64ms

深入分析javascript中console命令

九、console.profile()的性能分析

性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。
代码如下:

<script type="text/javascript">
function All(){
alert(11);


  for(var i=0;i<10;i++){
funcA(1000);
}


 funcB(10000);

 }


function funcA(count){


for(var i=0;i<count;i++){}

}


function funcB(count){


for(var i=0;i<count;i++){}

}


console.profile('性能分析器');

All();

console.profileEnd();
</script>

深入分析javascript中console命令

说明一下,LZ测试时,在All()中未加alert,控制条没有输出,加上了之后,就有了一张性能分析表,暂时不清楚原因,若你知道,可以评论。

Javascript 相关文章推荐
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
javascript简单链式调用案例分析
May 10 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
js加减乘除精确运算方法实例代码
Jan 17 Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
javascript中的 object 和 function小结
Aug 14 #Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 #Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 #Javascript
You might like
PHP无限分类的类
2007/01/02 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
可以将word转成html的js代码
2010/04/11 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python with的用法
2014/08/22 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python使用opencv读取图片的实例
2017/08/17 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
医科大学生的自我评价
2013/12/04 职场文书
小学清明节活动方案
2014/03/08 职场文书
教代会开幕词
2015/01/28 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书