Firebug is great, but…
Comments(4)
Firebug is the single most important piece of software I use when developing the layout of a web UI. For the longest time at my previous employer, installing Firebug and Firefox would also, after the evening big brother scan, install a nice e-mail in your inbox from the compliance nazis about your recent contraband software installation, and strongly suggest you rethink your decision. Recently however, they have seen the light and no longer send out that nasty little e-mail. But on to my only gripe about Firebug.
Let’s take this simple page and bring up Firebug.
Now, we can click into the style we want to change and use the up and down arrow keys to modify the numeric value. This is an awesome feature to position elements with paddings and margins. Imagine doing this with several elements via their class’s associated style and seeing the effect on the entire page. Pretty awesome!
We can switch over to the CSS view and see our change.
Great! Now let’s find a ways to pull out all those changes so we can paste them back into our real CSS file.
Where are my changes? I realize it might not be able to recreate that CSS file from my changes because of elements Firebug couldn’t handle, but how can I get all my changes out at once? Even if I am viewing a local file, like I am in this case, there appears to be no way to export my modifications form Firebug in one bulk export.
I suspect you are making CSS changes in multiple stylesheets on the right, and then paying attention to only one stylesheet on the left.
Notice the filename in blue at the upper right corner of the Style tab in the right pane of Firebug where you made your CSS changes.
OK then on the left pane, when you’re in the CSS tab, notice the border above, between Firebug and the page. We have a Firebug icon menu, the toggles for Inspect and Edit, and a filename menu.
@Sean Right. You can switch to edit mode, but all the changes you’ve made go away. That is the problem I have.
Although, I found out this morning you can select the text in the non-edit CSS window, but it is not easy to select it, and once you do, Copy is not in the context menu. Ctrl+C does copy on Windows, but I’m not sure about Command+C on the Mac.
Cmd-C does work on the Mac. Also, Copy is at the top of my context menu in Firebug 1.3.0 on MacOS X.
@Sean I wonder why it doesn’t show up on the PC? :S It still looses all formatting when copying it across. I’m still looking for a smoother work flow there.