From FirebugWiki
Revision as of 04:03, 25 May 2011 by Sebastianz (Talk | contribs) (Enhanced formatting; fixed spelling mistakes; linked to internal pages)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Live Editing[edit]

For the most part Firebug shows live objects directly out of the browser. Thus the editing in Firebug is live, you are not editing source.

Inline Editor[edit]

The HTML, CSS, and [[DOM Panel|DOM] panel as well as the Style and Watch side panel all support inline editors for live objects.

Panel Editors[edit]

The HTML and CSS panel support editing blocks of text in the panel, also called Edit Mode. NOTE the CSS panel has a bug: the panel editor overwrites any inline edits on the same stylesheet.


Special mention here for the Firebug extension Firediff, which tracks changes made inside Firebug.

Source Editing[edit]

Web Editors[edit]

The dyne Firebug extension supports web editors, that use the HTTP headers x-edit-server and x-edit-token. (dyne is not yet built into an extension, so you will need to get a copy from SVN.

Orion Web Editor[edit]

Orion Web Editor in Chromebug for local files[edit]

  • Install as above for regular Orion Web Editor
  • Type about:config into the address bar and hit Enter
    • Set extensions.chromebug.orion.fileURLPrefix to a project root's file URL. To get the URL you can do the following:
      1. From eclipse.ini copy the file path from -Dorg.eclipse.orion.server.core.allowedPathPrefixes=C:\path\to\firebug\root
      2. Paste it to the location bar and hit Enter
      3. Copy the result (file:///C:/path/to/firebug/root/) into the preference
    • Set extensions.chromebug.orion.projectURLPrefix to the edit URL path for the Orion project root matching the file URL. To get that URL you can do the following:
      1. Using the Orion navigator-table.html add a linked folder called fbug pointing to the same native file path above
      2. Now look at the server console and reload the top level page. Somewhere in the JSON data you should recoginize your project.
      3. Look for the id (e. g. 'B')
      4. Set the projectURLPrefix using the given information (e. g. http://localhost:8080/coding.html#/file/B/)

File Editors[edit]

The context menu on most web pages will include an Open With Editor option. The editor will be opened on a temporary file containing the contents of the current panel as source.

Firebug Icon Menu > Open With Editor allows file editors to be configured.