Firebug Tutorial : Section 4 – Net, CSS and DOM tabs

This is the last post of Firebug tutorial series. I’m going to explain about Net panel, CSS panel and DOM panel in this tutorial. As there are not so much things to say about that, I’m gonna write up about all three panels in one post.

#1. Net Panel

Net Panel - Firebug

The Net Panel can be used for measuring the performance of your webpage. It shows very useful informations about how long your webpage takes to load, the size and loading time of each and every files (i.e: image files, css, js file and so on.) of your webpage. if you are looking for the way to improve the performance of your webpage, you just need to check the NET panel after loading your page and see which files took so long to load.

1.1. What is Net panel showing?

Let’s take a lot what kinda information NET panel shows for you. There are four columns in NET panel.

  1. Name of files : The first column at the left-side shows the name of each and every files that are included in your webpage.
  2. Base URL : The second column shows the base URL of each file. If you are using some files from other sites (eg: linking image from other site, putting ads in your blog ) then the different URL(s) will be shown in this column.
  3. Size : The third column shows the size of each file.
  4. Loading Time : The last column shows the loading time of each file and whether those files are loaded from cache or not. It also show the status of each file in different colors as below. ( Thanks to Jack Sleight for the explanation of color and its description )
    1. Green : Loading the file from server.
    2. Dark Grey : Request sent to server, file loaded from server
    3. Light Grey: Request sent to server, “Not Modified” received, file loaded from the cache.
    4. No bar for the file: No request sent to server, file loaded from cache

You should also note that the list of files showing in the Net panel are sorted based on the order of how Firefox loaded those files.

1.2. HTTP Headers

The Net panel shows the HTTP headers of every request/response messages so you can easily find out the interesting information like the parameters that are passed to server, the type of webserver, cookies and etc.

HTTP Header

1.3. Filter the requests by type

If there are a lot of requests shown in Net panel, you can filter all of those requests based on the type of requests. For example, If you like to check the requests for image only then you can click the button called “Images” on toolbar to filter the requests for images.

1.4. Full path of files and Image Preview

If you move your cursor on the name of file (at the first column of Net panel), it will show you the full path of the file as a clickable link. If it is an image file then the actual image will be shown as a preview in Net panel. (Please check-out the pic below.)

Summary about Net panel

  • It shows the headers for request/response messages for all kind of requests
  • It can be used for XMLHttpRequest monitoring ( The Console panel does this too. You may check “Tracing XmlHttpRequest object” in this tutorial. )
  • It sorts the files based on how Firefox loaded those files.
  • It shows the loading time, the size of each and every files.
  • It shows a particular file is loaded from server or cache.
  • Net panel is a packet sniffer. ( not like YSlow which is a DOM crawler.)

Well. that’s all about Net panel. What do you think? Please leave a comment if you have any suggestion or comment.

#2. CSS Panel

The CSS panel allows you to view/edit the stylesheet of your page. It is just very simple panel and doesn’t have so much feature in it.

2.1. List of CSS files

To see all CSS files of your page, just click the button (“michaelsync.net” for my case) beside “Edit” button. Then, the content menu will be shown and all CSS files will be listed on that menu. So, you can simply click any CSS file that you wanna view.

2.2 Normal Mode Vs Editable Mode of CSS Panel

Like HTML tab, it has normal mode and editable mode. If you click “Edit” button on the toolbar of CSS panel, it will become the editable mode.

Normal Mode

  • Advantages
    • It shows the highlighted CSS syntax so looks nice.
    • It allows you to edit the attribute of CSS class.
    • It autocompletes as you type against the list of possible values for the property you are editing
    • It allows you to disable a particular style on the fly.
  • Disadvantages
    • You can’t create new CSS class in this view.
    • It is difficult to remove one or more CSS class(es) from the file

Editable Mode

  • Advantages
    • You got the full control of your CSS file so that you can edit/remove the CSS class as many as you want. You will feel like writing in notepad.
  • Disadvantages
    • You will lost all syntaxhighlighting or autocomplete feature of CSS panel.

#3. DOM panel

It shows all default DOM properties, functions, constants, the user-defined properties and user-defined function.This panel is not very helpful (at least for me) except one thing. If you wanna find out how many function or properties included your scripts, you may probably want to use this panel to find out about that.

Let’s write one short script as below in plain HTML file.

<!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>Untitled Page</title>
<script type="text/javascript">
function Car(){
this.Gear = 5;
this.Start = function(){
console.log("Please put my car a lit bit!");
return false;
}
}
</script>
</head>
<body>
</body>
</html>

And then, save it as htm file. Open it in Firefox and then check the DOM tab. You will see the result as the picture below. “Car()” is a function that you just wrote in JS, isn’t it?

