引言:
本篇将涵盖以下几个主题:
·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" οnclick="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" οnclick="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" οnblur="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。
结果~