Firebug is a great add-on for Web developers. That’s an add-on which integrates with Firefox to give you a variety of enhanced development tools. With Firebug you can edit and debug HTML, Java and CSS live in website pages.
Add Firebug to Firefox from the add-on’s page on Mozilla website. Once you’ve added the extension to the browser, you’ll find a Firebug button on the toolbar. Press that button to open Firebug.
By default, Firebug opens at the bottom of the browser. However, you can always alter its position by clicking the Firebug Options button at the top left of the browser and selecting Firebug UI Location. Then select to place it at the top, left, or right of the browser. Select Detached to open Firebug in a new window.
Click the CSS tab to inspect style sheets. There you can select Source Edit or Live Edit options. Select Source Edit to edit the source of loaded style sheets. You can select style sheets by clicking the list of files on the left of the toolbar as below. That gives you an outline of all the page’s style sheets. To open the CSS in an external editor, press the Firebug Options button and select Open With Editor.
Edit the Document Object Model
In addition, you can find and edit DOM objects quickly. The Document Object Model is a hierarchy of objects you can explore by selecting the DOM tab. To edit the DOM objects, double-click the white space of a row to open a little editor where you can edit values of the object variables.
Edit and Delete Page Cookies
With Firebug you can also manage cookies. Click the Cookies tab to open a list of cookies for the page. There you can delete cookies by pressing the Cookies button and selecting Remove Cookies. Alternatively, right-click a specific cookie and select Delete. Press the Default (Accept cookies) button to adjust cookie permissions for the page.
So Firebug is an add-on that has plenty of options. It gives developers a multitude of development tools to edit and copy live page code with. You can find further details at the Firebug website.