Okay. That’s all about DOM tab. This is the feature what DOM tab has so far….

My tutorials for Firebug is ended here. I hope that you all do enjoy reading all of my tutorials. Actually, I’m not teaching you about Firebug. I’m just sharing the way I understand about Firebug and I believe that you found it useful. Any feedback are welcome as usual. Feel free to let me know if you have any suggestion or comment.

One more thing is that Yahoo is releasing the Firefox addon called YSlow integreated with Firebug. This tool is also a performance measuring tool like Net panel. YSlow used to determine the performance of webpage based on 13 rules. I’m currently learning about those rules and doing some experiments. I will post about this in details very soon.. Please keep on watching my blog….

Thanks for reading. Have a nice day!!
Michael Sync
 Hey! don’t forget to give the feedback about my tutorials.. Here is the index.. Thanks..

Firebug Tutorials

Firebug Tutorial – Script Tab : Javascript Debugging

Firebug Tutorial

Section 3: Script Tab : Javascript Debugging

I’m going to show you how to debug the Javascript code with Firebug in this tutorial. If you are an Ajax developer, the tutorial will help you in many ways to boost your production in your RIA (Rich Internet Application) development.

The following topics will be covered in this tutorial.

  1. Overview of Script Tab
  2. Debugging Javascript with Firebug
  3. Javascript File Selector
  4. Conditional breakpoint
  5. Using Commandline API while debugging
  6. debug(fn) and undebug(fu) <CommandLine API>

Download : Sample File

Note : Please refresh your web page if something goes wrong in Firebug console while you are debugging. As I’m using Firebug for my web project over 1 year, I know that this tool is very useful too. However, there are a few issues and limitations with this tool. So, please don’t mind about that. If you found any bug, you can report here. OR, you can search the existing issue in issue list.

#1. Overview of Script Tab

The Script tab is the fourth tab of Firebug that allows you to debug the Javascript code on the browser. There are two subpanels in script panel. The panel on the left is the Javascript editor for debugging the javascript code. The subpanel on the right includes two sub panels called “Watch” and “breakpoint”. Please take a look the picture and description in below for more details.

