记得学习javascript的第一个demo就是alert("Hello  World");可是学习接触javascript这么长时间了还是在alert,因为javascript调试中,alert的确可以可以帮我们定位问题,可是这个就类似于在java程序中打断点一样,需要不停的点击鼠标,这个会中断程序的运行,如果需要对象的输入可是得到的也不是一个对象的具体值,种种的不适感觉对于程序的调试不适很合适,这个时候console对象就体现出自己的优越了。关于console对象的介绍网上的文档一大堆,我就从使用者的角度来做个简单的归纳总结

1.console对象的介绍

  javascript中默认没有console对象, 它某些浏览器提供的浏览器内置对象属于javascript解释器的范畴, 低版本IE就没有, 其他主流浏览器应该都有,主要用于访问调试控制以将信息输出到控制台,只要用于页面调试信息的输出。

2.浏览器是否支持console对象

  

function(){
if(window.console){
console.info("support the consloe object");
}else{
alert("no support the consloe object");
}
}

3.主要方法

  A:console.log(),用来在控制台上输出信息, 所需的参数是需要输出的对象, 输出的对象会以空格分隔开

    a:console.log()如果参数是普通字符串,log方法将字符串内容显示在console窗口   

    console.log("this  information is from the consloe");

    b.console.log()如果第一个参数使用了字符串替换模式, 则之后的参数将作为替换字符串, 这类似于printf占位符格式化输出.  console可用的字符串模式请参照下表.

    

模式	类型
%s 字符串
%d, %i 整型数值
%f 浮点数值
%o 对象
%c 格式化样式

  

var tempObject = {'name':'test','id':110,'company':'china'};
console.log("%d年%d月%d日",2014,11,12);
  //2014年11月12日
console.log("圆周率是%f",3.1415926);
   //圆通率是3.1415926 
console.log("%o",tempObject);
//Object { name="zhangminghui", id=110, company="asian"}  

    c.console.log()方法的两种参数格式,可以结合在一起使用

    

console.log("%d+%d",1,2,"=3")
//1+2=3

      d.console.log()如果参数是一个对象,console.log会显示该对象的值

    

