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:
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.
Like this:
Like Loading...
Stories
3 Replies to “Save Css files from Fire Bug – Firefle Extension”
This is very useful if your looking to debug your website and the associated style files.
You’re welcome!
Nice article btw.
Here is the Solution for Saving CSS Changes on Firebug:
http://howtosdo.blogspot.com/2011/08/how-to-save-css-changes-in-firebug.html