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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue监听用户输入和点击功能
Sep 27 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
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python抓取百度首页的方法
2015/05/19 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python定义一个Actor任务
2020/07/29 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
大学生学业生涯规划
2014/01/05 职场文书
社区服务活动小结
2014/07/08 职场文书
交心谈心活动总结
2015/05/11 职场文书
光荣之路观后感
2015/06/12 职场文书
运动会100米加油稿
2015/07/21 职场文书
基于python实现银行管理系统
2021/04/20 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang