Michael Sync » Firefox

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

Michael Sync — Mon, 15 Oct 2007 17:58:14 +0000

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

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.

Name of files : The first column at the left-side shows the name of each and every files that are included in your webpage.
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.
Size : The third column shows the size of each file.
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.

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.




Untitled Page

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

Michael Sync — Sun, 30 Sep 2007 12:12:15 +0000

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.

Overview of Script Tab
Debugging Javascript with Firebug
Javascript File Selector
Conditional breakpoint
Using Commandline API while debugging
debug(fn) and undebug(fu)

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.

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.
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.)
Line of Code & breakpoint : This is a place where you can set the breakpoint for debugging.
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.
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. )




Javascript Debugging with Firebug

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)
Take a look at “Breakpoint” window at the right panel. (One line is added in “Breakpoints” windows as shown in pic.)
Click “Click Me!” button on your page. (The Javascript execution will stop at the breakpoint that you set on line 7. )
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.

(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. )
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.

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.

#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.

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

Michael Sync — Sun, 23 Sep 2007 01:53:34 +0000

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

Michael Sync — Wed, 19 Sep 2007 17:10:00 +0000

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.

Options of “View Source” panel

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

Show Full Text : If the text within a element (i.e:
tag ) are too long then Firebug will truncate this text and will append “…” after the string.
Show White Space : It shows the white space between each HTML element. I don’t think that option is useful.
Show Comments : Check this option if you want to show the comment in “View Source” panel. otherwise, unchecked.
Highlight Changes : It shows in highlight color if you make some changes in HTML view.
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 .)
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

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. )

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

It is useful when we are figuring out why something in our page doesn’t look okay.
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

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

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.

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.

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.

Inspect HTML, “View Source” panel and “Style” panel [ This is very important so you must know about this ]
Edit the HTML element and CSS [ this is good to know. ]
“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. 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

Michael Sync — Sat, 15 Sep 2007 07:37:45 +0000

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.

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.

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

$(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)

Returns a single element with the given id.

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

Example ( 1.0 )~


Name :

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 ~

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 ~

#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 )~




Firebug



This is DIV1.


Here is one more.

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 )~




CommandLine - $



 


All about Firebug


Firebug is the most popular tool in web revolution.

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 ~

#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');
dir(obj);

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

#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)

#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 ~




Keys and Values




A
B
C

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”.

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();
values(o);
```
You will get the values of all properties of this JS class called “Car”.

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 ~




Monitor and Profiler

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 ~

#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 ~

by clicking “Profile” button in Console Toolbar.
by using console.profile(‘My Profiler Title’) from Javascript Code
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 Tutorial – Logging, Profiling and CommandLine (Part II)

Michael Sync — Mon, 10 Sep 2007 19:18:03 +0000

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




Firebug



Open the console tab. Click the button below and wait a lit..

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
1. Show Javascript Error
2. Show Javascript Warnings
3. Show CSS Errors
4. Show XML Errors
XmlHttpRequest Tracing
1. Show XMLHttpRequests
CommandLine
1. 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





Firebug

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.

Firebug Tutorial – Logging, Profiling and CommandLine (Part I)

Michael Sync — Sun, 09 Sep 2007 13:27:50 +0000

Firebug Tutorial

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 tag.

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 tag.

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 ~

#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.



A
B
C

#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 :

#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.




Firebug

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 :




Firebug

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 ~

Console API

Firebug Tutorial – Overview of Firebug

Michael Sync — Sat, 08 Sep 2007 15:26:54 +0000

A few words from me

It has been over 1 year that I’m using Firebug in web development. I found it very useful. I’m really thank to SangSing who introduces me about Firebug. I used to encourage a lot of my techie friends to use Firebug but they said that they don’t know how to use it. They told me that they wanna get something that include all features of firebug and examples. I googled a lit bit but I didn’t find nice resources that covers everything about firebug. So, I decided to write this tutorial. I will try to cover all features of firebug as much as I can. I will show each features with sample sourcecode and screenshot if it required. Don’t hesitate to contact me if you have any suggestion or comment.

There are 5 sections in this tutorial.

Section 1: Overview of Firebug : An introduction of Firebug and feature lists, how to install it and a few notes

Section 2: Logging, Tracing and CommandLine : Everything related to Console tab. An introduction of CommandLine windows which is the same as Immediate windows or Watch window from Visual Studio.

Section 3: HTML DOM Inspector and HTML CRUD operation : This section will tell you about what HTML inspecting is, how to inspect the HTML element, why it is useful and etc. I will also show you how to create/update/delete the HTML DOM dynamically in HTML tab.

Section 4: Javascript debugging with Firebug : This section will cover everything about javascript debugging which is the most famous feature of Firebug. It will also show you how to use Console tab while debugging the Javascript.

Section 5: CSS, DOM and Net Tab : (I haven’t decided whether I should write about them in one section or not. )

As I said above, I will try to cover as much as possible. If I miss out something in this tutorial, please let me know. I appreciated it.

Getting Started : Overview of Firebug

Note: I will cover some basic understanding about firebug and its features, installation and a few screenshots in this section. So, if you already have some ideas about Firebug, you may probably skip this section.

What is Firebug?

Firebug is one of the most popular Mozilla Firefox’s extensions (a.k.a addon). It is also a tool that make the web developers’ life easier. It includes a lot of cool features such as debugging, HTML inspecting, profiling and etc which are very useful for web development.

Features

Javascript debugging
Javascript CommandLine
Monitor the Javascrit Performance and XmlHttpRequest
Logging
Tracing
Inspect HTML and Edit HTML
Edit CSS

Where to get Firebug Addon?

Go to the official firebug website http://getfirebug.com .
There is the image as below at the right-side of the firebug website. Click this image to install.

The following dialog will be shown after clicking the image above. Click to “Install Now” button.

After the installation is completed, you need to restart the browser.

Screenshots

Main Menu (under “Tools” Menu)

“Firebug” and “Error Console” menu will be shown under “Tools” menu of Firefox.

Firebug : It is just a placeholder for Firebug’s submenus.
Error Console : If you click this menu, one console window will be launched with the list of errors, warnings and message. Actually, this error console is the same as the console tab from Firebug console.

Firebug Menu

If you click “Firebug” menu under “Tools”, the following submenus will be shown.

Open Firebug : Open the firebug console within the browser. If you don’t wanna click this menu, you can simply press “F12″ to open the firebug console.
Open Firebug in New Window : Open the firebug console in separated window.
Disable Firebug : It is for disabling firebug. This option is very important. You should disable the firebug if you don’t need it because If you don’t disable the firebug, it might be a lit bit slow to surf the Ajax-enabled websites like GMail.
Disable Firebug for **** : You can disable the specific website instead of disabling the whole firebug.
Allowed Sites : You can add the list of website that you want to surf with Firebug enabled option.
Inspect the Element : This menu is for inspecting the HTML element. Please read more about this in section 3.
Profile Javascript : This option is available in Firebug enabled mode only. It is used for monitoring the execution of javascript code. This option is really useful when you have performance issue with your code. Please read more about this in Section 4.
Clear Console : Clear the console tab of Firebug console.
CommandLine : Open the console tab
Search : Set the focus to the Search textbox of current tab.

Content Menu

There is only one menu called “Inspect Element” in content menu. This menu is very useful. Please read more about this in Section 3.

Firebug Console

The picture below is Firebug console.

It contains six tabs such as Console tab, HTML tab, CSS tab, Script tab, DOM tab and Net tab.

Console tab : It is for logging, profiling, tracing and commandline.
HTML tab : It is for inspecting HTML element, editing HTML and changing the stylesheet at runtime. CSS, Layout and DOM console are already included as the subtabs.
CSS tab : You can check how many css file included in the webpage easily. You can simply select the CSS file that you like and you can made the changes to that file on the fly. (I don’t use that tab that much since the same one is already included in HTML tab. )
Script tab : It is for debugging Javascript code. Watch and Breakpoints consoles are the subtab of Script tab.
DOM tab : It is for exploring DOM. (I don’t use that tab that much. Instead, I used to use DOM tab from HTML console and Script tab.)
Net tab : It is for monitoring network activities. It helps you to know why your page (or a particular webpage) is taking so long to load in the browser.

Status Bar

You will see the green cycle if there is no error on your page.

You will see the red cycle and the count of errors if there is some errors in your page.

Keyboard and Mouse Shortcuts

F12. I used to use only F12 to open/close the Firebug console.

If you wanna read the completed list of shortcuts, you can check-out here.

Problem?

Please check-out this FAQ page.

If you still have problems, you drop a comment in my blog. I will reply as soon as possible. Or you can probably contact with Firebug User Group.

Conclusion

That’s all. :) I think you now have some ideas about what firebug is, how it looks like and how to install. If you are already familiar with firebug, this section will be too plain for you since I didn’t put anything new in this section. I will tell you more details about each tab in next section. So, come back tomorrow!!

Feel free to let me know if you have any idea or comment about this tutorials. Your comment will make this tutorials better. I appreciate it.

8 Steps to create your owned Firefox Extension

Michael Sync — Wed, 06 Dec 2006 14:02:18 +0000

This article illustrates how to create a Firefox extension in very simple way. It’s just 8 steps to fellow then you will get some ideas how to create your owned one.I think, it might be useful for those who wanna create their Firefox Extensions.

This article is based on this article from developer.mozilla.org. So, All credits go to the original article “Building an Extension“.

Maybe. you might ask me why I wrote duplicated one.
Well. There are two reasons behind. First thing is that I’m looking a lit bit more details into Firebug Extension so that I have to know how to create an extension for firefox. (At least, simply) and also, I have to take a note all steps so that I don’t need to look the whole article again. Second reason is that the original article was written for all platforms so that it might be a lit bit complicated than this one I wrote. :) All steps in this article are tested in Windows XP sp2 and Firefox 2.0.

Let’s start!

Step #1

Create a folder for your extension somewhere on your hard disk
e.g. C:\extensions\myExtension\

Step #2

Create another folder called chrome under your extension folder
e.g. C:\extensions\myExtension\chrome

Step #3

Create another folder called content under chrome folder
e.g. C:\extensions\myExtension\chrome\content

Step #4

Create two new empty text files, one called chrome.manifest and the other called install.rdf.
e.g. C:\extensions\myExtension\chrome.manifest
e.g. C:\extensions\myExtension\install.rdf

Note: I would suggest to unhide all extensions of all file in your harddisk. If you are not sure how to do it, you can check as follow.

Open “C:\” drive.
Go to Tools->Folder Options.
Go to View Tab.
Uncheck “Hide extensions for known file types“

Step #5

Open the file called install.rdf (e.g. C:\extensions\myExtension\install.rdf). Copy the following code and paste it to install.rdf file.

xmlversion="1.0"?>

<RDFxmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
  <em:id>sample@foo.netem:id>
  <em:version>1.0em:version>
  <em:type>2em:type>

   
  <em:targetApplication>
   <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}em:id>
    <em:minVersion>1.5em:minVersion>
    <em:maxVersion>2.0.0.*</em:maxVersion>
   Description>
  em:targetApplication>


<em:name>Sample!em:name>
<em:description>A test extensionem:description>
<em:creator>Your Name Hereem:creator>
<em:homepageURL>http://www.foo.com/em:homepageURL>
Description>
RDF>

Properties and Description

sample@foo.net – the ID of the extension. This is some value you come up with to identify your extension in email address format (note that it should not be your email). Make it unique. You could also use a GUID.
Specify
2 — the 2 declares that it is installing an extension. If you were to install a theme it would be 4 (see Install Manifests#type for other type codes).
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} – Firefox’s application ID.
1.5 – the minimum version of Firefox you’re saying this extension will work with. Set this as the minimum version you’re going to commit to testing and fixing bugs with.
2.0.0.* – the maximum version of Firefox you’re saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, “2.0.0.*” indicates that the extension works with versions of Firefox 2.0.0.0 through 2.0.0.x.

Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to “1.5.0.*”.
See Install Manifests for a complete listing of the required and optional properties.
Save the file.

Step #6

Create a text file called sample.xul under chrome/content. (e.g: C:\extensions\myExtension\content\sample.xul ). Copy this sample code above and paste it into sample.xul. Then, Save it.

xml version="1.0"?>
<overlay id="sample"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel"
  label="Hello,World"/>
statusbar>
overlay>

Step #7

Open the file called chrome.manifest (e.g: C:\extensions\myExtension\chrome.manifest) And Add in this code below:

content     sample    chrome/content/
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Step #8 – Test

Open your Firefox Profile Folder
Note: Do you know where your Firefox Profile Folder is?
If you dont know, Type “%userprofile%” in Run. Or go and find the folder same as login name under Documents and Settings Folder. then uncheck “Show Hidden files and Folder” of Folder Option. (I already told you where Folder Option is. :)) After that, go to Application Data\Mozilla\Firefox\Profiles Folder .
Yes. This is your Firefox Profile Folder. You will see the folder called “extension”(Sometime, there are some sub folders. eg: kmdxbpyy.default or ujwao9qo.default. Check into them.) I found it under “%userprofile%\Application Data\Mozilla\Firefox\Profiles\kmdxbpyy.default\“..
More:Profile folder – MozillaZine
Create a folder and give the id of your extension as its name. eg: sample@foo.net
Close Firefox Browser if it’s opened.
Launch Firefox Browser again. You will see “Hello, World” in the Status Bar of Firefox browser.

Note: The way of testing is not same as the original article. You may also find the original way in here.

Updated!

Result ~

Download ~ http://michaelsync.net/demo/sample@foo.net.zip

That’s all. It’s easy. isn’t it? :)

More Info: Mozilla Firefox > Extensions

MSFirefox or IE7?

Michael Sync — Wed, 22 Nov 2006 10:23:43 +0000

Did u know that?

I came to know a web site called MSFirefox today.

I’m wondering if Microsoft really made that product and this website because there are a lot of things which are very very strange to me.

1. Smiling Bill Gates Photo at the left banner.

2. The one they are giving as download is IE7-WindowsXP-x86-enu.exe

This is the installer for Internet Explorer 7.

3. It’s not FREE

30$?

4. The definition of RSS in Full Features Page or this page.

RSS means … Arh! .. Better go and check it out.

If you wanna read more, you may chk their support page.

5. Strange Photo in 4th Feature “Fast Fun” which is mentioned in Home Page.

That girl from this photo looks very like one of the porn stars from Japan. (but not sure.)

Yeah. Maybe there are some more but let me stop here.

I just assume that this website might be created by someone who hate Microsoft. Let me know if you guys have any idea about this site.

Opps! Almost forget.. Here is a movie from their site..