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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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(3) php 函数
2010/02/15 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js数组的操作详解
2013/03/27 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
angularjs实现table增加tr的方法
2018/02/27 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
js实现随机抽奖
2020/03/19 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python 网络编程详解及简单实例
2017/04/25 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS