firebug指南（四）---javascript性能评测和对象跟踪

传说の黄花菜

浏览: 202027 次
性别:
来自: 杭州

最近访客更多访客>>

yuyu1984

myblog1122

吖龙Sam

coolpest

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

firebug

Firebug JavaScript Ajax Chrome CSS

引言：

本篇将涵盖以下几个主题：

·javascript性能评测器

·错误跟踪

·xmlhttprequest对象跟踪

#1.javascript性能评测器

javascript性能评测器是firebug中非常有用的一个功能，它可以计算出javascript代码的执行的一些时间数据（如方法调用次数，执行的时间，平均执行时间等等）。这对提高javascript代码的性能有非常大的帮助。

我们有三种方式可以使用javascript性能评测器，分别是点击控制台标签上的“概况”按钮或者在javascript代码中写入“console.profile（）”或者在命令行中中输入“profile（）”。在本篇中我将讲解前两种方式，如果你对第三种方式有兴趣，请点击这里（第四篇）。

console.profile()

·新建一个html文件，然后将下列代码粘贴到建好的html中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" >   
<head>   
<title>Firebug</title>   
<script language="javascript" type="text/javascript">   
  
function startDoSomething(){   
console.profile('Measuring time');   
doSomething();   
console.profileEnd();   
}   
function doSomething(){   
doThis(1000);   
doThis(100000);   
doThat(10000);   
doThisAndThat(1000,10000);   
  
}   
function doThis(count){   
for(var i=0;i<count;i++){}   
}   
  
function doThat(count){   
for(var i=0;i<count;i++){}   
}   
  
function doThisAndThat(countThis,countThat){   
for(var i=0;i<countThis;i++){ for(var j=0;j<countThat;j++){} }   
}   
</script>   
</head>   
<body>   
Open the console tab. Click the button below and wait a lit.. <br />   
<input type="button" value="Start" onclick="startDoSomething();"/>   
</body>   
</html>

·用firefox浏览器将该html文件打开

·打开firebug的控制台标签

·点击“start”按钮，然后稍等片刻..（结果如下图）

·“函数”列： 本列显示了每个方法的方法名

·“调用”列： 本列显示了方法被调用的次数。（在本例中doThis（）方法总共被调用了2此）

·“百分比”列： 本列显示了每个方法执行时间在整个例子执行时间所占的百分比

·“占用时间”列： 本列显示了方法的占用时间，打个比方：doSomething() 方法没有自己的逻辑代码，他仅仅调用了其他的方法，因此如上图所示，他的执行时间几乎为0.（不妨试一下在doSomething() 方法内加入一个10000次的循环，看看效果如何）。
·“时间”列： 本列显示了方法的执行时间间隔（从开始执行一直到执行结束返回）。

·“平均时间”列： 时间/调用次数。

·“最小时间”列： 该方法所有被调用中执行时间最短的时间（本例中doThis()方法被调用两次，而doThis(1000)执行时间最短为0.053ms ）。

·“最大时间”列： 该方法所有被调用中执行时间最长的时间。

·“文件”列： 该方法在程序中定义的位置。

通过点击控制台标签上工具栏中的“概况”按钮

如果不想通过代码的方式启动javascript性能评测器，不妨使用这个方式（如下图）。

测试步骤~

·在上个例子的代码上将doSomething() 方法内的console.profile(’Measuring time’); 和 console.profileEnd();这两个语句删除。

·在firebug打开修改后的文件。

·打开firebug的控制台标签。

·点击“概况”按钮。

·点击页面上的“start”按钮。

·大约等半分钟左右。

·再次点击“概况”按钮。

到这里，javascript性能评测器这块内容就讲完了，如果还有什么疑问，请在我博客上留言，以便共同讨论。

好，接下来我们讲下一个主题。

#2.控制台标签的选项菜单

在控制台标签的右边有一个“选项”按钮，如下图。

我这里将他们分为三个类别.

1.错误跟踪

·显示javascript错误

·显示javascript警告

·显示CSS错误

·显示XML错误

·显示Chrome错误

·显示Chrome信息

