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.
Firebug Tutorial – Overview of Firebug
Don’t you think that if your friends and developers out there are not savvy enough to figure out Firebug then they’re probably not deserving of developing the next generation of the Web?
Link | September 22nd, 2007 at 3:57 pm
Yeah..
The most of people from Asia are not ready for those applications. OR. They are still happy with non-ajax-enabled web application. ….
The person who can create the next generation of web and the person who can create only traditional webapplication are the same over here.. :)
>>the next generation of Web.
I would use “Ajax-enabled web application” instead of “next generation of Web” because Ajax was the next generation of Web so far but if Silverlight from Micorosoft got popular then Ajax won’t be the next generation of web anymore. and Firebug won’t be able to help us for Sliverlight application.
Link | September 23rd, 2007 at 1:52 am
Michael Sync’s Firebug Tutorial @ Takealook wrote:
[...] Teil 1: Übersicht von Firebug [...]
Link | September 24th, 2007 at 9:54 am
==========
The most of people from Asia are not ready for those applications. OR. They are still happy with non-ajax-enabled web application. ….
=========================
it’s interesting to know, you used the word ‘asians’ here. Why don’t you publish one more blog explaining why you think so? I hope, you just didn’t say, to vent any frustations towards east side :)
Link | September 25th, 2007 at 4:39 pm
Michael Sync » Firebug Tutorial - Using Commandline API in Firebug wrote:
[...] Overview of Firebug [...]
Link | October 13th, 2007 at 9:09 am
Michael Sync » Firebug Tutorial : Section 4 - Net, CSS and DOM tabs wrote:
[...] Firebug Tutorial – Overview of Firebug [...]
Link | October 15th, 2007 at 11:14 am
@Tyler M.:
Why should not knowing how to use a certain tool mean that you shouldn’t be able to do something facilitated by that tool? Tools are there to make things easier, not to do what the programmer should be able to do themselves. Not all tools are easy to use or to figure out.
Link | October 23rd, 2007 at 8:00 am
PHP-Klasse für Firebug | Burning Star - Projekte wrote:
[...] von MichaelSyncs Firebug-Tutorials habe ich mich dazu entschlossen, eine kleine PHP-Klasse zu schreiben, die es ermöglicht Daten [...]
Link | October 29th, 2007 at 1:53 pm
>>Why don’t you publish one more blog explaining why you think so?
Not “think”. I know exactly. Because I’m staying there over 25 years.
Link | December 1st, 2007 at 12:01 am
Everything about Firebug - 21 Great Resources » Blog at veanndesign.com wrote:
[...] Overview of Firebug – a very good and detailed overview written by Michael Sync. [...]
Link | April 12th, 2008 at 1:10 pm
>The most of people from Asia are not ready for those applications. OR.
>They are still happy with non-ajax-enabled web application. ….
I Totally disagree
>>Not “think”. I know exactly. Because I’m staying there over 25 years.
Very sad thing..
Link | April 17th, 2008 at 1:35 am
>>I Totally disagree
:) okay. so, you can prove that..
>>Very sad thing..
It’s not so sad.. because I did a lot of Ajax projects. Now, I’m currently doing Silverlight which is the latest one.. Ajax is so 2007..
Link | April 17th, 2008 at 4:23 am
Fatih Hayrioğlu'nun not defteri » FireBug - Genel Bakış » Uzun, zamandır, kullandığım, FireBug, hakkında, yazmadığımı, Aslında, yaklaşık, önce, yazacaktım wrote:
[...] http://michaelsync.net/2007/09/08/firebug-tutorial-overview-of-firebug [...]
Link | August 13th, 2008 at 1:48 am
Firebug: Web Applications made easy! « Oranje says wrote:
[...] This is one of the good articles I found which helped me a lot to understand how to use Firebug. Firebug Tutorial – Overview of Firebug [...]
Link | August 22nd, 2008 at 12:38 am
Good introduction.
Link | February 17th, 2009 at 12:01 pm
Seems like a good tutorial, it would be even better if you had links to the other sections in this introduction. You mention and describe the 5 sections at the start of your article, but clicking here does nothing. If there are links elsewhere on the page I didn’t find them. The only way could navigate to the articles was by going to the site map and looking for firebug.
Otherwise, good job.
Link | May 4th, 2009 at 6:38 pm
30 HTML Best Practices for Beginners | Ouech.net wrote:
[...] Overview of Firebug [...]
Link | May 14th, 2009 at 3:11 pm
网页新手30条进阶秘技 | 互联网的那点事... wrote:
[...] Overview of Firebug [...]
Link | May 17th, 2009 at 6:45 am
Bones pràctiques en maquetació HTML | terra meddia wrote:
[...] Descripció general de Firebug (anglès) [...]
Link | May 26th, 2009 at 5:04 am
30+对网页新手的建议--爱晨博，分享互联网，joomla建站，actionscript，SEO wrote:
[...] Overview of Firebug [...]
Link | May 27th, 2009 at 12:31 pm
网页新手30条进阶秘技 - 左岸读书_blog wrote:
[...] Overview of Firebug [...]
Link | June 1st, 2009 at 4:00 pm
Thanks! Your article was really helpful to me.
Link | June 4th, 2009 at 11:20 am
30 HTML Best Practices for Beginners | rapid-DEV.net wrote:
[...] Overview of Firebug [...]
Link | June 14th, 2009 at 11:39 am
Is there a shortcut for clear console? Or is there a way to easily add it?
Thanks.
Link | June 16th, 2009 at 3:39 pm
/home/andiagusti/ » 30 HTML Best Practices for Beginners wrote:
[...] Overview of Firebug [...]
Link | July 11th, 2009 at 9:51 pm
Chenney’s Blog » Blog Archive » 网页新手30条进阶秘技（之二） wrote:
[...] Overview of Firebug [...]
Link | July 13th, 2009 at 7:26 am
30条HTML代码编写指南 for入门者 | 帕兰映像 wrote:
[...] Overview of Firebug [...]
Link | August 23rd, 2009 at 1:51 am
30条HTML代码编写指南 for入门者 | 互联网的那点事 wrote:
[...] Overview of Firebug [...]
Link | August 23rd, 2009 at 6:13 pm
30条HTML代码编写指南 For入门者 « 星星点灯 wrote:
[...] Overview of Firebug [...]
Link | August 26th, 2009 at 2:32 am
30 HTML Best Practices for Beginners | Beyond Venture Design wrote:
[...] Overview of Firebug [...]
Link | August 29th, 2009 at 2:16 am
don’t underestimate asian people:D were all just a human dude remember that always. were not perfect
Link | September 25th, 2009 at 10:40 pm
落叶LuoYe » 编写HTML代码技巧 wrote:
[...] Overview of Firebug [...]
Link | October 11th, 2009 at 1:17 am
小亮博客 » 编写HTML代码技巧 wrote:
[...] Overview of Firebug [...]
Link | October 24th, 2009 at 2:49 am
deboraparentes.com » 30 HTML Best Practices for Beginners wrote:
[...] Overview of Firebug [...]
Link | October 28th, 2009 at 12:53 pm
编写HTML代码技巧 « 落叶LuoYe wrote:
[...] Overview of Firebug [...]
Link | November 27th, 2009 at 9:55 pm
web粉蒸肉 » Blog Archive » 30条HTML代码编写指南 for入门者 wrote:
[...] Overview of Firebug [...]
Link | November 29th, 2009 at 6:31 pm
I can edit just fine with firebug, but when i use firebug lite for my other browsers I don’t know how to edit because it won’t let me type anything under html, etc. I’d be extremely greatful if somebody could help, thanks!
Link | February 2nd, 2010 at 1:29 pm
入门者三十条HTML代码编写指南 wrote:
[...] Overview of Firebug [...]
Link | February 25th, 2010 at 3:23 am
写给入门者的三十条HTML代码编写指南 | 我读吧 wrote:
[...] Overview of Firebug [...]
Link | February 26th, 2010 at 1:23 am
崔博的博客 » 写给入门者的三十条HTML代码编写指南 wrote:
[...] Overview of Firebug [...]
Link | March 2nd, 2010 at 7:54 pm
30条HTML代码编写指南 for入门者ZT « Tomi-Eric's Blog wrote:
[...] Overview of Firebug [...]
Link | April 1st, 2010 at 2:43 am
تمرینهای مناسب برای تازه کاران در HTML — وبلاگ داتیس دیزاین wrote:
[...] Overview of Firebug [...]
Link | April 3rd, 2010 at 3:47 am
给新手的HTML进阶秘籍 | LOO2K wrote:
[...] Overview of Firebug [...]
Link | May 2nd, 2010 at 1:10 am