How to save changes in Firebug?

Relax and enjoy The Lounge. For all Non-Joomla! topics or ones that don't fit anywhere else. Normal forum rules apply.
User avatar
Chacapamac
Joomla! Ace
Joomla! Ace
Posts: 1087
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

How to save changes in Firebug?

Post by Chacapamac » Tue Mar 04, 2008 7:21 pm

When editing in Firebug what is the easiest way to save or implement the changes made??
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

arthurhanlon
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 206
Joined: Wed Feb 22, 2006 12:20 pm

Re: How to save changes in Firebug?

Post by arthurhanlon » Tue Mar 04, 2008 8:50 pm

Not really Joomla specific but I'll answer anyway ;)

As far as I am aware, Firebug is an "on the fly" editor/analyser with no means to "apply" the changes you make. I use firebug for basic debugging and to investigate how certain CSS tricks are achieved on other sites. I always apply my changes to the main file and upload after I have found satisfactory ways of doing things.

Hope this helps,
Arthur

Geoff
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3173
Joined: Sun Apr 16, 2006 12:20 am
Location: 127.0.0.1

Re: How to save changes in Firebug?

Post by Geoff » Wed Mar 05, 2008 12:06 am

Moving to The Lounge from J! 1.5 General Questions.
Backup, backup, backup!
The "Master" .htacess file by Nicholas http://snipt.net/nikosdion/the-master-htaccess

jbwebsites
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Aug 08, 2007 1:53 am

Re: How to save changes in Firebug?

Post by jbwebsites » Wed Mar 05, 2008 2:07 am

When I edit in firebug I find changes I'd like to make in the html. However I have no idea what file to edit! How do I know what file firebug is messing with? It tells you for the css, but doesn't for the html!

Thanks ahead of time!

User avatar
Rogue4ngel
Joomla! Guru
Joomla! Guru
Posts: 658
Joined: Sun Nov 26, 2006 10:46 pm
Location: New York
Contact:

Re: How to save changes in Firebug?

Post by Rogue4ngel » Wed Mar 05, 2008 4:48 am

Here's a short video tutoral about the tool itself and using some basic features:
http://www.litfuel.net/plush/?postid=161

If you google it, I am sure you would find a great deal more.
If you're not a part of the solution, you're a part of the problem.

User avatar
Chacapamac
Joomla! Ace
Joomla! Ace
Posts: 1087
Joined: Wed Feb 20, 2008 6:50 am
Location: Canada, Montreal
Contact:

Re: How to save changes in Firebug?

Post by Chacapamac » Wed Mar 05, 2008 2:59 pm

to jbwebsites:
As far as I know the Inspect HTML check the inner of the index.php file
To keep the edit you made you can riht click on the close html doctype an copy the html to your real index.php.

For the css, you can see in the right pane (Style, Layout, DOM) what css files are applied to what you select in the html index php, here you can click on the css file link and copy/paste the css code in your original file.

ex: click on the body tag in the html and you will find all css files in the right pane related to the body tag

But I’m sure it’s probably a more elegant way to do it????
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/

Beastern
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Jan 01, 2009 2:51 am

Re: How to save changes in Firebug?

Post by Beastern » Thu Jan 01, 2009 2:52 am

I'm having the same problem. I don't know which file to edit. Can someone please help?

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: How to save changes in Firebug?

Post by unleash.it » Thu Jan 01, 2009 8:41 pm

This is something I've spent some time trying to figuring out myself and none of the articles on firebug I've found mention much. The Web Developer Toolbar is the defacto way to edit CSS it seems. But with it, your background images dissapear as soon as you click "edit css"... so it's not my favorite.

Here is a way to copy your css edits made with the inspector that works. The down side is you'll loose all of your comments and formats like manual indents.

First make all of your css edits like normal with the inspect button. Then click the CSS tab (second row). Now choose the css file(s) you edited (probably template.css but you'll have to do some research if you don't understand) from the top row, to the right of the edit button.

Do not click the "EDIT" button. You then copy the css you see there and paste it into your template's css. Hint: if you choose select all (ctrl/cmd A), you will also copy firebug's debug code and all HTML for some strange reason. But if you manually highlight the whole whole thing (no ctrl-A), you'll get what you need.

Choosing the "EDIT" button for css is a whole other way to work. But choose it, and you'll loose all the changes you made using the inspect button. For some reason, it work work together with that (as far as I can tell). But you CAN make on the fly edits, with background images...unlike the web dev toolbar... and then neatly copy it at the end, comments and all!

If anybody knows a way to make it play nicer, I'd love to hear your incites.

Joomleron
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Jul 23, 2009 1:56 am

Re: How to save changes in Firebug?

Post by Joomleron » Thu Jul 23, 2009 2:00 am

