Working on the Mad Mimi redesign CSS, I take about 5 minutes to show you why I love debugging CSS using Firebug. I’m not sure how elementary this is or how familiar you are with Firebug, but if it is helpful for you, I’ll start creating more Firebug screencasts.
King out.
Sorry, the comment form is closed at this time.
The Jud Conlon Chorus
A Pirate's Life
George Bruns
Magical House Cleaning/Blue or Pink (Score)
George Bruns
A Beautiful Spring Day
George Bruns
Overture (101 Dalmations/Animated)
Randy Newman
You've Got A Friend In Me
Firehouse Five Plus Two
Baby Won't You Please Come Home
Camille
Le festin
Michael Giacchino
Wall Rat
jina @rogie I know. I was like “if I spend all my credits and don’t get one I’m gonna cry.”
zackkitzmiller @rogie I have an outstanding trade for the rare one now with @gardaud
zackkitzmiller @rogie I’m got some of them. Now I need the rest.
zackkitzmiller @rogie What set?
it’s negatiiiive nine! :)
If you want to do that in Safari, too: Go and get yourself a nightly build of WebKit! The web inspector there is more like Firebug in Firefox which also supports HTML editing. I also find the Web-Developer-Toolbar (Firefox) useful sometimes, because it ships with liners and rulers to place on the web page. ;-)
Hey Rogie, nice screencast – definitely a tool I use daily and has saved me countless hours.
How the “ReCSS” button work? does it effectively clear your cache?
nice html5 too – how widely will the mad mimi user base support it though?
Yeah pretty cool videocast. I am constantly using firefug.
Same question as Dan, how does the “ReCSS” button work? If you upload a new stylesheet, will it just refresh the .css instead of the .html/.php ?
I use Firebug heaps too. It’s so good; live CSS editing being it’s best feature for sure!
@Pedro and @Dan yes, exactly. ReCSS or CSS Cachebuster work in the same way. They reload currently linked stylesheets, however, only ones through the LINK tag :(
I do this every day.. except using that firebug window as a guide; thanks for that great little tip!
Excellent tip, thank you!
Keep the Firebug screencast coming.
I’ve been doing exactly this for years and I’m glad I’m not the only one.
What I didn’t know about is that ReCSS bookmarklet. So awesome. Thanks for that!
Awesome to hear that we are all familiar with Firebug. Also awesome to hear that really the best tip here is the use of ReCSS, so cheers!
what do you use to capture the screencast?
That’s my daily workflow – saves a ton of time.
Was there life before Firebug? I don’t think so.
Nice tutorial. Life before FireBug was no life at all.
I tried contacting you via your contact form to see if you were available for work.
Please let me know either way.
I love firebug. I would waste so much time editing and refreshing if it wasn’t for it.
Question.. What theme do you have for your firefox? I have been looking for a theme that has the tabs up top, but couldn’t find one for Mac.
@sKb875 I’m using a GrApple by Arronax theme. You can find it here:
http://www.takebacktheweb.org/
@Rogie Thanks so much. I love this theme. It’s exactly what I have been looking for.
I’m using the web developer too nowl. I’ll try the firebugs as well.
Great screencast Rogie and I admit that I do this in a pinch as well. But I wanted to tell you about a method that may be even handier for you. I noticed you use CSSEdit (as do I) and in CSSEdit, you can load up the page you’re working on by clicking the Preview icon. Then if necessary, set the CSS file you have loaded up as an Override from the Override panel. If you’re working locally or without a complicated dev environment, you probably don’t have to do this.
After you do this, there’s two modes of the Preview window. X-Ray active or not. When it’s not active, it functions like any WebKit browser. When you do have it active, it acts like a Web Inspector for CSS much like Safari or Firefox. With X-Ray on you can click on an element, it will show you the DOM tree. Now open up the Inspector panel and click on the class in question from the Applied Styles. It will jump you right to that line in your CSS file you have open.
Now, comes the even more killer part. Now select the rule in your class or selector you want to adjust, and with the Visual Editor open, go to the numeric field you want to visually adjust. With your focus in the numeric field, hold down Command as you scroll up and down. Not only with the number adjust but since the Preview window is totally and instantly live, you’ll see it adjust with it. Of course you can use the up and down arrow keys as well.
It may sound complicated since I’m trying to describe it in words but once you get the flow down, you’ll see how many extra steps it just removed. A screencast would totally help to explain it. This is mainly how I use CSSEdit and one of main features I love about it.
Check out this page for more info of what I’m trying to describe: http://www.macrabbit.com/cssedit/features/preview/
I didn’t know about the keyboard up/down value jogging. Thanks. :)
Thanks for posting this, firebug really speeds things up when tweaking designs. It save a lot of time changing CSS and then refreshing the browser.
Firebug is a priceless piece of software and greatly improves programmer’s performance.
This post will be very useful. thank you
you can use firebug for ie if you use internet explorer
Nice round up & this tut sounds great. Useful & effective notes are here which will be more helpful to us to boost up out creativity. Thanks for this posting.
http://www.freecssshowcase.com/
Consider the above link for some inspiration on best css sites available on the net.