Object { name="test", id=110, company="china"}

  B.console.info()和console.debug()

  info()方法在使用的时候前面会出现一个蓝色的倒立感叹号,其他的用法和log()方法完全一样,而debug()用法和log()方法完全一样。

  C:console.warn(),console.error()

  warn()表示告警信息,打印的信息前面会出现一个黄色的感叹号,error()表示错误信息,打印的信息前面有一个红色的叉叉,其他的用法和log()方法一样。

  D:console.table():以表格的形式打印出复杂的对象

  

	var tableTest = [{'name':'xiaoming','age':23,'height':170},
{'name':'xiaohua','age':23,'height':170},
{'name':'xiaozhang','age':23,'height':170},
{'name':'xiaohuang','age':23,'height':170},
{'name':'xiaobai','age':23,'height':170}];
console.table(tableTest);

  

  E:console.group()和console.groupEnd()分组显示

  

	console.group("First Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd();
console.group("Second Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd();
console.group("Third Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd();

  

  F:console.dir(object):以列表形式输出一个对象的所有属性,有点和查看DOM窗口相类似

  

  G:console.dirxml(node):输出一个HTML或者XML元素的XML源代码。

  H:console.assert(expression[, object, ...]):断言函数, 如果expression的结果为假, 将抛出一个异常并将其余参数作为异常描述输出.

  I:console.time(name):以参数name作为计时器的名称, 新建一个计时器.

 console.timeEnd(name):结束以参数name命名的计时器, 输出console.time调用后经过的时间

  

console.time('time');
console.timeEnd('time');

  

  J:console.profile([title]):开启一个JavaScript性能分析器, 可选参数是分析器报告的标头.

  console.profileEnd():关闭JavaScript性能分析器, 输出报告.

  K:console.trace():当前执行的代码在堆栈中的调用路径。

  

  L: console.count([title]):count 方法用于统计当前代码被执行过多少次,title 参数可以在次数前面输出额外的标题以帮助阅读

  

  M:console.clear():清空控制台内容.

4.测试用例中主要用到的代码

  

window.onload = function(){
if(window.console){
console.log("support the consloe object");
}else{
alert("no support the consloe object");
}
testConsole();
}; function testCount(){
console.count('mylabel');
console.count('mylabel');
console.count('mylabel');
console.count('mylabel');
}
function testConsole(){ testCount();
//console.count('mylabel');
for(var i = 0; i < 10; i++){
testCount();
//console.count(i);
} var tableTest = [{'name':'xiaoming','age':23,'height':170},
{'name':'xiaohua','age':23,'height':170},
{'name':'xiaozhang','age':23,'height':170},
{'name':'xiaohuang','age':23,'height':170},
{'name':'xiaobai','age':23,'height':170}];
console.table(tableTest);
console.group("First Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd();
console.group("Second Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd();
console.group("Third Group");
console.log("the first item");
console.log("the second item");
console.log("the third item");
console.groupEnd(); var tempObject = {'name':'test','id':110,'company':'china'};
var dog = {};
dog.name = 'dahuang';
dog.color = 'red'; console.info("this information is from the consloe");
console.info("this is info");
console.debug("this is debug");
console.warn('this is warn');
console.error("this is error");
console.log("%d年%d月%d日",2014,11,12);
console.log("圆周率是%f",3.1415926);
console.log("%o",tempObject);
console.dir(tempObject);
console.dir(dog); var s = 'string',i=123,f=123.456,d=234,o={name:'wch',id:123};
console.info(o);
console.warn('s=%s,i=%i,f=%f,d=%d,o=%o',s,i,f,d,o);
console.log('%o,%s',s,s);
console.log(o,'object');
console.log(tempObject); console.dir(o);
console.dir(s); console.time('time');
console.timeEnd('time'); console.assert(d<100,'d>100');
console.assert(d<1000,'d>1000'); console.trace(); console.profile("test");
console.profileEnd();
}

  

告别alert,拥抱console的更多相关文章

  1. [技巧篇]13.从今天开始做一个有理想的人,放弃alter的调试,拥抱console.log

    在js前端开发时,为了调试经常会加上 console.log.但是在有的浏览器(比如IE)中会报错,怎么办呢?好像10之后也开始支持了!如果以防方一,可以使用如下方式 在js文件最前面添加如下js代码 ...

  2. 简述alert和console.log的区别

    生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...

  3. alert与console.log

    1.alert在页面中弹出 console.log是在控制台显示 例子 var aa="Silence"; alert(typeof(aa)); console.log(typeo ...

  4. 告别node-forever,拥抱PM2

    告别node-forever,拥抱PM2 返回原文英文原文:Goodbye node-forever,hello PM2 devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.j ...

  5. javascript中alert()与console.log()的区别

    我们在做js调试的时候使用 alert 可以显示信息,调试程序,alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死.而且 alert 显示对象永远显示为[object ]. ...

  6. 简介alert()与console.log()的不同

    简单的说alert 是弹出提示而console.log是在调试工具里打日志,下面具体给大家列出alert()与console.log()的不同点, [1]alert() [1.1]有阻塞作用,不点击确 ...

  7. alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al ...

  8. alert 和 console.log的区别

    出走半月,一直以为 console.log 和 alert 的用法是一样的,只是表现的形式不同,alert 是以弹框的形式出现,console.log 是在后台打印输出. 但是今天在写东西的时候,发现 ...

  9. JavaScript中的alert()与console.log()的区别

    1.alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. ale ...

随机推荐

  1. C# DateTime结构的常用方法

    在项目开发中,经常会碰到日期处理.比如查询中,可能会经常遇到按时间段查询,有时会默认取出一个月的数据.当我们提交数据时,会需要记录当前日期,等等.下面就看看一些常用的方法. 首先,DateTime是一 ...

  2. [ACM] poj 1088 滑雪 (内存搜索DFS)

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 73409   Accepted: 27141 Description ...

  3. Meteor全栈开发平台

    Meteor全栈开发平台 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonno ...

  4. CSDN博客ByeBye

    情绪csdn定制博客博客是不够的,没有足够的光.对于我这种极简的人,不合适. 我们不打算更新的博客. 至http://blog.edagarli.com/ 版权声明:本文博主原创文章.博客,未经同意不 ...

  5. 左右c++与java中国的垃圾问题的分析与解决

    左右c++与java中国的垃圾问题的分析与解决 DionysosLai(906391500@qq.com)  2014/8/1 问题分析: 之所以会出现中文乱码问题,归根结底在于中文的编码与英文的编码 ...

  6. OR1200数据Cache介绍

    以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 上一章剖析了ICache模块. 本章将剖析DCache模块.首先指出DCache模块相比ICache的特别之处.由于这 ...

  7. HTML DOM的nodeName,nodeValue,nodeType介绍

    将HTML DOM中几个常用的属性做下介绍,工作中作为参考. nodeName 属性可依据节点的类型返回其名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文 ...

  8. JBPM——MyEclipse开发环境的搭建

    第一次接触JBPM我不知道如何在工程中的应用.查了一些资料.大约在JBPM随着时代的发展有一定的了解.首先JBPM它是JBoss件平台的一个组成部分.是一个灵活的,易扩展的工作流管理系统,仅仅只是这个 ...

  9. android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)

    在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...

  10. 使用ArcGIS API for Silverlight 进行复合多条件空间查询

    原文:使用ArcGIS API for Silverlight 进行复合多条件空间查询 这两天帮网上认识的一个兄弟做了一个查询的示例,多多少少总结一下,在此和大家分享. 为什么说是复合多条件呢?因为进 ...