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 相关文章推荐
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
详解vue 组件
Jun 11 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的宝库目录--PEAR
2006/10/09 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php7性能提升的原因详解
2019/10/13 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
python交互式图形编程实例(二)
2017/11/17 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python字典的常用方法总结
2019/07/31 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python使用贪婪算法解决问题
2019/10/22 Python
几款好用的python工具库(小结)
2020/10/20 Python
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
实现向右循环移位
2014/07/31 面试题
设计模式的基本要素是什么
2014/04/21 面试题
移风易俗倡议书
2014/04/15 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
学校运动会简讯
2015/07/20 职场文书
开学随笔
2015/08/15 职场文书