One of the BEST Firefox Add-ons for Web Developer (Firebug)

Firebug after Web Developer's Toolbar is a second must have add-on for any web developer. The main purpose of this add-on is to modify web page on-the-fly. You can make small changes to css style or html tags and immediately see results. It's like working with Dreamweaver. The good thing is that you can see and modify not only your webpage but every page on the web. To install this add-on go to Mozilla addons page and press green install now button. When you install Firebug add-on it may not appear on Firefox toolbars panel. You have to manually place Firebug icon on the panel. (See Youtube video at the bottom of my other post how to do that). Suppose you succesfully installed this add-on, now open any webpage and click firebug icon. A new window appears. Here you will see 6 different tabs: Console, HTML, CSS, Script, DOM, Net

In HTML tab you can see the code, on the right are CSS styles and graphical layout. Change the code here and see results.

Similarly explore other tabs and play around with your modifications. By the way turn on Inspect button when in HTML tab. This feature highlights html code in firebug window according to your mouse over the page you're firebugging (exploring)

Firebug add-on and web developer's toolbar makes an unbeatable toolset for any beginner or experienced web developer.

Notice: You can't directly save modified pages with Firebug add-on. You only see how page will look like with changed parameters. Do the same modification with your usual tools (e.g. Dreamweaver) to really change page.