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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
详解原生JS回到顶部
Mar 25 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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验证码实现代码
2014/05/10 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php抽象类用法实例分析
2015/07/07 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python斐波那契数列的计算方法
2018/09/27 Python
python可视化实现代码
2019/01/15 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
中职应届生会计求职信
2013/10/23 职场文书
经理秘书岗位职责
2013/11/14 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
商超业务员岗位职责
2015/02/13 职场文书
教师党员自我评价2015
2015/03/04 职场文书
中学校园广播稿
2015/08/18 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
python如何查找列表中元素的位置
2022/05/30 Python