Firebug Plugin For Firefox – All you wanted to know about Firebug

Article Tags: Firebug Plugin, Firebug plugin for firefox, Firebug Firefox, Firebug plugin uses, what is firebug, what is firebug plugin, what is firebug plugin used for, uses of firebug, firebug download, firebug details, firebug features, All about firebug plugin

Firebug is a very veteran and polished, one of the best Firefox plug in that i have always used as a  web developer.It helps simplify the chores of a developer. Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug is mostly used for:

Editing JavaScript form browser

Editing website codes in html, php etc

Editing word-press themes etc.

Testing website load time

Analyzing network connection to website

Finding and Fixing error messages

Editing and previewing CSS

What exactly Firebug Does?

Firebug shows the actual web code that is behind when a web page or dynamic page is loaded and what is even better is sit lets you edit realtime and preview it also!

How to get it installed and running?

Download the Firefox Firebug plugin from : http://www.getfirebug.com and get it installed just like any other firefox plugin. Once installed, restart the browser and it would show such a icon on the toolbar of mozilla. To launch Firebug plugin, just click on the icon  or tap F12, further the web browser splits into two different frame and the upper fame has the website preview and the lower one has the firebug frame showing the website code. The part you would love it is that it splits and shows HTML and CSS seperately and this makes themeing for bloggers a cakewalk. You can edit the code and the preview also changes and further once you are convinced save the code and update in in the source code.

How you can optimize the loading speed of website with Firebug?

Firebug toolbar has a button called “Net monitors” and this helps you to see the various website elemets and their loading speeds, hence helps you to analyse how to increase the speed of the website, another plugin that can be used in tandem with Firebug to optimize the speed is: http://developer.yahoo.com/yslow/ (Yslow)

How to enable and disable Panels in Firebug?

To work on Javascript code or to study the network action on a site, you need to enable one or more Firebug panels. If you select the Console, Script, or Net panels, you will see the tab is grey and the panel says “disabled”. Each panel tab has a small menu control for enabling the panel. All the panels can be enabled or disabled using the context menu (right click) on the Firebug status bar icon.

Firebug for Javascript Developers

For Javascript you’ll want the Console and Script panels enabled. You may was well run with these panels fully enabled.

Detailed Load time monitoring with firebug:

Each file in the Net tab has a bar which shows you when the file started and stopped loading relative to all the other files. The bars will each you things you didn’t even know. For instance, did you know that JavaScript files load one at time, never in parallel. This will help you tune the order of files in page so that the user spends less time waiting for things to show up. See the image below

How to fix code errors with firebug?

On the right side of the Firefox browser’s status bar you will see a little green icon. This is Firebug’s way of telling you that everything is A-Ok. When that icon turns into a red “x”, things aren’t so peachy.Click the “x” to open the Firebug error console which will show you all of the errors that have occurred on the page. See image below

To summarize, Firebug is a Must have plugin for firefox if you are a web designer, blogger or developer. install it and have multiple reasons to feel happy. Its free !!

Hope this article help, let me know yor thoughts!!

[ratings]

Related Articles You Are Probably Interested In:

1. Best Mozilla Firefox Addons for web developers
2. SEOQuake – Mozilla firefox extension / plugin – Features and Review
3. 6 Best free Auto form filling Firefox addons
4. .htaccess – All you wanted to know and much more!
5. If WordPress is your religion – This is your Plugin BIBLE !
6. All in one SEO wordpress plugin setup guide
7. Fiverr Review – All you wanted to know & how to make money
8. Keyword Winner Plugin at 7 USD

2 Responses to “Firebug Plugin For Firefox – All you wanted to know about Firebug”

1. Tammy says:

   August 22, 2010 at 6:14 pm

   Hi,

   Great article about firebug, The only thing is that this link has been removed

   http://developer.yahoo.com/yslow/ (Yslow)

   Reply
2. Ronda Keyt says:

   December 20, 2011 at 7:45 pm

   What’s Happening i am new to this, I stumbled upon this I have found It positively helpful and it has helped me out loads. I hope to contribute & assist other users like its helped me. Good job.

   Reply