Debugging CSS On The FLY

I hear you think what the hell are you talking about? And how can that be useful?
That’s where this article is all about.

As a designer I often need to write CSS classes , which I don’t mind but what I do mind is the fact that it takes so much of your time
because you have no guidelines in the editor, you always need to convert the page to html and test it in your browser, over and
over again, until every pixel fits in his place and the page looks exactly like you want.

Couple of weeks ago , colleague and Friend Christian showed me how firebug can help ease this process.
I was so amazed that I really like to share you how it works! The first thing I already revealed and the name
of the tool that you must use for it, firebug is actually a javascript / html edit tool while you browse,
on this way you can easily test different things in your pages without really apply changes ,
but CSS is also a part of the catch . you can edit CSS while you are browsing.

Now enough of the theoretical part let ‘s show it!
First make sure you have firebug installed, if you don’t have it, download it from the
mozzilla plugin website. One you have done this you are ready to start editing.

Makeup your html , for example a website for the new CD of Rihanna…
Create all the divs you’ll need and create a css file, and link them using the link
in my example the result looks something like this for the html page:

And the linked css file looks something like this

So I linked all divs to a specific id in the css file , without any content…

now I export the html page to the browser using shortcut F12 on pc or on mac shift+Cmd+F12

Once you opened the webpage in firefox the fun part begins, open your firebug clicking the firebug icon in the right corner at the bottom of the browser window.

Once it ‘s loaded click the css tab

Now you can start editing the css file on the fly, click a specific id to add a property or click the right mouse button and then choose “new property” now you can type which ever property you want to add for example the color of the font using the “color” attribute.

Add this way you can write the whole css file while testing it, if you click the icon left to the property you can disable that specific attribute you have clicked on, very easy if you want to see how it will look without background-color for example…

When you like to add another css id in the file this is NOT possible, you must go back to your html editor , edit the css file and then refresh the page, CAREFUL make sure you backup your css file that you created in your browsing by copy paste it in your html editor , because firebug does not save the file anywhere!!!
Once you paste the css file in your html editor you can add as many css id or classes as you wish and then continue testing the css style in your firefox browser…

Extras
when your mouse pointer is pointing a specific attribute you can make use of the extra menu , this will give you some extra functions …
Show code example: gives you an example of the code markup from the selected attribute.

Look Uplinks to http://reference.sitepoint.com/css/ which gives you a list of the possible values for the selected attribute
Shortcuts: When you selected a specific attribute and editing it , you can use the up and down arrows to increase or decrease their value

By using this technique you save a lot of time, though you have to be careful that you always copy paste the edited css file from your firefox console to a html editor or text editor.

My finished result looks like this

Advantages

• Saves time
• You don’t have to always go back to your html editor to add one pixel more or less…
• You can directly see which rgb code is going to be displayed when you rollover a color value
• It’s really easy

Disadvantages

• You always have to think about backing up the css file when you edited something because firebug doesn’t save it anywhere
• You can’t make extra css id’s or classes inside the firebug console, for that you always need to go back to your html editor

Hope you enjoyed reading this tutorial and that you’ve learned something new today