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 array 数组详解
Mar 22 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
Javascript中For In语句用法实例
May 14 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Vue实现6位数密码效果
Aug 18 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 团购折扣计算公式
2011/11/24 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
常用python编程模板汇总
2016/02/12 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
中学门卫岗位职责
2013/12/26 职场文书
作风建设年度心得体会
2014/10/29 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
同乡会致辞
2015/07/30 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书