Firebug - Script Tab

  1. JS Editor : This is the Javascript editor where you can debug the Javascript. There is one option called “Break on All Errors” in this editor. If you check this option, the script exection will be paused if the errors occurs in your script.
  2. JS File Selector : If you click on it, you will see the list of all Javascript files that are included in your page. (Please check “#3. Javascript File Selector” section for more details.)
  3. Line of Code & breakpoint : This is a place where you can set the breakpoint for debugging.
  4. Watch Window: It displays the value of variables as a list in that window. If you have some experiences in using Microsoft Visual Studio, you already have some idea about how to use Watch window. There is only one difference between the Watch window from Firebug and the one from Visual Studio. In Visual Studio, the “Watch” window displays the value of selected variables. But the “Watch” window of Firebug will display all values of variables within the current scope.
  5. list of breakpoints : The list of breakpoints that you set in Javascript Editor will be shown in that panel. You can also remove all breakpoints from that panel.

#2. Debugging Javascript with Firebug

Debugging javascript is very straightforward process with Mozilla Firefox and Firebug. If you are Visual Studio developer then you won’t feel any differences while you are debugging the Javascript code with Firebug excepts the debugger runs as the part of browser. Let’s follow the steps to take a look how to debug the JS code.

Steps to debug Javascript with Firebug

  • Copy the code below and paste them in notepad and save as a htm file. ( or If you already downloaded the sourcecode of this article, you can find the html file called JS-Example1.htm in zip file. )
<!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>Javascript Debugging with Firebug</title>
<script type="text/javascript">
function doSomething(){
var lbl = document.getElementById('messageLabel');
lbl.innerHTML = "I just did something.";
}
</script>

</head>
<body>
<div>
<div id="messageLabel"></div>
<input type="button" value="Click Me!" onclick="doSomething();" />
</div>
</body>
</html>

Example 1.0

  • Open your HTML file in Firefox browser.
  • Launch the Firebug console and go to “Script” tab.
  • Set the breakpoint on line 7 (as shown in pic below)

    breakpoint-on-fb.jpg

  • Take a look at “Breakpoint” window at the right panel. (One line is added in “Breakpoints” windows as shown in pic.)

    breakpoint-window.jpg

  • Click “Click Me!” button on your page. (The Javascript execution will stop at the breakpoint that you set on line 7. )

    break-on-line.jpg

  • You can step thought the code by using one of those buttons (Continue, Step Over, Step Into and Step Out ) on the toolbar of Firebug.

    step-out.jpg
    (From left to right)

    • Continue (F8) : allow you to resume the script execution once it has been stopped via breakpoint
    • Step Over (F10) : allow you to step over the function call.
    • Step Into (F11) : allow you to step into the body of the another function.
    • Step Out : allow you to resume the script execution and will stop at next breakpoint.
  • So, click “Step Over” icon to go to the next line (line 8). (then, please take a look at “Watch” window. The values of variable called “lbl” will be displayed on “Watch” window. )

    watch-window.jpg

  • then, Click “Step Over” icon to go to the next line. As there is no next line in our script, the execution will be stopped.

Yeah. That’s all about simple Javascript debugging with Firebug. I will explain about more advanced features such as “using conditional breakpoint” and “using commandline API while debugging” in next example.

Note about “Watch”window : Even though the value of the most variables are shown in “Watch” window, there might be some cases that you can’t find the variable you want in “Watch” window. In that case, the Commandline API are very helpful for you.

#3. Javascript File Selector

Using firebug console, you can easily find out how many script files are included in your page. (Please check-out the picture below. ) And also, you can change the script file that you wanna to debug.


#4. Conditional breakpoint

The conditional breakpoint is very helpful when you don’t want to debug line-by-line. For example, there is one for-loop that loops 50 times in your code. If you set the normal breakpoint, the execution will be paused each time you enter in that loop. But if you are using conditional breakpoint, you can put the condition on your breakpoint so that the script execution won’t be paused every time you enter in that loop.

In order to show you how to use the conditional breakpoint, I will change the Javascript code as below from the previous example (e.g: 1.0). (If you already downloaded the sourcecode of this tutorial, please take a look the html file called “JS-Example2.htm” in zip file.)

function Dwarf(name){
this.Name = name;
}

function DwarfFactory(){
var dwarfs = new Array();

this.AddDwarfs = function(){
dwarfs[0] = new Dwarf('Bashful');
dwarfs[1] = new Dwarf('Doc');
dwarfs[2] = new Dwarf('Dopey');
dwarfs[3] = new Dwarf('Grumpy');
dwarfs[4] = new Dwarf('Happy');
dwarfs[5] = new Dwarf('Sleepy');
dwarfs[6] = new Dwarf('Sneezy');
}

this.ShowDwarfs = function(){
for(var idx in dwarfs){
console.log(dwarfs[idx].Name);
}
}

this.ToString = function(){
var names = '';
for(var idx in dwarfs){
names += dwarfs[idx].Name + ' ';
}
return names;  //dwarfs.join(' ');
}
}

function doSomething(){
var objDwarfFactory = new DwarfFactory();
objDwarfFactory.AddDwarfs();
objDwarfFactory.ShowDwarfs();

var lbl = document.getElementById('messageLabel');
lbl.innerHTML = objDwarfFactory.ToString();
}

Example : 1.1

In our example, there is one for-loop in “ShowDwarfs()” function. We will set the conditional breatpoint in that loop. We wanna pause the script execution only when the name of dwarfs object is “Happy”. So, right-click on Javascript editor and put the condition “dwarfs[idx].Name == ‘Happy'” in the properties of breakpoint as shown in screenshot below. Then, press “Enter” key.

conditional-breakpoint.jpg

then, click the button on your webpage. The script execution will be paused when the condition that we put is true. We can also use the commandline API while debugging.

#5. Using Commandline API while debugging

If you have no idea about Firebug’s commandline API, I suggest you to read this tutorial first. Like we used to use “Immediate” window while we are debugging the code in Visual Studio, you can use Console panel with Commandline APIs while debugging Javascript with Firebug.

Let’s continue the previous example. The execution is paused when the condition is true. Then, you can go to Console panel and type any commandline API to find out more about current dwarf object. Let’s say we typed “console.dir(dwarfs[idx])” in one-line commandline. then, You will get the result “Name “Happy”” in console panel as pic below.

consoledir-debug.gif

#6. Using debug(fn) and undebug(fu) API

As I said in my Commandline API article, I will explain about debug() and undebug() API here.

#11. debug(fn) and undebug(fu)
Adds or removes a breakpoint on the first line of a function.
Note: I’m not going to cover about this API in this tutorial. Please read more about this in next section.

Basically, debug(fn) and undebug(fn) APIs allows you to set/remove the breakpoint based on the function name from commandline or Javascript code instead of setting the breakpoint in script panel.

Example

  • Open the “JS-Example2.htm” from zip file
  • Remove all breakpoints that you set earlier. (Script panel>Breakpoint panel>Options>Remove all breakpoints)
  • Go to the Console panel.
  • Type “debug(doSomething)”
  • then, click “Click Me!” button. (Observe: The script execution will be paused at the first line of doSomething() function. )
  • If you want to remove the breakpoint that you set, type “undebug(doSomething)” in commandline.

So, keep in mind that there are three ways to set the breakpoint in Firebug.

  1. Static Breakpoint : It can be set based on line number. You need to set this kinda breakpoint by clicking the line of code bar in Script panel.
  2. Conditional breakpoint : It can be set based on the condition. You need to set this kinda breakpoint by clicking the line of code bar in Script panel.
  3. Dynamic breakpoint : It can be set based on the name of Javascript function. You can set this from commandline or Javascript code by using debug(fn) and undebug(fn).

If you wanna try to debug Ajax application, there is one sample file called AjaxExample folder. So, feel free to try debugging this sample if you want.

Okay. that is all about debugging Javascript with Firebug. I hope you will help it useful. Sorry for taking so long to post this tutorial because there are a lot of problems in my country (Myanmar) so I have no mood to blog. :( Anyway, I have tried to cover as much as I can in this tutorial. Feel free to let me know if you have any comment or suggestion. Thanks for reading..

Firebug Tutorial – HTML Tab : Examples

Firebug Tutorial

Section 2 : HTML Tab – Examples

Example 1.1. How to inspect the HTML element or how to figure out the structure of the web design you like

Note: I’m *NOT* encouraging people to copy the other people creative work. I’m just showing how to learn other people’s creation. Don’t get me wrong. :) If you are working in small software company, you probably might wear the multiple hats, which means you have to do coding (of course), user requirement, system design, UI design and so on. As you are not a designer, you may have some problems in designing things and not very sure about how to make things looks better.. so, you probably need to check other web designs and you need to adopt those designs to create your own one. For this fact, Firebug is the best tool for you. So, remember that it is not about copying thing. :)

