firebug指南（四）---javascript性能评测和对象跟踪(转)
引言：
?
本篇将涵盖以下几个主题：
?
???? ·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次的循环，看看效果如何）。
?????? ·“时间”列： 本列显示了方法的执行时间间隔（从开始执行一直到执行结束返回）。
??? ?? ·“平均时间”列： 时间/调用次数。
?????? ·“最小时间”列： 该方法所有被调用中执行时间最短的时间（本例中
测试步骤~
???? ·在上个例子的代码上将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" 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。
?
结果~
?
? 原文连接：http://04101334.iteye.com/blog/339694