• 告别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();
    }
    

      

  • 相关阅读:
    C语言II作业01
    C语言寒假大作战04
    C语言寒假大作战03
    C语言寒假大作战02
    C语言寒假大作战01
    C语言ll作业01
    C语言寒假大作战04
    C语言寒假大作战03
    C语言寒假大作战02
    C语言寒假大作战01
  • 原文地址:https://www.cnblogs.com/zhangminghui/p/4092887.html
Copyright © 2020-2023  润新知