Scenario ~ Let’s say you think that the menu bar of iPod Touch webpage of apple is impressive. You wanna know how the toolbar is created.

  • Open IPod Touch webpage in Mozilla Firefox.
  • Click “Inspect” button from the toolbar of Firebug console.
  • Move your cursor on the menu of the website by using mouse.
  • Click the element (menuitem) that you wanna inspect ( Note: I suggested you to select the first item of menu because it is easy to find out about the main HTML element. (Let’s say we selected “Apple icon” ))

  • (In our example, we selected the first menuitem of menu in webpage so that the related HTML element <A> tag is highlighted in “View Source” HTML panel. Don’t forget to take a look the “Style” panel at the right-side. The CSS rule that are styling to that <A> tag are shown in that panel. Then, You can easily figure out that the DIV called “global header” is the main for this menu. )
  • Select the DIV “globalheader”
  • Right-click on the element and select “Copy HTML ” from content menu.
  • Create new HTML file and pasted it within <body> tag.
  • After that, Check the CSS rule in Style panel. (In our case, “#globalheader” and “html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input” are the CSS rule that are styling to that A link. The blue link “nav.css” shows the source CSS file. Plus, the inherited CSS rules from ipod.css and base.css are also shown in “Style” panel)
  • So, copy those CSS and pasted them in your html file.You can repeat this step to find the CSS rule for each HTML element. But it took some times to grasp all CSS rules since you have to go one HTML element after another.. So, the best way would be copying all CSS rules from the source.
  • In order to copy the whole CSS rules from the source file, click the blue link “nav.css” then it will take you to “Style” panel (not the one from HTML panel) as the picture below.

    The CSS rule that you selected in the “Style” subpanel of HTML panel will be highlighted.

  • Click “Edit” button on the toolbar of “Style” panel
  • Select all CSS rules and Copy
  • then, paste them in your HTML file.
  • Copy the inherited CSS rule for body tag from base.css and paste them in your HTML file.
  • Check the images path and copy those required images also.
  • Finally, you got the great menubar that you are looking for.

Let me know if you are not very clear about those steps.. I have uploaded the sample here. [link] You can download it if you wanna take a look the sample.

Screenshot

*****

Example 1.2. “Scroll into View” and “Searching” in HTML tab.

Searching feature of HTML is useful if you wanna find something in HTML Source. (The default search of Mozilla Firefox is for searching the text. not for searching the HTML source.) Searching feature is more helpful if you use “Scroll Into View” after search. If you found something you want in HTML tab then you can click “Scroll Into View” to scroll that thing into view.

Scenario : How to find your photo in 2kbloggers Photo Montage Page?

Let’s say you are one of members of 2kbloggers team. so, your photo will be included in Photo Montage page of 2kbloggers website. As there are too many photos in that page, it is not so easy to find yourself among those photos. The Firefox default search is useless for that case. Fortunately, The search feature of HTML panel of Firebug will help you to find your photo in very easy way.

Steps ~

  • Launch Firebug console in that page.
  • Go to HTML Console
  • Type your blog link (eg: http://michaelsync.net) in Search textbox. (note: please type a lit bit slow and wait)
  • After you finished typing, the Anchor element which is belong to your link will be highlighted in “View Source” panel.
  • Move your cursor on the src of image link. Firebug will show the photo that you are looking for.
  • Right-click on that element and click “Scroll into View”
  • Then, check the photo at the first line under toolbar of Mozilla Firefox. Your photo will be there at the first line..

That’s all. Don’t hesitate to contact me if you have any problem for those tutorials.

Thanks for reading.

Firebug Tutorial : HTML tab – Playing with HTML DOM

Firebug - Web Development Evolved

Firebug Tutorial

Section 2 : HTML Tab – All about HTML tab

Introduction

The HTML tab is the second tab of Firebug console that allows you to play with HTML DOM in your browser. There are “View Source” window in the left side of the HTML panel and 3 sub panels called “Style”, “Layout” and “DOM” in right side. The HTML tab will help you to find out how a particular web page is structured. It is allowed to edit the HTML element or CSS rule dynamically on the live view.

The following are what HTML tab can do for you.

Features ~

  • Inspect HTML element
  • Explore the style of a particular HTML element
  • Explore the HTML DOM of the whole document
  • Edit the existing HTML element and CSS
  • Search the internal HTML element instead of Text on the page.

The “View Source” panel

The “View Source” window located at the right side of HTML panel. It has more advanced features than what the default “View Source” of Firefox browser has. It shows the HTML DOM in hierarchical structure or treeview with highlight color. (Please check the screenshot below.). It allows you to expand/collapse the HTML dom so that it is very easy for you to figure out the whole structure of the webpage. Another advantage of that HTML “view source” is that it allows you to edit/delete the HTML elements or attributes on the fly and the changes will immediately affect to the webpage that you are watching.

html-view.jpg

Options of “View Source” panel

There are six options as below in “View Source” panel.

  1. Show Full Text : If the text within a element (i.e: <P> tag ) are too long then Firebug will truncate this text and will append “…” after the string.
  2. Show White Space : It shows the white space between each HTML element. I don’t think that option is useful.
  3. Show Comments : Check this option if you want to show the comment in “View Source” panel. otherwise, unchecked.
  4. Highlight Changes : It shows in highlight color if you make some changes in HTML view.
  5. Expand Changes : It will expand the HTML element that has changes. ( But it seems doesn’t work properly. it always expand the node even “Expand Changes” option is not selected .)
  6. Scroll Changes Into View : The scroll bar of “View Source” panel will move to the place where something has changed.

Note: If you are not very clear about option 4, 5 and 6, go to this page. There are two buttons on that page. Open the Firebug console by pressing F12 and click “HTML” tab. Check some or all of those options (4,5 and 6) in Option menu of HTML tab. Click one of those buttons on that page and find out what is happening in HTML panel.. For example, you select “Scroll Changes Into View” option and then, you click the button to append new row to the HTML table. Then, the HTML view will scroll to the position where the changes occur.

Left Menu of “View Source” panel

You will see the following menus if you right-click on the HTML element in “View Source” Panel.

  • Copy HTML : Copy the whole HTML element that you selected.
  • Copy innerHTML : Copy the innerHTML of HTML element that you selected.
  • Copy XPath : Copy the xpath of HTML. (i.e: /html/head/title)
  • Scroll Into View : Move the HTML element into View. (See the example 1.2 of next post for details)
  • New Attribute : Create new attribute in exisiting HTML element
  • Edit HTML : It allows you to edit the HTML on the fly.
  • Delete Element : Delete the existing HTML element on your page.
  • Inspect in DOM tab : Get the properties of the selected HTML element in DOM tab.

Now, I think that you have some ideas about “View Source” panel. So, let’s take a look how to inspect the HTML element.

Inspecting HTML element

inspect-button.jpg

The button called “Inspect” at the right side of HTML toolbar as the picture above allows you to inspect the HTML element of the web page. All you need to do is that just click that button and move your mouse around the webpage. The HTML element under your cursor will be highlighted and the related elements will be selected in “View Source” panel of HTML tab. ( Please check the image below if you want to know how it looks like. )

inspect-html-demo.jpg

There are two reasons why this feature is useful for web developers or webdesigners.

  1. It is useful when we are figuring out why something in our page doesn’t look okay.
  2. It is also useful when we are learning other people’s web design and how people created those designs. (I say “learning” but not copying other people’s work. Sometimes, it is not good enough to keep on creating our own stuffs without caring about how the world is moving. As there are a lot of websites that have gorgeous design on internet, we should take a look a lit bit how those designs are structured. )

Editing the HTML element and attribute

  1. Editing the exisiting attribute of HTML element
    Just click on the attribute. It will show the textbox on the attribute as the picture below. You can just key-in and press “Enter” when you have done.edit-attribute.jpg
  2. Creating new attribute in the existing HTML element
    Right-click on the exisiting HTML element and select “New Attribute” on content menu. The placeholder for new attribute will be shown as the picture below.new-atttribute.jpg
  3. Creating/Editing the HTML element
    If you want to create or edit the HTML element, righ-click on the HTML element and select “Edit HTML” on content menu or click “Edit” button on the toolbar of HTML tab. The “View Source” panel will change to something like notepad. Then, you can edit the existing HTML element or add new HTML element. If you finish editing, click Edit” button then it will change to normal “View Source” panel and the changes will affect to the webpage.edit-html.jpg
  4. Deleting the HTML element.
    This one is very simple. You need to right-click on the note that you wanna delete. and chose “Delete Element” on content menu.

The “Style”, “Layout” and “DOM” subpanels

Style panel

Those sub panels work very closely with “View Source” panel. If you select one of HTML element in “View Source” panel, the CSS rules that are styling to that element will be shown in the “Style” subpanel and the properties of that element will be shown in “DOM”. It is so easy for you to find out which CSS rules are styling to which element.

Take a look at this picture. We selected the div called “page” in “View Source” panel. The CSS rule (i.e: #page in this case) that is styling this DIV element will be shown in “Style” panel.

explore-the-stylesheet-of-element.jpg

Editing the CSS attribute

You can also edit the CSS style (i.e: margin, width or etc) in “Style” panel. When you click on the attribute, it will show one textbox that you can type anything you want. If you forget the stylesheet attribute name, you can press “Up” or “Down” key to get the available stylesheet. It is like IntelliSense in Visual Studio.

Computed Style

If you like to see the CSS rule in computed style, you can change the look by checking “Show Computed Style” in the option of Style panel. I don’t think that option is very nice. I more prefer to use the default one.

show-computed-style.jpgs

Layout Panel

If you click on the “Layout” tab, you will get the offset, margin, border and padding of the HTML element that you have selected in “View Source” panel. You can display the vertical ruler and horizontal ruler on your page if you check “Show Rulers and Guides” in the option of “Layout” panel. And you can also edit the value of offset, margin, border and padding of that element.

DOM panel

DOM panel shows all DOM properties of the HTML element that you have selected in “View Source” panel.

dom-tab.jpg

Conclusion

That is all about HTML tab. I covered everything about HTML tab in one post. So, it might be a lit bit confused for you. Let me show you which one is more important and which one is less.

  1. Inspect HTML, “View Source” panel and “Style” panel [ This is very important so you must know about this ]
  2. Edit the HTML element and CSS [ this is good to know. ]
  3. “Layout” panel and “DOM” panel [ good to know but doesn't matter if you don't know. ]

Okay. I will stop this tutorial here. I will post about some examples related to HTML tab in next post..

Updated: I have posted two examples related to HTML tab in this post. <link: http://michaelsync.net/2007/09/23/firebug-tutorial-html-tab-examples/>. Hope you will find it useful..

Feel free to let me know if you have any suggestion or comment. Thanks..

Firebug Tutorial – Using Commandline API in Firebug

Firebug Tutorial

Section 1: Console Tab : Using Commandline API in Firebug

Introduction

Commandline is one of the most useful features of Firebug. If you have some experiences in using Microsoft Visual Studio, you may know the usefulness of “Immediate window” and “Watch window” of VS while you are debugging.

Firebug’s commandline is like the “immediate window” from Visual Studio. You can inspect the value of a particular object at anytime. One better thing with firebug’s commandline is that it can be used at design-time also. ( Note: “Immediate” window from VS can be used at debugging-time only). And, another advantage is that you can write the Javascript Code in commandline and execute those codes on the fly.

The list of Commandline APIs for Firebug are available in the official website of Firebug. [ link: http://getfirebug.com/commandline.html]. What I’m going here is that I’m gonna write about all Commandline APIs with examples in this tutorial. I hope that you will find it useful.

Types of CommandLine

There are two types of Commandline in Console panel.

  • One-line Commandline
  • Multi-lines Commandline

One-line Commandline

This one is the default one for Console panel of Firebug. It allows you to write one line at a time. The advantage of one-line commandline is that it supports autocomplete feature.

What is Autocomplete?(Ref: http://getfirebug.com/cl.html)

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing “document.b” to cycle thorugh all properties that start with “b”. You can even hit tab after a complex expression like “document.getElementsByTagName(‘a’)[0].” to see all properties of the first link in the document.

Plus, You can also use “Up” or “Down” keys to get the command that you typed earlier.

commandline.jpg

Multi-lines Commandline

The multi-lines commandline is the enhancement version of one-line commandline. It allows you to type the Javascript code more than one time. And you can execute the code on the fly.

commandline-larger.jpg

Both one-line commandline and multi-lines commandline have their own advantages. So, you can use either one based on what you wanna do with Firebug. For me, I used to use one-line commandline at the most of the time.

CommandLine API with example

Before start reading the tutorials, note that all of those APIs can be used both design time or run-time. However, those are more useful while you are in debugging mode. I’m telling you this because you may wonder why you need those APIs. :)

Download ~ Demo Zip File

List of APIs

  1. $(id)
  2. $$(selector)
  3. $x(xpath)
  4. dir(object)
  5. dirxml(node)
  6. cd(window)
  7. clear()
  8. inspect(object[, tabName])
  9. keys(object)
  10. values(object)
  11. debug(fn) & undebug(fn)
  12. monitor(fn) & unmonitor(fn)
  13. monitorEvents(object[, types]) & unmonitorEvents(object[, types])
  14. profile([title]) & profileEnd()

#1. $(id)

Returns a single element with the given id.

This is the shortcode for document.getElementById(”) in Javascript.

Example ( 1.0 )~

<body>
Name : <input id="nameTextBox" class="normalText" type="text" />
</body>

How-to ~

  • Paste the code above in blank HTML file and open it in Firebug.
  • Open the Firebug console and click “Console” tab.
  • Type $(‘nameTextBox’) in CommandLine and Press Enter Key

Output ~

sample.jpg

It seems very simple (and looks like not very useful) but I would say that it is useful while you are debugging the code or writing the script in multi-lines commandline.

Let’s see how to use multi-lines commandline, how to execute the Javascript on the fly.

  • Click “Options > Larger Command Line”
  • Copy the code below and paste them in multi-lines commandline (larger commandline).
  • Click “Run”
var txt = $('nameTextBox');

txt.value = 'Michael Sync';
txt.textAlign = 'center';
txt.style.color = 'blue';
txt.style.borderStyle = 'double';
txt.style.borderColor = 'pink';

Output ~

multiline-cmdline.jpg

#2. $$(selector)

Returns an array of elements that match the given CSS selector.

Note: Check the link here if you don’t know what CSS selector is.

Example ( 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>

Note: I’m using “Type CSS selector” in this sample.

How-to ~

  • Type $$(‘div’) in CommandLine and Press Enter Key (You will get both div objects (div1 and div2) as an array. )

#3. $x(xpath)

Returns an array of elements that match the given XPath expression.

Note: If you have no idea about XPath, you may check the XPath tutorial here [^].

Example ( 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>

We will test this API in multi-lines commandline.

Paste the code below in multi-lines commandline.

var obj = $x('html/body/div/div');
console.log(obj[0].id);
console.log(obj[1].id);
console.log(obj[2].id);

Output ~

x-result.jpg

#4. dir(object)

Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.

It is like console.dir() that I already mentioned in Part I. So, I think you already have some idea about what console.dir is and how to use. I’m not going to write the new HTML code for this example. Instead, I will use the previous example (eg 1.2) and I will change the Javascript code that I wrote in multi-lines commandline.

var obj = $x('html/body/div/div');
<strong>dir(obj);</strong>

The result will be like the pic below. You will get all properties and methods of those three DIV objects (leftsidebar, content, rightsidebar).

dir.jpg

#5. dirxml(note)

Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.

I already showed you how to use console.dirxml() in this tutorial. Only one thing is different. You can type dirxml() (eg: dirxml(‘container’) with the example 1.2.) in commandline instead of writing in HTML file.

#6. cd(window)

By default, command line expressions are relative to the top-level window of the page. cd() allows you to use the window of a frame in the page instead.

Note: This API seems doesn’t work properly. I will inform to Firebug team and will let you know the result.

#7. clear()

Clears the console. If you wanna clear the console, just type this “clear()” in commandline and press “Enter” key. You can also use “console.clear()” in Javascript Code.

#8. inspect(object[,tabName])

Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.

The available tab names are “html”, “css”, “script”, and “dom”.

How-to ~

  • Open “example 1.2″ in firefox.
  • Type inspect($(‘content-header’),’html’) in one-line commandline.
  • The HTML tab will be opened and the DIV called “content-header” will be selected. (check the pic below)

inspect-html.jpg

#9. keys(object)

Returns an array containing the names of all properties of the object. The object can be either Javascript object ( eg: var objCar = new Car() ) or HTML element (eg: document.getElementById(‘table1′)).

Example 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>

How-to ~

  • Open “Example 1.4″ in firefox
  • Open the “console” tab.
  • Go to multi-lines commandline by clicking “Larger Command Line” in Option menu
  • Write the following code in commandline
    var o = new Car();
    keys(o);
    
  • You will get the names of all properties of this JS class called “Car”.

keys.jpg

Note: If you wanna practice this API, try to get the names of all properties of the HTML table called ‘tbl1′ by using this API. Let me know what result you get. :)

#10. values(object)

Returns an array containing the values of all properties of the object.

Example : Ref: to example 1.4.

How-to ~

  • Open “Example 1.4″ in firefox
  • Open the “console” tab.
  • Go to multi-lines commandline by clicking “Larger Command Line” in Option menu
  • Write the following code in commandline
    var o = new Car();
    <strong>values(o);</strong>
    
  • You will get the values of all properties of this JS class called “Car”.

values.jpg

Note: As the getManufactor of Car() class is a function, it shows “Object” (green link) instead of the value “Toyota”.

#11. debug(fn) and undebug(fu)

Adds or removes a breakpoint on the first line of a function.

Note: I’m not going to cover about this API in this tutorial. Please read more about this in next section.

#12. monitor(functionName) and unmonitor(functionName)

Turns on/off logging for all calls to a function.

Normally, If we want to know whether a particular function is invoked or not, we used to put “alert()”or “console.log()” in that function. It’s too much work if we are working on large script files because we need to find that function in all script files and put “alert()” or “console.log” in that function. and save that file again and run on the browser. With firebug, you don’t need to do those things. You only need to know the function and you can trace how many time that function is invoked. You will get the notification in console when that function that you monitored is invoked. Plus, it will give you a link that is pointing the function in script.

Example 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>

How-to ~

  • type “monitor(func1) ” in one-line commandline (wait a few seconds until “>>> monitor(func)” is shown in commandline)
  • then, you can click any of those buttons to invoke the function that you like.
  • Since we are monitoring the function called “func1()”, we get the link ( check-out the picture below) as a notification whenever you click the button “Invoke func1()”. But you won’t get anything when you click other buttons. This is how the monitor API works in Firebug. You will get the notification when the functions that you are monitoring are invoked.
  • Type “unmonitor(func1)” to remove monitoring the func1();

Output ~

monitor.jpg

#13. monitorEvents(object[, types]) and unmonitorEvents(object[, types])

Turns on/off logging for all events dispatched to an object.

The optional argument “types” may specify a specific family of events to log. The most commonly used values for types are “mouse” and “key”.

The full list of available types includes “composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, and “xul”

Note: Unfortunately, this API doesn’t work propertly. I will contact with Firebug Team and will update about that later. Sorry.

#14. profile([title]) and profileEnd()

Turns on/off the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.

There are three ways to start Javascript Profiler in Firebug.

Javascript Profiler can be started ~

  1. by clicking “Profile” button in Console Toolbar.
  2. by using console.profile(‘My Profiler Title’) from Javascript Code
  3. by using profile(‘My Profiler Title’) from commandline

If you wanna know more about Javascript Profiler in Firebug, please read my previous tutorial (Firebug Tutorial – Logging, Profiling and CommandLine (Part II)).

Conclusion

This is all about console tab. Even thought it is just a tab, I have to divide my tutorials into three parts (part 1, part 2 and this one). Now, I have covered everything about console tab and its functionalities. I hope you will find it useful.

Don’t hesitate to contact me if you have any suggestion or comment.

Related ~

Firebug 1.1 (beta)

John J Barton from Firebug team announced that Firebug 1.1 (beta) has been released yesterday (12th September, 2007).

Download : http://fireclipse.xucia.com/#Downloads

What’s new in Firebug 1.1 (beta)
Release Date: 12th September, 2007

  • broswer-cache indicator
  • eval() debugging,
  • external editor interface,
  • browser-generated event handler debugging,
  • executable lines marked with green line numbers,
  • user-controlled naming of eval() buffers,
  • Stack side panel on “Script” panel for callstack,
  • Script->Break On Top Level, like break on next
  • Supports Firefox 3,
  • “better” debugging icons,
  • CSS errors report against source lines,
  • bug fixes (incl. issues 8, 69. 230, 239)
  • Internal firebug debug output

Release Note : http://fbug.googlecode.com/svn/branches/firebug1.1/docs/ReleaseNotes_1.1.txt

The Firebug tutorials that I’m currently writing is focus on Firebug 1.05. but now we got new version of Firebug. So, I’m gonna play around with this beta for a while. I’ll update my previous article with new version if that beta is stable and I will continue in writing that series.

Updated on 13th September, 2007~ I have played around with this new version lately.  I found it very unstable. So, I think it is better if we wait a lit bit for stable version. For the time being, I will continue writing this tutorial focusing on version 1.05.