javascript Console API使用大全

ゞ浴缸里的玫瑰 2022-08-06 02:14 186阅读 0赞

一直以来都在关注Firebug好几年，今天特意整理了一些，希望对大家有所帮助。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新标签页</title>
    </head>
    
    <body>
    <div id="mydiv1"><span></span><p></p>
    </div>
    <script>
    //log
    console.group("一、显示信息的命令 \n Firebug内置一个console对象，提供5种方法，用来显示信息。");
    	console.log("这是log");
    　　console.info("这是info");
    　　console.debug("这是debug");
    　　console.warn("这是warn");
    　　console.error("这是error");
    console.groupEnd();
    //占位符
    console.group("二、占位符 \n console对象可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。");
    	console.log("%d年%d月%d日",2011,3,26);
    	console.log("圆周率是%f",3.1415926);
    	var dog = {} ;
    	dog.name = "大毛" ;
    	dog.color = "黄色";
    	console.log("%o",dog);
    console.groupEnd();
    //分组
    console.group("三、分组显示 \n 如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()");
    	console.group("第一组信息");
    	console.log("第一组第一条");
    	console.log("第一组第二条");
    	console.groupEnd();
    	console.group("第二组信息");
    	console.log("第二组第一条");
    	console.log("第二组第二条");
    	console.groupEnd();
    console.groupEnd();
    
    //查看对象
    console.group("四、显示一个对象所有的属性和方法 \n 使用console.dir()");
    	dog.bark = function(){alert("汪汪汪");};
    	console.dir(dog);
    console.groupEnd();
    
    console.group("五、显示网页的某个节点（node）所包含的html/xml代码 \n ");
    	var _mydiv = document.getElementById("mydiv1");
    	console.dirxml(_mydiv);
    console.groupEnd();
    //断言
    console.group("六、断言 \n console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。");
    	var result = 0;
    　　console.assert( result);
    　　var year = 2000;
    　　console.assert(year == 2011);
    	console.assert(true);
    console.groupEnd();
    
    //追踪函数调用
    console.group("七、追踪函数的调用轨迹 \n 使用console.trace()");
    	　function plus(num1,num2){
    		console.trace();
    　　　　return num1+num2;
    　　}
    	var x = plus3(2,3);
    　　function plus3(num1,num2){return plus2(num1,num2);}
    　　function plus2(num1,num2){return plus1(num1,num2);}
    　　function plus1(num1,num2){return plus(num1,num2);}	
    console.groupEnd();
    
    //消耗时间
    console.group("八、计时功能 \n console.time()和console.timeEnd()，用来显示代码的运行时间。");
    	console.time("计时器一");
    	　for(var i=0;i<1000;i++){
    　　　　for(var j=0;j<1000;j++){}
    　　}
    	console.timeEnd("计时器一");
    console.groupEnd();
    
    //性能分析
    console.group("九、性能分析 \n 性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。点击性能Tab查看");
    	function funcA(count){
    　　　　for(var i=0;i<count;i++){}
    　　}
    　　function funcB(count){
    　　　　for(var i=0;i<count;i++){}
    　　}
    	function Foo(){
    　　　　for(var i=0;i<10;i++){funcA(1000);}
    　　　　funcB(10000);
    　　}　
    	console.profile('性能分析器一');
    　　Foo();
    　　console.profileEnd();
    console.groupEnd();
    </script>
    </body>
    </html>

运行结果：

![Center][]

[Center]: /images/20220806/d091ec62ff7645d28e31d5878ac11533.png