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
- Firebug Lite for Safari
- Firebug Lite for Google Chrome
- Firebugger for Internet Explorer
- TextWrangler
- 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.
Firebug is awesome. I also love the CodeBurner extension for it (yeah, an extension with its own extension, I know).
Notepad++ is cool and lightweight and all, but I recommend Aptana Studio for serious coders, either stand-alone or as an Eclipse plugin.
People who need to handle lots of PHP (unlike me) may be better off with the features offered by Eclipse.
Bell, thanks for commenting, this is the kind of stuff we need on this post -namely info and examples.
I’ve never tried the Codeburner extension so I’ll probably give that a shot and see what I can get out of it. Thanks for dropping in!
Hi John
I’ll be RT this for all my techie friends to enjoy. I am such a technophobe I leave all the techie stuff to them lol
Really think you guys & gals are geniuses who can do all this stuff ;-)
Patricia Perth Australia
Hey Patricia no worries, we’ll handle the tech stuff, you clue us in to the healing properties of lavender.
I’m serious here folks, you don’t know all the stuff it does, head over to Patricia’s blog to find out!
Thanks for commenting!
Hi John,
There’s so much information there – when i realised how different it is with each browser my eyes glazed over. Although I’m not skilled in CSS I liked how your demonstration showed the visual connection between the code and the finished result. So its worth downloading it even for me – I can learn a lot just from seeing this.
I haven’t seen Firebug mentioned elsewhere. Your video is going into my StumbleUpon library. Thanks for you help.
Julia
Hey Julia thanks for dropping in.
I know it seems overwhelming but just get used to poking around in Firebug and looking at the different way the HTML is affected by the CSS. You can learn so much by just visiting other sites.
If you have any issues just make sure you ask me :) Thanks for commenting!
Firebug is great add-on, before i will change anything on my site i check how it will look, and it’s really easy to use.
Hell yes, Jane. i can’t live without it now, the developers need a medal or something, a parade maybe. I suppose money would do…
thanks for commenting!
For sure they should get a medal for it, i think they should open bank account for some donation and i think a lot fo people would donate them for sure.
O.o’
Wow. It’s been *so* long since I’ve done my own webpage coding, apparently, that this entire post went right over my head.
Okay, maybe not all of it. I understood, “Feel free to let me know if you have any questions and I’ll do what I can to answer them.” But that’s about it. =)
I suppose when I’m doing more than just blogging over at Blogger, this will come in handy. Then I can email you with my HEEELP!!
Delena
Lol Delena. Well luckily not everyone needs to get this in-depth with Firebug. If I wasn’t such a control-freak I wouldn’t either!
And I’ll be more than happy to HEEELP you anytime :)
Impressive demo dude…have you (or do you have any interest in) developed any sites using scuttle, pligg or dug php scripts?
Thanks Dino!
Actually now that you mention it, I was looking into developing a Pligg site a few years back.
As it happened, I got to it just when Pligg was undergoing some kind of major code change and I wasn’t sure if I should develop with the old code or wait for the new to stabilize.
I opted to wait but of course then moved on to some other projects. Are you working with any of those systems?
Im looking into it. I either develop it myself or get someone who actually know what they’re doing to do it :-)
If you’re interested in getting back into that type of development, hit me up via email…
Hey, John!
Firebug is what’s keeping me from switching over to Chrome from Firefox.
In Chrome, it just doesn’t work as good and never has before IMO.
And thanks for the link to the Firebug Add-ons — I didn’t even know they existed. Will have a look.
/Nabil, from Sweden.
Nabil! thanks for dropping in!
I agree the Firebug lite in Chrome just isn’t up to snuff, nor is the Safari version. As soon as they get the full, working Firebug in Safari or Chrome, I’m OUT!! lol.
Oh yeah I didn’t know about that PS3 software, does that work with Sony’s recent firmware updates or root fix or whatever they did?
I honestly have no idea :p
I want to switch from Firefox to Safari but it’s not just happening right with Firebug in Safari. It’s pathetic, I’m bored of firefox because no matter how many new versions they come up with, I’m still finding myself having to restart it too often.
Hey Sarah I’m with you on that one.
Firefox is still too sluggish and pokey for me for everyday use, even with just barebones install and only web development extensions.
Unfortunately I have to still use it because Firebug Lite in Safari is awful. For some reason now when I click on an entry I don’t even get an CSS to show up. Good thing I made the video before that happened :)
When will the perfect browser/web development combo be created? it is a mystery…
I’ve played around with firebug a bit but haven’t used it to its full potential – it did save me a bunch of time in a couple instances though so I really should get to know it better. Those nested css issues can be a pain in the ‘ol keester – I may still have most of my hair but it is receding a bit perhaps. :)
That’s alright Rusty, I haven’t used it to its full potential either. I’m not quite *that* deep in lol.
But I definitely can’t work without it now, so they definitely made it right.
I can’t live without firebug!! I prefer the firefox version too. Best plugin in ever!! I use it countless times a day. It’s great for finding out how someone else did something cool too.
Hey Melinda! Yeah I love using it to “spy” on other websites coding techniques. I always hear the “Mission Impossible” music in my head as I’m doing it :)
What an awesome firebug is, thanks for the video really helped me understand more.
You’re welcome Ben. I’m glad you got something out of it and I hope it helps make it easier. Thanks for commenting!
Hi JG,
Nice information there.Well although i like chrome more but firebug is a feature that makes firefox respectable for me.I am not a master in CSS but i can surely say that it has made my learning easier.
Yeah Chrome is definitely faster for me than Firefox, but Firebug is always the dealbreaker, at least when it comes to development. making it easier it what it’s all about! Thanks for commenting, Shivam!
To tell you the truth I have just started to take a look at firebug. I am mostly used to using dreamweaver. I do however find your video very useful. Thank you for the tutorial.
Samuel
Hey Samuel, you’re on the right path, man. Keep using that Firebug and soon you won’t be able to live without it. Let me know if you have any questions!
Hey JG…. wow what a blog it is …. highly appreciative and the message in the blog of “making the Web developing life easier” really appreciative…. very nice blog i was searching for it…… i will keep visiting it for latest updates…..
Stop spamming, dude.