Time for another video tutorial, my friends. This one is an intro to Firebug tutorial for those looking to get started. The video deals with Firebug, WordPress and TextWrangler but you can apply it to your own tools of choice (ie Joomla and Notepad, etc.).
Waaaaay back in the day…
When I first started coding my own websites (as opposed to using programs like Freeway and Dreamweaver to visually lay out the sites), it was a painful process but one that I felt was necessary to further my understanding of the medium.
Before I learned about Firebug I had been painstakingly combing through non-syntax-colored code from the “view source” menus of whatever browsers were available about 8 years ago.
Following that, I felt extremely lucky to have chanced upon a mention of the Web Developer extension for the Firefox browser.
Developing sites became a lot easier after I found it, but at the time I didn’t realize it could get even easier still.
Another chance mention on a forum brought me to Firebug. Holy Crap. It doesn’t get much better than this.
It’s just too bad that I didn’t find it earlier, before tragedy struck. Many people think that I rock a bald-head because it’s my style, or maybe because I must be losing my hair
The truth is, the learning curve on web development for newbies is pretty steep. One late night, in a “Mountain-Dew/Hostess Ho-Ho” fueled fit of sugar-rage I was forced to tear out my own hair in impotent frustration.
Stupid IE6. I oughtta sue those guys for messing up my (former) good looks.
Highlights from the video:
So before you go watch the vid, I’ll sum it up here…
The great thing about Firebug is it takes the guess-work out of your coding.
It can do more than just HTML/CSS, but that’s all I use it for and it’s made my developing life immeasurably easier.
When you have conflicting CSS rules screwing up your layouts or things just aren’t looking the way you’d expect, Firebug can show you exactly which rules are overriding each other. I would have actually paid for this if it weren’t free.
You can set styles and just play around with the css right from your browser to see how changes will look.
You aren’t limited to your own site, either. You can always browse to someone else’s site and check the code on any cool design aspects you see.
There’s also a bunch of add-ons specifically for Firebug that add even more functionality, you can find those here:
I like to stick with the Firefox version of Firebug, in lieu of the Firebug Lite versions found in Safari and Chrome, in large part due to the inclusion of line numbers where the css file is listed in the right-hand css pane.
I use Textwrangler on the Mac to edit my CSS file right on the server, rather than use the backend WordPress or Joomla editor (those of you using Windows can use Notepad++, a free text editor similar to TextWrangler).
If you’re not very savvy, working off the live server can be a risk, so make sure you either have a local version of your site available to play with, or be prepared to deal with the consequences of a mistake quickly.
For Internet Explorer debugging, I use the Firebugger online server, which is essentially Firebug Lite for Internet Explorer.
Quick link hitlist from the video:
- Firebug Lite for Safari
- Firebug Lite for Google Chrome
- Firebugger for Internet Explorer
- Notepad++ Editor
If you’ve never used Firebug before, go ahead and install it, then jump in. Feel free to let me know if you have any questions and I’ll do what I can to answer them. Have fun with it and here’s to easier web developing.