You cannot save changes with Firebug you should greasemonkey to do so

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: How to save changes in Firebug?

Post by unleash.it » Thu Jul 23, 2009 8:57 am

You can't save them, but you can copy and paste. I do it all the time and it works well...although an extra step of course.

But I'd be curious to know how greasemonkey can help. Would you mind explaining that a bit?

verdecove
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Thu Aug 27, 2009 5:45 pm
Location: Texas
Contact:

Re: How to save changes in Firebug?

Post by verdecove » Thu Aug 27, 2009 6:23 pm

unleash.it wrote:This is something I've spent some time trying to figuring out myself and none of the articles on firebug I've found mention much. The Web Developer Toolbar is the defacto way to edit CSS it seems. But with it, your background images dissapear as soon as you click "edit css"... so it's not my favorite.

Here is a way to copy your css edits made with the inspector that works. The down side is you'll loose all of your comments and formats like manual indents.

First make all of your css edits like normal with the inspect button. Then click the CSS tab (second row). Now choose the css file(s) you edited (probably template.css but you'll have to do some research if you don't understand) from the top row, to the right of the edit button.

Do not click the "EDIT" button. You then copy the css you see there and paste it into your template's css. Hint: if you choose select all (ctrl/cmd A), you will also copy firebug's debug code and all HTML for some strange reason. But if you manually highlight the whole whole thing (no ctrl-A), you'll get what you need.

Choosing the "EDIT" button for css is a whole other way to work. But choose it, and you'll loose all the changes you made using the inspect button. For some reason, it work work together with that (as far as I can tell). But you CAN make on the fly edits, with background images...unlike the web dev toolbar... and then neatly copy it at the end, comments and all!

If anybody knows a way to make it play nicer, I'd love to hear your incites.

I wish I had read that before it happened to me that my background pictures disappeared after making changes in the css file with Webdeveloper and Firebug. It happened to me last night after downloading those plug ins and I hoped them to make things a bit easier on me since I am fairly new to all of this. I was trying to modify a few things in my Virtuemart pages.
Anyway, have cried enough about it ;) and now I would like to know how I will get my addtocart and notifyme + a few other buttons back. Will I just have to rewrite it in the theme css file?
I was so pissed last night that I even wouldn't look at the css file anymore, what maybe got deleted or changed.
Any help or advice will be greatly appreciated.
Thank You
verdecove

bimf
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Sep 30, 2007 2:33 pm

Re: How to save changes in Firebug?

Post by bimf » Wed Dec 02, 2009 10:40 pm

@unleash.it:
i recently released a firebug addon at the mozilla addon sandbox which can do what you are looking for:
https://addons.mozilla.org/de/firefox/addon/52365/

It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).

Documentation can be found here:
http://www.strebitzer.at/projects/firefile/docs/

I would appreciate any bug reports, comments, ratings, discussion on this,

thanks in advance,
Tobias

the apprentice
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Nov 18, 2009 3:53 pm

Re: How to save changes in Firebug?

Post by the apprentice » Fri Jan 15, 2010 7:43 am

jbwebsites wrote:When I edit in firebug I find changes I'd like to make in the html. However I have no idea what file to edit! How do I know what file firebug is messing with? It tells you for the css, but doesn't for the html!

Thanks ahead of time!
I found out the file I need to modify but it's like a subdirectory of the index.php (...index.php/AdvSearch.html), I really need to modify that file but it's like is non existent, what do people mean by "buried deep", I'm confused, can I find that AdvSearch.html or not? THANKS!

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: How to save changes in Firebug?

Post by unleash.it » Fri Jan 15, 2010 11:04 pm

Tobias, awesome! I've just installed it and will check it out when I have time. Can it work on a local host?

Two suggestions. I noticed for a remote server a php script has to be uploaded. How about creating an FTP method instead? That would probably make it be an easier and quicker to get connected...especially when working with multiple sites. Also from the looks of it (again, I haven't tried it yet so maybe I'm wrong), all edits are immediately live? While sometimes that could be fine (no problem when working locally), if working on a live site I mostly end up doing a lot of experimentation before I want to commit my changes. So if there were a way to preview all changes locally first, then click a button to apply... or even better have the option to do either... that would be perfect.

Great time saver for those of who are lazy (or want to preserve our wrists from carpal tunnel...).

the apprentice and jbwebsites, why would you need to find the html? The html you get in your browser has been parsed (the php parts have been processed). It's not anything you'd want to put back into your site. This is all about css unless maybe you're talking about the markup from the articles themselves.

the apprentice
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Nov 18, 2009 3:53 pm

Re: How to save changes in Firebug?

Post by the apprentice » Sat Jan 16, 2010 9:22 am

Hi unleash.it,

I said I need to find the html because pointing my mouse to some strings I want to delete (namely:
<td width="20%" valign="top" align="left" style="outline-color: rgb(255, 0, 0); outline-style: solid; outline-width: 1px;">Weekend:</td>)

it says that these files are located in ...index.php/AdvSearch.html, but that's not true, is it? I want to find where those d^mn lines are so that I can delete them. That's why I'm looking for the html.

Tobias extension's instructions are a bit too technical for me, and I'm not sure it would work on a local machine either...

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: How to save changes in Firebug?

Post by unleash.it » Mon Jan 18, 2010 8:20 pm

Well I don't know where the temporary file is, but I'd assume somewhere in your user folder. I still don't know why you'd want to go there though. Like I said, you wouldn't want to take anything from that and put it in your Joomla site. Actually deleting that line depends on where its coming from: article vs. component vs. your template. You should go to the proper place on your Joomla site and deal with it (maybe in the file system, maybe in the back end depending).

XavierSPL
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Tue Nov 24, 2009 1:14 am
Contact:

Re: How to save changes in Firebug?

Post by XavierSPL » Tue Jan 19, 2010 2:20 am

I've been trying to figure this out too, finding and editing CSS is so easy.. If I come up with something I'll post it tonight..

XavierSPL
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Tue Nov 24, 2009 1:14 am
Contact:

Re: How to save changes in Firebug?

Post by XavierSPL » Tue Jan 19, 2010 2:48 am

So what I found out (so far) is that Firebug cannot know the name of the source file.. The Net tab will show the input command to be parsed by the browser, while the html tab shows the parsed html output.. Only the server actually knows the name of the file that has the input code.. You could copy that code from the net tab, take an educated guess at which file it would be (ie; template.php, index.php, etc..) and do a search for the code found on the net tab - which would lead you to the html code..

the apprentice
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Nov 18, 2009 3:53 pm

Re: How to save changes in Firebug?

Post by the apprentice » Tue Jan 19, 2010 7:31 am

XavierSPL wrote:...take an educated guess at which file it would be
Easier said than done, I actually followed this procedure on quite a few files but some are more difficult to find than others and I'm stuck on two lines I want to modify but just can't. I'm working locally, so I'm the bl00dy server, can't that help? :)

mrtnkl
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Sep 03, 2010 8:55 am

Re: How to save changes in Firebug?

Post by mrtnkl » Fri Sep 03, 2010 8:59 am

Use Backfire. It's an open source solution that sends CSS changes back to the server and saves them.

http://blog.quplo.com/2010/08/backfire- ... n-firebug/

If someone takes the server example implementation included in the package (example is .NET) and ports it to Joomla, it can be a Joomla plugin that works out-of-the-box. Launching Backfire is then a matter of including the javascript, by hand, by setting, by bookmarklet or perhaps someone turns it into a firebug plugin (which is easy since the Backfire client is mere javascript).

Hope this helps!

- Martin (@mrtnkl on twitter, feel free to PM me a question)

gothenburg
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Sep 18, 2010 7:54 am

Re: How to save changes in Firebug?

Post by gothenburg » Sat Sep 18, 2010 12:49 pm

You arent able to save any changes you make in firebug. however what you could do is to copy the code you have edited in firebug then replace it with the current code that you wanted changed.

Hope that helped.
Signature rules: Literal URLs only - http://forum.joomla.org/viewtopic.php?f=8&t=65

jskene
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Oct 07, 2010 6:05 pm

Re: How to save changes in Firebug?

Post by jskene » Thu Oct 07, 2010 6:09 pm

I am able to save HTML edits by right clicking on the upper HTML section of the screen, then choosing the destination directory. I am using FIrefox on a Mac mini.

I find Firebug to be an extremely useful tool for making small edits/updates to web pages.

User avatar
MEAT1
Joomla! Explorer
Joomla! Explorer
Posts: 306
Joined: Mon Mar 01, 2010 7:29 am

Re: How to save changes in Firebug?

Post by MEAT1 » Sun Oct 10, 2010 8:20 am

I don't think this is possible. You can not save changes in firebug.
You can copy your code yes and past it in your html doc but saving changes in Firebug itself can not be done.
Last edited by MEAT1 on Sun Oct 10, 2010 2:54 pm, edited 1 time in total.

jskene
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Oct 07, 2010 6:05 pm

Re: How to save changes in Firebug?

Post by jskene » Sun Oct 10, 2010 1:37 pm

I do this all the time.

I make changes to the original page using Firebug, then close firebug, then right click on the changed page, and save it back to the original directory, copying over the original file.

It's quick, easy, and very convenient.

User avatar
richardphilips
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Thu Sep 09, 2010 6:20 pm
Location: LOS ANGELES, CA 90015 UNITED STATES
Contact:

Re: How to save changes in Firebug?

Post by richardphilips » Mon Nov 01, 2010 2:20 pm

Hi All,
Firebug is html DOM inspector tool.
Also in joomla there html and css code is coming from different php files.
There is no easy way out here. You need to know joomla and must pay attention to which css files we are making changes.
As css follow the hierarchical rules many times we are making change in several css files at a time using firebug, just keep note in your mind what file you are making changes and make the same changes in the actual css files.

Below is the process i normally follow and it works wonder:
1. Inspect the code using firebug.
2. Make the css changes using firebug.
3. Open the respective css file in Notepad++
4. Make change in the respective which is open in Notepad++
5. Save the file
6. Do Ctrl+F5 on the browser/FF and you will see your changes.

Doing Ctrl+F5 is important to clear the browser cache, else there is changes that you will not see your changes.

Hope that was helpful. If any one have any other more efficient method please share.
As this will help many joomla designer and programmer.
Joomla Rocks :)
Thanks and Regards, Richard Philips
http://www.htmltojoomla.com
HTML to Joomla Conversion | Convert Static HTML website to Joomla Website

art knotly
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Oct 12, 2010 8:21 pm
Location: DC
Contact:

Re: How to save changes in Firebug?

Post by art knotly » Wed Nov 24, 2010 6:13 am

arthurhanlon wrote:Not really Joomla specific but I'll answer anyway ;)

As far as I am aware, Firebug is an "on the fly" editor/analyser with no means to "apply" the changes you make. I use firebug for basic debugging and to investigate how certain CSS tricks are achieved on other sites. I always apply my changes to the main file and upload after I have found satisfactory ways of doing things.

Hope this helps,
Arthur

ditto that.
A save function would be great though!
To err is human, to forgive divine. Punch a baby!
http://basementdetective.com
http://moldremediation101.com

User avatar
richardphilips
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Thu Sep 09, 2010 6:20 pm
Location: LOS ANGELES, CA 90015 UNITED STATES
Contact:

Re: How to save changes in Firebug?

Post by richardphilips » Wed Nov 24, 2010 7:12 am

Hi All,
Is there any other Addon Similar to FireBug,
I am happy with firebug but still would like to check what other Joomla developers are using.

Addons I use when developing joomla website are :
1. Firebug :)
2. MearureIt: for measuring height width of any thing
3. Color Zilla Color Picker
4. JSView: for checking which Javascript and CSS files are getting used in the particular website/project

Please share your addons!!
Joomla Rocks :)
Thanks and Regards, Richard Philips
http://www.htmltojoomla.com
HTML to Joomla Conversion | Convert Static HTML website to Joomla Website

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30814
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: How to save changes in Firebug?

Post by Per Yngve Berg » Wed Nov 24, 2010 7:36 am

richardphilips wrote:Addons I use when developing joomla website are :
1. Firebug :)
2. MearureIt: for measuring height width of any thing
3. Color Zilla Color Picker
4. JSView: for checking which Javascript and CSS files are getting used in the particular website/project

I use the Opera browser with Dragonfly for all the above. Dragonfly is standard in Opera and you do not have to install any add ons. Just right click on the page and select "Inspect Element"

Jhonte
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Jan 02, 2011 1:05 pm

Re: How to save changes in Firebug?

Post by Jhonte » Sun Jan 02, 2011 1:11 pm

You can use cssUpdater! It consists of a FireFox add on and a desktop application that acts as a socket server. When you edit your css in FireBug, all changes is sent to the server on localhost in which you can choose to sync all your changes or only a few.

So your workflow would be:
1. Edit your css in FireBug until satisfied
2. Sync your changes in cssUpdater with one click
3. Reload your page to see that the changes is preserved!

It works on both OS X and Windows and with your favorite editor or IDE since it only cares about the css source files.

Read more and download it at the homepage: http://www.cssupdater.com

Hope this helps!

unleash.it
Joomla! Explorer
Joomla! Explorer
Posts: 268
Joined: Wed Dec 12, 2007 2:40 am
Location: Frisco, CA

Re: How to save changes in Firebug?

Post by unleash.it » Mon Jan 03, 2011 7:26 am

Hi Jhonte, are you the developer of cssupdater? I didn't see a forum at the site so if it's you, I just thought I'd mention here that I had some problems when I tried to sync up more then one file at a time. The first file syncs fine (and my css file looks fine afterward) but the second won't. In case it makes a difference, they are both called template.css, but they are in different directories.

Other than that, it seems very promising. Every so often I check around to see if someone or something has come up with a way to save from firebug without hassles like comments getting stripped out, etc. Your solution takes a little setup, but if it works it's going to save a lot of people a lot of time!


Locked

Return to “The Lounge”