告别alert,拥抱console

  记得学习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();
}

  

时间: 2024-08-13 23:40:06

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

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

简单的说alert 是弹出提示而console.log是在调试工具里打日志,下面具体给大家列出alert()与console.log()的不同点, [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 [

《30天软件开发 告别瀑布拥抱敏捷》一书 读后总结

周四.发现旁边一同事在看一本名为<30天软件开发 告别瀑布拥抱敏捷>的书."敏捷开发"这个词虽然我在很早就已获知,但是我也只是简简单单的认识到一个术语,并未去了解和认识什么是敏捷开发.也刚好趁上个月的项目刚好是采用敏捷开发的模式完成的.于是就向同事借了该书几天.在阅读该书内容的过程中并结合自身项目的参与经历,用对比的方式学习.认识和理解敏捷开发. 一.初试Scrum Scrum是一个用于管理如 软件开发 这样的复杂工作的框架.(这里的框架不是技术上的框架 只是针对项目管理上

alert与console.log

1.alert在页面中弹出 console.log是在控制台显示 例子 1 var aa="Silence"; 2 alert(typeof(aa)); 3 console.log(typeof(aa)); alert显示 console.log在控制台显示 2.alert()函数会阻断JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑 3.JavaScript原型链中toString()方法输出alert()和

告别node-forever,拥抱PM2

告别node-forever,拥抱PM2 返回原文英文原文:Goodbye node-forever,hello PM2 devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.js作为服务器端,AngularJS作为客户端,某种程度上说,我们的堆栈是用它建成的.我们构建静态客户端和RESTful JSON API的方法意味着我们跑了很多的node.js,我必须承认尽管node.js的一切都令人敬畏,但当我们在生产环境中运行它时它仍然会让我们感到头疼.相比一些更加成熟的语言,

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

我们在做js调试的时候使用 alert 可以显示信息,调试程序,alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死.而且 alert 显示对象永远显示为[object ]. 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好 [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. al

JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果

<script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.add = function(a,b){ this.total = a + b; } myObj.prototype.toString = function(){ return this.total; } var obj = new myObj(); obj.add(1,2); console.log(obj);

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

[1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 [2]console.log() [2.1]在打印台输出 [2.2]可以打印任何类型的数据 e.g. console.log([1,2,3]);//[

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

1.alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 2.console.log() [2.1]在打印台输出 [2.2]可以打印任何类型的数据 e.g. console.log([1,2,3]);//[1,

简述alert和console.log的区别

原文链接:http://www.cnblogs.com/sulishibaobei/p/sulishibaobei.html alert输出的结果为: console.log输出的结果为: 原来console.log() 可以打印任何类型的数据.而 alert() 只能输出string,如果alert输出是对象会自动调用 toString() 方法.如果想 console.log() 输出的与alert相同,需要调用 toString(). 所以将后面的改写成 console.log(hmac.