WebHelperMagazine.com

Subscribe to the Blog (via RSS)

Can you actually edit websites while browsing in FireFox? You bet. And, if you don’t want to make permanent changes — just look at, say, some alternate colors — you can do that too.

Here, we’ll take a look at two excellent ways to edit using the Web Developer Firefox extensions — for both HTML and CSS code revisions. These are our fourth and fifth Firefox “tricks”, which again are actually mini applications built into the extensions you installed.

HTML Editing with your Web Developer Tools

Most WebMasters I know, already have tried several HTML editors and selected a favorite. So why take a look at this HTML editor. FOUR reasons:

• The HTML editing window opens and instantly updates when you surf from site to site for easy code referencing while browsing
• You can use this editor in collaboration with other Web Developer extension tools, without opening another program
• You can try changes to any website and instantly see and consider the result without permanently changing the code… while you’re surfing. — how cool is that?
• You could use this free editor in a pinch when you’re away from your office.

Take a look:

Above, the HTML editor from your Web Developer tools is shown open.

1. Open the editor under the Miscellaneous Menu.
2. Widen your editing window for easier viewing by clicking and dragging the midpoint “handle” (a small dot) to the right.
3. Use the three icons at top to get your work done… left to right, they are Save, Clear, and Reset All.

Note that there is also a Green Arrow at the top right of the editing window that will apply your changes to the page you are viewing in the browser.

With this little editor, there’s no need to open a separate program — even NotePad — to work on your pages. And, unlike NotePad, you can edit and troubleshoot web pages instantly – even pages and sites on a remote server!

TIP: Imagine the power of this little HTML editor when you visit a prospective client in their office and can visually show them your ability to make desirable changes to their website without having access to their webserver (until they hire you).

CSS Editing with your Web Developer Tools

I really like this CSS Editor, not because there aren’t more fully featured editors out there, but because I can go to any website online, open the Editor and make a change to the CSS and immediately view the results. What a great way to learn the secrets of CSS. Let’s take a look at the editor:

Above, the CSS Editor is open, which you may access under the pop out menus under the Tools menu, or by simply clicking the “Edit CSS” icon outlined in red at far right on the toolbar. The large red arrow shows how the right column changed (almost instantly) to green after the appropriate code change (outlined in red).

There you go… two more tricks to teach your Fox. Don’t you love the power?