javascript控制台详解


Posted in Javascript onJune 25, 2015

一、显示信息的命令

console.log(); //控制台输入 网页中不会输出

console.info(); //一般信息

console.debug(); //除错信息

console.warn(); //警告提示

console.error(); //错误提示

“console.log();” 可以用来取代 “alert();” 或 “document.write();” 比如,在网页中写入 “console.log("Hello World");” 然后会在控制台输入,但是网页中并不会输入。

javascript控制台详解

javascript控制台详解

我们在代码中插入如下代码:

console.info( "这是info" );

console.debug( "这是debug" );

console.warn( "这是warn" );

console.error( "这是error" );

加载后打开控制台会看到像下面这样:

javascript控制台详解

二、占位符

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。比如:

console.log( "%d年%d月%d日" , 2011,3,26 );

console.log( "圆周率是%f" , 3.1415926 );

javascript控制台详解

%o占位符,可以用来查看一个对象内部情况。比如,有这样一个对象:

var dog = {} ;

dog.name = "大毛";

dog.color = "黄色";

然后,对它使用o%占位符:

console.log( "%o" , dog );

javascript控制台详解

三、分组显示

console.group(); console.groupEnd(); (这两个方法是成对使用的)
console.group("第一组信息");


console.log("第一组第一条");


console.log("第一组第二条");

console.groupEnd();

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


console.log("第二组第一条");


console.log("第二组第二条");

console.groupEnd();

javascript控制台详解

四、console.dir();(显示某一个对象的所有属性和方法)

比如,现在为第二节的dog对象,添加一个bark()方法,然后用 “dir();” 显示出来:

dog.bark = function(){ alert( "汪汪汪" ); };

console.dir( dog );

javascript控制台详解

五、console.dirxml();(获取某个节点所包含的所有html/xml代码)

var table = document.getElementById("table1"); //获取节点

console.dirxml( table ); //显示节点的所有代码

javascript控制台详解

六、console.assert();(用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常)

var result = 0;

console.assert( result ); //false

var year = 2000;

console.assert( year == 2011 ); //false

javascript控制台详解

七、console.trace();(用来追踪函数的调用轨迹)

/*一个加法函数*/

function add( a,b ){

return a+b;

}

我想知道这个函数是如何被调用的,在其中加入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 ); }

运行后,会显示add()的调用轨迹,从上到下依次为add()、add1()、add2()、add3()

javascript控制台详解

八、console.time();和console.timeEnd();(用来显示代码的运行时间)

console.time( "计时器一" );


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



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


}


console.timeEnd( "计时器一" );

javascript控制台详解

九、性能分析

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

假定有一个函数Foo(),里面调用了另外两个函数funcA()和funcB(),其中funcA()调用10次,funcB()调用1次。

function Foo(){



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++){}


}

然后分析 “Foo();” 的运行性能:

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


Foo();


console.profileEnd();

javascript控制台详解

标题栏提示,一共运行了12个函数,共耗时2.656毫秒。其中funcA()运行10次,耗时1.391毫秒,最短运行时间0.123毫秒,最长0.284毫秒,平均0.139毫秒;funcB()运行1次,耗时1.229ms毫秒。

除了使用 “console.profile();”方法,firebug还提供了一个"概况"(Profiler)按钮。第一次点击该按钮,"性能分析"开始,你可以对网页进行某种操作(比如ajax操作),然后第二次点击该按钮,"性能分析"结束,该操作引发的所有运算就会进行性能分析。

javascript控制台详解

十、属性菜单

控制台面板的名称后面,有一个倒三角,点击后会显示属性菜单。

javascript控制台详解

默认情况下,控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上,则相关的提示信息都会显示。

这里比较有用的是显示"XMLHttpRequests" 也就是显示ajax请求。选中以后,网页的所有ajax请求,都会在控制台面板显示出来。

比如,点击一个YUI示例,控制台就会告诉我们,它用ajax方式发出了一个GET请求,http请求和响应的头信息和内容主体,也都可以看到。

javascript控制台详解

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
javascript操作ul中li的方法
May 14 Javascript
基本DOM节点操作
Jan 17 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
jquery实现浮动的侧栏实例
Jun 25 #Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 #Javascript
Node.js中的process.nextTick使用实例
Jun 25 #Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 #Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 #Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 #Javascript
深入理解JavaScript编程中的原型概念
Jun 25 #Javascript
You might like
配置支持SSI
2006/11/25 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php 归并排序 数组交集
2011/05/10 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
Jquery Change与bind事件代码
2011/09/29 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python中unittest用法实例
2014/09/25 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
详解python运行三种方式
2019/05/13 Python
python实现动态数组的示例代码
2019/07/15 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014年底工作总结
2014/12/15 职场文书
《颐和园》教学反思
2016/02/19 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL