Firefox Programming Web Programming

Save Css files from Fire Bug – Firefle Extension

S Ranjith     

Firebug is a great extension to firefox for a webdeveloper. You can inspect online and edit and change the HTML of a page using firebug. Moreover You can edit the css of the Page and make any page as you like. The problem is After a refresh the page looks like old. You want to change the css every time in the original file.

It is great if you can save all the change in the firebug css to the original css file. Now this is the solution.

FireFile

What is Firefile ?

Firebug extension to save the CSS files edited with firebug live to your web server. That makes Firebug become the first remote-save live-preview CSS editor and allows ultra-fast webdesign.

You can install firefile from mozilla addons directory.

Firefile is developed by bimf.

Installation of Firefile

Just install the addon to firefox

Requirements

Please ensure you have the following installed on your server (Check your php.ini):

*Apache/2.0+ (Unix)

Should also work on Windows Server, but barely tested
*PHP Version 4.3+
*Write Access to all CSS files you want to edit
On Unix- Servers, this usually means you need to set the ‘file permissions’ to ‘666’ with your favourite ftp- client Additional information can be found in the [Advanced] section.

Additionally, you need the following on your Client Computer:

*Firefox (v3.0+)
* Firebug
(To install the .xpi file, you need to open it with firefox.)
INSTALLATION:

1 Upload the script firefile.php (download, zipped) to your web server (e.g. /web/firefile/firefile.php)
2 Open the file url in your firefox browser (e.g. http://www.your-site.com/firefile/firefile.php) 3 Fill in the highlighted fields “username” and “password” and click apply.
(be careful: anyone who knows your login data can change any stylesheets on your server.)

4 There should be a “FIREFILE KEY” visible now.

(If not, repeat step 2-3.)

5 Click on the firefile icon in the firefox status bar to add the site to your css editing enabled sites.

(If there is no such icon, you need to install firefile first. To do so, simply click the “INSTALL” button)
6 That’s it, firefile is installed and you’re ready to edit stylesheets online

What’s next for FireFile

In the next releases i will focus on functional bug fixing, and also on increasing usability, like key commands to show modified changes, maybe some settings for “automatic saves” to certain files. I’ll also work on the firefile docs a lot, as it’s maybe too complicated still. I’m especially thinking about adding screencasts, a setup- wizard in the webservice script, etc…

A Last Line

This helped me increasing my bugfixing time of css. Thanks bimf.

3 thoughts on “Save Css files from Fire Bug – Firefle Extension”

Leave a Reply