·显示外部错误

·显示错误的堆栈信息

·严格警告

2.XMLHttpRequest跟踪

·显示XMLHttpRequest

3.命令行

·更大的命令行

#2.1错误跟踪和过滤

可以跟踪脚本代码，或者CSS，XML等文件中的错误信息，也可以通过选定或者取消选定进行错误信息的过滤（如上图中打钩的即为选定）。

例子~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" >   
<head>   
<title>Firebug</title>   
<style type="text/css">   
.normalText{   
bcolor : red;  /* This is ERROR!! */  
}   
</style>   
<script language="javascript" type="text/javascript">   
function foo(){   
var objTxt = doucmnet.getElementById('nameTextBox');  //This is ERROR!!   
alert(objTxt.value);   
}   
</script>   
</head>   
<body>   
  
<input id="nameTextBox" class="normalText" type="text" />   
<input type="button" value="Start" onclick="foo();"/>   
</body>   
</html>

输入结果~

#2.2.XMLHttpRequest对象跟踪

这是firebug中非常有用的功能之一，尤其对Ajax开发员来说是相当有用的。以前我们在开发Ajax程序的时候都有一个普遍的问题就是一旦xmlhttprequest对象出了什么错，就很难进行排错，而且也很难发现异步返回的响应结果是否正确。

但是使用firebug后，这一些将会变得非常简单，我们只要勾上“选项”菜单中的“xmlhttprequests”选项，firebug将会为我们做以下几件事：

·执行时间（从发出请求到收到响应）

·参数（QueryString）

·HTTP Header

·响应（response）

这里以一个使用ajax验证用户名是否存在的简单例子为例.

例子~

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type">
<title>Login</title>

<script type="text/javascript">
function checkUserName() {
	document.getElementById("msg").innerHTML = "<font color='green'>checking...</font>" ;
	var url = "checklogin.jsp?username=" + document.forms[0].username.value ;
	if (window.XMLHttpRequest) {
  		xhr = new XMLHttpRequest();
	} else {
	  	if(window.ActiveXObject){
		    try {
				xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;
		    } catch(e) {} 
	    }
	}
	if (xhr) {
		xhr.onreadystatechange = showContents ;
		xhr.open("GET", url, true) ;
		xhr.send(null) ;
	} else {
		document.getElementById("msg").innerHTML = "sorry ! but your browser coundn't create a XmlHttpRequest object !" ;
	}
}
 
function showContents() {
	if (xhr.readyState == 4) {
		if(xhr.status == 200){
			var outMsg = xhr.responseXML.getElementsByTagName("msg")[0].childNodes[0].nodeValue ;
			if (outMsg == "notexist") {
				document.getElementById("msg").innerHTML = "<font color=green><strong>User not exists!!</strong></font>" ;
			} else {
				document.getElementById("msg").innerHTML = "<font color=red><strong>User exists!!</strong></font>" ;
			}
		} else {
			var outMsg = "there was a problem on your server : status = " + status ;
		}
	}
}
</script>

</head>
<body>
<center>
 <form action="checklogin.jsp">
  username : <input type="text" name="username" onblur="checkUserName();" /><span><div id="msg"></div></span><br><br>
  password : <input type="password" name="password" /><br><br>
  <input type="submit" value="submit" />
 </form>
</center>
</body>
</html>

·创建一个html文件，将上面的代码粘贴到文件中，取名为login.html

·创建一个jsp文件，将下列代码粘贴到文件中，取名为checklogin.jsp

<%@ page import="java.sql.*" %>
    
<%
 response.setContentType("text/xml") ;
 response.setHeader("catch-control", "no-store") ;
 response.setDateHeader("Expires", 0) ;
 
 String username = request.getParameter("username") ;
 String login = null;
 if ("firebug".equalsIgnoreCase(username))
 	login = "exist" ;
 else
 	login="notexist" ;
 response.getWriter().write("<msg>" + login + "</msg>") ;
%>

·部署到tomcat上

·打开login.html，在“username”右边文本框中输入“ffirebug”。

·点击password文本框，使焦点离开username。

结果~