Editing

From FirebugWiki

Contents 1 Live Editing 1.1 Inline Editor 1.2 Panel Editors 1.3 Firediff 2 Source Editing 2.1 Web Editors 2.1.1 Orion Web Editor 2.1.2 Orion Web Editor in Chromebug for local files 2.2 File Editors

[edit] Live Editing

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.

[edit] Inline Editor

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

[edit] Panel Editors

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.

[edit] Firediff

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

[edit] Source Editing

[edit] Web Editors

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.

[edit] Orion Web Editor

• Install Orion M5 build or later,
• Use Firefox 4.0+
• Install Firebug 1.7.1
• Install the dyne extension (for now download via SVN using the above URL and then install following these steps)
• Open an Orion page using http://localhost:8080/file/your-path-here
• The Script Panel will have an Edit button to open the editor.

[edit] Orion Web Editor in Chromebug for local files

• 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/)

[edit] File Editors

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.