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>
<!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>
<!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>
<!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>") ;
- %>
<%@ 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。
结果~
