firebug的使用
http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
简介
命令行是firebug中最有用的功能之一。如果你在使用VS中有些经验，当调试的时候，你可能知道VS的“immediate window”和“watch window”。
firebug的命令行就像VS中的"immediate window"一样，你可以在任何时候检查特定的对象的值。更好的是，firebug的命令行也可以在设计的时候使用（注意：vs 的"immediate"窗口只能在调试的时候使用）。并且，另外一个优势是你可以在命令行写javascript代码然后实时地执行它。
命令行的接口列表可以在firebug的官方网站上找到【链接：http://getfirebug.com/commandline.html】。在这个指南中，我要写些使用命令行的例子。我希望你觉得他有用。
命令行的类型
在控制台面板中有两种命令行的类型。
单行命令行
多行命令行
单行命令行
这个是firebug控制台面板中默认的。它允许你一次写一个。单行命令行的优势是它支持自动完成功能。
什么是自动完成？（参考http://getfirebug.com/cl.html）
使用tab键你可以自动完成变量的名字和对象属性。不断的敲它，你可以循环所有的可能性集合，用shift+tab后退。
自动完成工作在很多层次。你可以直接按下tab键来循环全局变量，而不用输入任何东西。你可以输入“document.b”，再按TAB，来遍历所 有以"b"开头的属性。你甚至可以输入一个复杂的表达式像“document.getElementsByTagName(’a')[0].”来看文档中 第一个链接的所有属性。另外，你可以使用“上”“下”得到你刚才输过的命令。
多行命令行
多行命令行是单行命令行的增强版。它允许你不止一次输入js代码。并且，你可以随时执行这些代码。
单行和多航模式都有他们自己的优点。你可以根据你要做的东西来选择使用哪一个。对我来说，我绝大数情况下是使用单行命令模式。
命令行接口的例子
在读这个指南之前，注意所以的接口都可以在设计和调试的时候使用。然而，当你在调试模式的时候，这个是更有用的。我要告诉你这些是因为你可能在考虑你为什么需要这些API
下载~ Demo Zip File
api列表
- $(id)
- $$(selector)
- $x(xpath)
- dir(object)
- dirxml(node)
- cd(window)
- clear()
- inspect(object[, tabName])
- keys(object)
- values(object)
- debug(fn) & undebug(fn)
- monitor(fn) & unmonitor(fn)
- monitorEvents(object[, types]) & unmonitorEvents(object[, types])
- profile([title]) & profileEnd()
#1.$(id)
根据特定ID返回单个元素。
这个是js中document.getElementById(”)的缩写版
例子（1.0）~
<body>
Name : <input id="nameTextBox" class="normalText" type="text" />
</body>
怎么做：
- 把上边这段代码粘贴到一个空白的html文件中然后在firebug中打开。
- 打开firebug然后单击"console"选项卡。
- 在命令行中输入$(’nameTextBox’)并且按回车。
输出~
它看起来非常简单（但是不是非常有用），但是我要说的是，当你在调试模式的时候或者是在多命令行写脚本的时候非常有用。
让我们看看怎样使用多命令行模式，怎样即时执行javascript.
- 点击"Options>Larger Command line"
- 复制下边的代码然后把他们粘贴到多命令行窗口（多命令行）
- 点击“run”
var txt = $('nameTextBox');
txt.value = 'Michael Sync';
txt.textAlign = 'center';
txt.style.color = 'blue';
txt.style.borderStyle = 'double';
txt.style.borderColor = 'pink';
结果~~
#2.$$(选择符)
返回一个匹配特定css选择符的数组。
例子( 1.1 )~
<!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">
div{
background-color:Black;color:White; border: solid 1px grey;
}
</style>
</head>
<body>
<div id='div1'>This is DIV1.</div>
<br />
<div id='div2'>Here is one more.</div>
</body>
</html>
注意：我在这个例子中使用了“css类型选择符”
步骤：
- 在命令行中输入$$('div')然后按回车键（你将得到一个数组中含有两个div对象（div1和div2）
#3.$x(xpath)
返回一个匹配特定xpath表达式的元素集合。
注意：如果你不了解XPath,你可以看下xpath指南here [^].
例子（1.2）~
<!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>CommandLine - $</title>
</head>
<body>
<div id='container' style="width:800px">
<div id='leftsidebar' style="width:100px; background-color:Gray;min-height:400px;float:left;"> </div>
<div id='content' style="width:600px;min-height:400px; background-color:ThreeDShadow;float:left;">
<div id='content-header' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<h2>All about Firebug</h2>
</div>
<div id='content-body' style="padding:2px;font-family:Calibri,Trebuchet MS;">
<p>Firebug is the most popular tool in web revolution.</p>
</div>
</div>
<div id='rightsidebar' style="width:100px; background-color:Gray;height:400px;float:right;"></div>
</div>
</body>
</html>
我们将要在多行命令行中测试。
把这个代码粘贴在多行命令行模式。
var obj = $x('html/body/div/div');
console.log(obj[0].id);
console.log(obj[1].id);
console.log(obj[2].id);
结果~
#4.dir(object)
输出和这个对象有关的所有属性的列表。这个和你在点击dom选项卡后看到的效果一样。
它像我在第一部分中提到的console.write()。所有我认为你已经有些想法了关于console.dir是什么并且怎么使用。这个例子，我将不使用新的HTML代码，而是使用前边的例子代替（例1.2）并且我将改变在多行命令行中的代码。
var obj = $x('html/body/div/div');
<strong>dir(obj);</strong>
下边的图片显示出了这个例子的结果。你将会得到这三个div对象的所有属性和方法。（leftsidebar, content, rightsidebar）
#5. dirxml(note)
输出一个html和xml元素的XML资源树，这个和你直接单击html选项卡一样。你可以单击任何一个节点来查看。
#6. cd(window)
默认情况下，命令行表达式和页面最高层的窗口有关。cd()允许你使用在页面中框架的窗口。
注意：这个API看上去不能正常工作。我将通知firebug团队并且让你们知道结果。
#7. clear()
清除控制台。如果你想清除控制台，输入这个命令“clear()”按回车。你也可在在js代码中输入"cosole.clear()".
#8. inspect(object[,tabName])
在一个最合适的标签中检查对象，或是通过可选的参数实现标签识别可用的标签名字是“html”, “css”, “script”, 和“dom”.
步骤~
- 在firefox中打开“example1.2”
- 在单行模式中输入inspect($(’content-header’),’html’)
- html选项卡被打开并且名为“content-header”的div被选择。（对照下边的图片）
#9. keys(object)
返回一个数组，数组中包含这个标签的对象的所有属性的名字。这个对象可以是js对象( eg: var objCar = new Car() )或者是html对象(eg: document.getElementById(’table1′))。
例1.4~
<!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>Keys and Values</title>
</head>
<body>
<table id="tbl1" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function Car(){
this.Model = "Old Model";
this.getManufactor = new function(){
return "Toyota";
}
}
</script>
</body>
</html>
步骤~
- 在ff中打开“example 1.4”
- 打开“console”选项卡
- 单击选项菜单中的“Larger command line”
- 写下下边的代码 var o = new Car();keys(o);
- 你会得到js类“Car”的所有属性的名字。
注意：如果你想练习这个API，请试着用这个API得到名叫“tbl1”表的所有属性的名字。让我知道你得到的结果是什么。
#10. values(object)
返回一个数组，数组中含有这个对象的所有属性的值。
例子：参考 例1.4
步骤~
- 在ff中打开"example1.4"
- 打开“console”选项卡
- 点击“Larger Command Line“
- 在命令行中写下下边的代码 var o = new Car();
<strong>values(o);</strong> - 你将得到js类"car"的所有属性的值
注意：因为getManufactor是个函数，所以它显示"object"(绿色链接),而不是值"Toyota"
#11. debug(fn) and undebug(fu)
在函数的第一行添加或者移除一个断点。
注意：在这个指南中，我不介绍这个API。关于这个，请读下个部分。
#12. monitor(functionName) and unmonitor(functionName)
打开/关闭函数调用记录日志
通常，如果我们想知道一个特定的函数是否被激发。我们通常使用"alert()"或者"console.log()"。如果我们使用了很多js文 件，那就是一个相当大的工作量了。因为我们需要在所有的js文件中找到这个函数，然后再放上"alert()"或者是"console.log",并且再 一次保存那个文件然后在浏览器中运行。用了firebug你不需要做那些事情了。你只需要知道这个函数，你可以跟踪他被执行了多少次。当你监视的那个函数 被激发后，你可以在控制台中得到通知。另外，它将会给你指向这个函数的链接。
例1.5~
<!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>Monitor and Profiler</title>
<script type="text/javascript">
function func1(){
//doSomething
}
function func2(){
//doSomething
}
function func3(){
//doSomething
}
</script>
</head>
<body>
<input id="btn1" type="button" value="Invoke func1()" onclick="func1();"/>
<input id="btn2" type="button" value="Invoke func2()" onclick="func2();"/>
<input id="btn3" type="button" value="Invoke func3()" onclick="func3();"/>
</body>
</html>
步骤~
- 在单行命令行中输入"monitor(func1)"(等几秒钟直到">>>monitor(func)")在命令行中显示。
- 然后，你可以点击这些按钮中的任何一个来激发你想要的函数
- 虽然我们一直监视"func1()"函数，无论何时你点击"invoke func1()"按钮，我们得到链接通知（对比下边的图片）。但是当你单击其他链接的时候，你将得不到任何东西。这是监听的API在firebug中的工 作原理。当你监视的函数激发后，你会得到通知。
- 输入"unmonitor(func1)"来移除对func1()的监视。
结果~
#13. monitorEvents(object[, types]) and unmonitorEvents(object[, types])
快速打开或关闭对一个对象的所有事件的记录
可选参数"types"可以具体指定一个具体的事件集合来记录。最常用的值是"mouse"和"key"
这些可用的类型的列表包括composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, 和“xul”
注意：不幸的是，这个API不能正常工作。以后我将和firebug团队联系并且更新她，对不起。
#14. profile([title]) and profileEnd()
打开和关闭javascript profiler。这个可选的参数标题包含在报告头中输出的文本。有三种方式可以打开javascript profiler
- 单击"Profile"按钮
- 在js代码中使用console.profile(’My Profiler Title’)
- 在命令行中使用profile(’My Profiler Title’)
如果你想知道更多关于在firebug中profiler的信息。请阅读我以前的指南(Firebug Tutorial - Logging, Profiling and CommandLine (Part II)).
总结
这个都是关于控制台选项卡的。即使仅仅一个选项卡，我也必须把我的指南分成三部分part 1, part 2 和这个)。现在我现在已经解释了关于控制台选项卡的所有事情。希望你觉得他有用
如果你有任何意见或者建议，请联系我。
Section 1: Console Tab : Logging, Profiling and CommandLine (Part II)
Overview of Console Tab
This tab is mainly used for logging. It also can be used as CommandLine window (like immediate window in Microsoft Visual Studio) while you are debugging the Javascript. It can be used for monitoring the execution of Javascript code by using Profiling service.
The following topic will be covered in this section.
- Logging in Firebug (with String Substitution pattern )
- Grouping the logs or messages
- console.dir and console.dirxml
- Assertion ( console.assert() )
- Tracing ( console.trace() )
- Timing ( Measuring the time of your code)
- Javascript Profiler (An introduction in this tutorial, the details will be covered in next tutorial.)
#1. Logging in Firebug
Firebug supports logging in Console tab. So, you don’t need to use alert(‘something’) or document.write(‘something’) anymore.
There are five types of logging in Firebug.
- console.log : Write a message without icon.
- console.debug : Writes a message to the console, including a hyperlink to the line where it was called
- console.error() : Writes a message to the console with the visual “error” icon and color coding and a hyperlink to the line where it was called.
- console.info() : Writes a message to the console with the visual “info” icon and color coding and a hyperlink to the line where it was called.
- console.warn() : Writes a message to the console with the visual “warning” icon and color coding and a hyperlink to the line where it was called.
Example Code:
- Open the htm file called “Plain HTML” or create one HTML file.
- Paste the following code with <body> tag.
| 1 2 3 4 5 6 7 |
<script language="javascript" type="text/javascript"> console.log('This is log message'); console.debug('This is debug message'); console.error('This is error message'); console.info('This is info message'); console.warn('This is warning message'); </script> |
You will get the following output. If you click on hyperlink (“test.htm” in this case), it will take you to script tab and will highlight the line that wrote this message.
String Substitution Patterns
String substitution parterns can be used in console.log, console.info, console.debug, console.warn and console.error . You can use the same way that we used in C/C++.
| %s |
String |
| %d, %i |
Integer (numeric formatting is not yet supported) |
| %f |
Floating point number (numeric formatting is not yet supported) |
| %o |
Object hyperlink |
Example :
Note: I will use console.log in the example below even all console objects (console.log, console.info, console.debug, console.warn and console.error ) support string substitution.
- Remove “script” tag that we pasted for the previous example.
- Paste the code below within <body> tag.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script language="javascript" type="text/javascript">
//This is for normal string substitution " %s, %d, %i, %f". console.log("My Name is <strong>%s</strong>. My Date of Birth is <strong>%dth %s, %i</strong>. My height is <strong>%f</strong> m.", "Nicolas Cage", 7, 'January', 1964, 1.8542);
function Foo(){ this.LeftHand = function(){ return "Left Hand"; } this.RightHand = function(){ return "Right Hand"; } }
//This is for object "%o". var objFoo = new Foo(); console.log('This is <strong>%o</strong> of Foo class.', objFoo);
</script> |
If you are using %o in your log, the object will be shown as a hyperlink in green color. This hyperlink is linked to the DOM tab. So, If you click “object” in second line, you will see the list of properties of that object (LeftHand and RightHand in this case.)
#2. Grouping
Firebug allows you to group the message or log in Console tab. If you have some many logs in your code, you can probably divide your log into small group or subgroup
Example ~
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script language="javascript" type="text/javascript">
var groupname = 'group1'; console.group("message group : %s " , groupname); console.log("log message 1 from %s", groupname); console.log("log message 2 from %s", groupname); console.log("log message 3 from %s", groupname); console.groupEnd();
groupname = 'group2'; console.group("message group : %s " , groupname); console.log("log message 1 from %s", groupname);
var subgroupname = 'subgroup1'; console.group("message group : %s " , subgroupname); console.log("log message 1 from %s", subgroupname); console.log("log message 2 from %s", subgroupname); console.log("log message 3 from %s", subgroupname); console.groupEnd();
console.log("log message 3 from %s", groupname); console.groupEnd();
</script> |
#3. console.dir and console.dirxml
- console.dir : It can be used for getting all properties and methods of a particular object. According the example below, we can get the Model (property) and getManufactor (method) of Car object by using console.dir(); You can also pass the object of HTML element (eg: console.dir(document.getElementById(‘tbl1′)); ) instead of objCar and let’s see the result. (You will get all properties and methods of the HTML table called “tbl1″).
- console.dirxml : print the XML source tree of HTML element.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table id="tbl1" cellpadding="0" cellspacing="0" border="0"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script language="javascript" type="text/javascript"> //Create a class function Car(){ this.Model = "Old Model";
this.getManufactor = new function(){ return "Toyota"; } }
//Create a object var objCar = new Car();
//Firebug console.dir(objCar); console.dirxml(document.getElementById('tbl1'));
</script> |
#4. Assertion ( console.assert() )
You can use console.assert() to test whether an expression is true or not. If the expression is false, it will write a message to the console and throw an exception.
Example :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script language="javascript" type="text/javascript"> function whatIsMyAge(year){ var currYear = 2007; return currYear - year; }
var yearOfBirth1 = 1982; var age1 = 25; console.assert(whatIsMyAge(yearOfBirth1) == age1);
var yearOfBirth2 = 1982; var age2 = 11; console.assert(whatIsMyAge(yearOfBirth2) == age2); //You should get the error here. </script> |
#5. Tracing ( console.trace() )
This function is very interesting. Before I tell you the way that I understand, let’s take a look what console.trace does exactly in official website.
console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.
The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.
This function will tell you about the route information from start point to end point. If you are not clear what I mean, let’s take a look at the sample code and the result.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!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 startTrace(str){ return method1(100,200); } function method1(arg1,arg2){ return method2(arg1 + arg2 + 100); } function method2(arg1){ var var1 = arg1 / 100; return method3(var1); } function method3(arg1){ console.trace(); var total = arg1 * 100; return total; }
</script> </head> <body> <input type="button" value="Trace" onclick="startTrace('Result');"/> </body> </html> |
Suppose: we wanna know how “method3″ function is invoked. So, we put this code “console.trace()” in that method. then, we run the program and we got the result as picture above. If we read the result from bottom to top, we will see “onclick(click clientX=34, clientY=26)”. That means the execution of Javascript started at on click event of button. then, we got “startTrace(“Result”)” in second line. That means startTrace function is invoked after firing onclick event and the parameter is “Result”. If we keep on checking from bottom to top, we will figure out the completed route from onclick event to method3.
If you wanna test more, you can move this code “console.trace()” to method2(). then, firebug will give the new route from onclick event which is a started point to method2() which is the end point.
I think that it’s pretty useful if you are debugging the other developer’s source code and you have no idea why this function is invoked.
Let me know if you are not clear what I’m trying to explain about console.trace();.
#6. Timing ( Measuring the time of your code)
You can use console.time(timeName) function to measure how long a particular code or function take. This feature is very helpful if you are trying to improve the performance of your Javascript code.
Example :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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 measuretheTime(){ var timeName = 'measuringTime'; console.time(timeName);
for(var i=0;i<1000;i++){ ///do something for(var j=0;j<100;j++){ //do another thing. } }
console.timeEnd(timeName); } </script> </head> <body> <input type="button" value="Trace" onclick="measuretheTime();"/> </body> </html> |
Result : measuringTime: 16ms
#7. Javascript Profiler
You can start the profiler thought code (console.profile(‘profileName’)) or by clicking “Profile” button from “Console” tag. It can be used for improving the performance of Javascript. It is similiar to the console.time() function but profiler can give your more advanced and detailed information.
I will tell you about this more details in next tutorial (Part2) . I hope you all are clear about this tutorial. If you have any comment or suggestion, please drop a comment.. Thanks. C ya tomorrow.
Reference ~
Firebug Tutorial
Section 1: Console Tab : Logging, Profiling and CommandLine (Part II)
Introduction
This tutorial is the part II of “Firebug Tutorial – Logging, Profiling and CommandLine“. (If you haven’t read the part I of this tutorial, I would recommend you to read the part 1 first.)
The following topic will be covered in this section.
- Javascript Profiler
- Tracing error
- Tracing XmlHttpRequest object
#1. Javascript Profiler
Javascript Profiler is very useful feature of Firebug for measuring the execution time of each javascript code. It is useful for improving the performance of your code or if you wanna find out why a particular function takes soooo long. It is a bit similar to console.time() that I mentioned already to previous part but Javascript Profiler can give you more detailed information about what’s happening with your code.
There are three ways to use Javascript Profiler. You can call this function by clicking “Profile” button on the toolbar of Firebug console or through code “console.profile()” or by typing “profile()” in commandline. I will cover first two in this tutorial but not for using profile() in commandline. If you want to know how to use it in commandline, please check-out this article.
console.profile()
- Copy and paste the code in notepad and then, save as a htm file
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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(){ <strong>console.profile('Measuring time');</strong> doSomething(); <strong>console.profileEnd();</strong> } 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> |
- Open this file in Firefox browser.
- Open the Console tab on Firebug console.
- Click “Start” button and wait a lit.. (You will get the result like the screenshot below. )
(The list is sorted based on the execution time.)
Columns and Description of Profiler
- Function column : It show the name of each function.
- Call column : It shows the count of how many a particular function has been invoked. (2 times for doThis() function in our case. )
- Percent column : It shows the time consuming of each function in percentage.
- Own Time column : It shows the duration of own script in a particular function. For example: doSomething() function has no its own code. Instead, it is just calling other functions. So, its own execution time will be 0ms as shown in picture. If you wanna see some values for that column, add some looping in this function.
- Time column : It shows the duration of execution from start point of a function to the end point of a function. For example: doSomething() has no code. So, its own execution time is 0 ms but we call other functions in that function. So, the total execution time of other functions is 923 ms. So, it shows 923 ms in that column. Not clear? Feel free to let me know. I can try once more.. I don’t mind to explain you again. (That’s my problem in writing .. I can’t write very clear.. Sorry about that. )
- Avg column : It shows the average execution time of a particular function. If you are calling a function one time only, you won’t see the differences. If you are calling more than one time, you will see the differences. Take a look the doThis() function at second line of picture above.
The formula for that column is ~
Avg = Own Ttime / Call; - Min column and Max column: It shows the minimum execution time of a particular function. In our example, we call doThis() function twice. When we passed 1000 as an parameter, it probably took only a few millisecond. (let’s say 1 ms.). then, we passed 100000 to that function again. It took much longer than first time. (let’s say 50 ms.) . So, in that case, “1 ms” will be shown in Min column and “50 ms” will be shown in Max column.
- File column : the file name of file where the function located.
Note: You can set the title of profiler by passing one string to console.profile() function. In our example (console.profile(‘Measuring time’);), ‘Measuring time’ is the title of profiler.
Profiler button from Console tab’s toolbar
If you don’t want to profile thru the code, you can use “Profile” button from the toolbar of Firebug console.
In order to test this,
- you need to remove two lines (console.profile(‘Measuring time’); and console.profileEnd();) from doSomething() function.
- Open this file in Firefox.
- Open Console tab of Firebug console.
- Click “Profile” button ( right button on the toolbar of Firebug console.)
- Click “Start” button on your page.
- Wait for 1 min ( or a lit less than that.)
- Click “Profile” button again. ( You will get the same graph as the picture above.)
That’s all about Javascript Profiler. Let me know if you have any question or comment.
Okay. Let’s move on to next topic.
#2. Options of Console tab
There is one link called “Options” at the right-side of Firebug console. If you click this link, you will see the menu as shown in picture below.
I will divided those times in three categories.
- Errors Tracing
- Show Javascript Error
- Show Javascript Warnings
- Show CSS Errors
- Show XML Errors
- XmlHttpRequest Tracing
- Show XMLHttpRequests
- CommandLine
- Larger Command Line
#2.1 Errors Tracing and Filtering
- Show Javascript Errors
- Show Javascript Warning
- Show CSS Errors
- Show XML Errors
Those options are used for tracing the errors of your script, style sheet and XML. You can also filter the error messages based on the type of error that you wanna.
Example Code
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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> |
Output ~
- Copy and paste the code in notepage.
- Save as a .htm file.
- Check “Shows Javascript errors” and “Shows CSS errors” on Console tab.
- Reload the page
- First, you will get the CSS error. ( Reason : We wrote bcolor instead of color in “normalText” class. )
- Click the button
- then, we will get the another error. ( because we wrote “doucmnet” instead of “document” in the code. )
I think those options are very sample to use. If you wanna see the errors, just check the option in menu. then, Firebug will give very good information about the errors that you are getting. Uncheck it if you don’t want.
#2.2. Tracing XmlHttpRequest object
This is also one of the most popular feature of Firebug and it is really helpful for Ajax developer. The problem with Ajax is that it is very difficult to figure out if something goes wrong in XmlHttpRequest. Sometimes, you have no idea about what’s going on behind the sense while the indicator keep on cycling all the time. One of the problem that I face when I was playing around with ajax, it is difficult to find out whether the response format from Web service are correct or not.
but things are very simple with Firebug. You only need to select “Show XmlHttpRequest” option. Firebug will tell the following thing.
- The execution time
- Parameters (QueryString)
- HTTP Header
- Response
Example : I used Yahoo UI DataTable in this sample. This sample is the updated version of this sample from Yahoo UI.
Download : SourceCode
- Download the zip file from the link above
- Extract the zip file and put all files to PHP directory.
- Try to call this file “dt_xhrlocalxml_clean.html” from Firefox ( http://localhost/yui-php/dt_xhrlocalxml_clean.html in my case.)
- Open the Console tab in Firebug console.
- Select “Show XmlHttpRequests” option
- Click the button “Load Data” on the page
- The following result as shown in picture will be shown. (The style might be a lit bit different since I didn’t change the path in some CSS files. )
- And check the Console tab in Firebug console.
- You will the detailed response in XML format as shown in the picture below.
Note: If you don’t wanna download or if you don’t have PHP installed on your machine, you may try to check this online sample from Yahoo. But there won’t be any button so you should select the “Show XmlHttpRequests” option first and reload or open the link…
Okay. That’s all for today. I was thinking to write about CommandLine in this part but I don’t have the enough time to write it today. Don’t worry. I will tell about CommandLine tomorrow.
Cya. Don’t hesitate to drop a comment if you have any suggestion or comment. I appreciate it.