javascript Console API使用大全

最新推荐文章于 2024-04-25 19:46:51 发布

布道

最新推荐文章于 2024-04-25 19:46:51 发布

阅读量980

点赞数

分类专栏： # 前端文章标签： firebug 调试

本文链接：https://blog.csdn.net/alex_xfboy/article/details/41908753

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了Firebug的常用命令及功能，包括显示信息、占位符、分组显示、查看对象、网页节点HTML/XML代码展示、断言、函数调用追踪、计时与性能分析等，通过实例演示了如何在网页开发中高效使用Firebug。

摘要由CSDN通过智能技术生成

一直以来都在关注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>

运行结果：