How to Use the Firefox HTML Editor

Contributor

By eHow Contributing Writer

Article Rating: (3 Ratings)

The HTML editor Firebug is an add-on, or extension, for the Firefox Internet browser. Firebug was written by one of the original creators of Firefox and provides a lot of editing features easily grouped so even HTML amateurs find it comfortable to use. In addition to HTML editing, Firebug lets you edit CSS and JavaScript as well as debug all three scripts.

Difficulty: Moderately Easy

Instructions

Install and Adjust Firebug

Step 1

Install Firebug. First, open the Firefox browser. Download Firebug (see Resources below). Follow the installation instructions. Restart Firefox to enable the Firebug extension. Click on the green check mark at the right of the status bar to open Firebug.
Step 2

Adjust Firebug settings. Right-click the firebug in the upper left corner of the Firebug console. Click on Options.
Step 3

Choose Always Open in New Window. This gives Firebug its own working window every time you open the editor. Right-click on the green check mark at the right of the status bar. Select Disable Firebug. Right-click on the icon again. It is now gray rather than green. Add the individual domain(s) for which you want to enable the Firebug HTML editor.

Edit HTML

Step 1

Click the HTML Editor tab. Create or edit a page's HTML element by right-clicking on it and choosing Edit HTML in the Content menu. An alternative is to click the Edit button on the HTML tab toolbar. The View Source panel changes to allow editing of existing HTML or the addition of new HTML.
Step 2

Finalize your edits or additions. Click the Edit button. The View Source panel goes back to normal, and your changes are applied. Notice that segments of the HTML code, called attributes, are color coded.
Step 3

Make changes to an existing attribute by clicking on it. The attribute appears in its own text box. Make your changes, and then click outside the text box to close the text box and set your changes.
Step 4

Add a new attribute within existing text. Right-click on the existing attribute and select New Attribute from the Firebug Content menu. A white square appears where you indicate you want to add the new attribute.
Step 5

Watch the changes you make appear immediately within the site as you type them in. Firebug's HTML editor is has a Live View function that immediately applies changes to the site you're working on.

Comments

gacacarainitis said

Flag This Comment

on 10/22/2009 Quick question. I assume the editor will only work on local files that have been downloaded to PC by browswer. Is there any way to configure this so the changes can be propogated to remote server (maybe via Webdisk etc..)? Wondering how other people are doing this - and if it is used mainly for debugging - or also for coding.