If you develop your own website then there are going to be times that you have to edit code, test scripts, and make changes. Firebug for Firefox is an invaluable tool for every developer or beginner. The extension adds the ability to view CSS and script errors from within the browser window. When you’re viewing CSS you can edit within the panel to see what your new CSS will look like immediately to test your changes before you make them. Something doesn’t look quite right? Using Firebug you can check it out.
After you have installed Firebug as a Firefox extension and enabled it you can access the tool when you need it.
Right click and select inspect element with Firebug
Wherever your cursor happened to be will be the element it will try to highlight directly in the source code. By default the HTML and Style panels will be opened.
When you select a different div or element in the HTML panel the Style panel on the right will sort itself based on the styles that are being currently applied to the currently selected element. When hovering over the element in the HTML panel you can see a color overlay on the website itself helping you get an idea of what element is where.
If you are a beginner in web development this can be invaluable to understanding how CSS affects websites and how elements work together. If you’re a seasoned veteran, this can still shorten development time and help debug code.
Looking at scripts using Firebug
Have jQuery or another script on your page that isn’t working quite right? Yeah, I’ve had that problem too. It should be working and it’s not. Firebug has the handy Console and Script tabs.
Often you can simply use the Console tab and refresh your page. Any warnings or errors will be listed here. Find out if the script you thought you were calling is actually the right location. See if there’s any code errors.
There’s a Flash tab as well that can assist with debugging Flash applications.
I don’t know what I’m doing
If you’re wanting to learn html and CSS or any kind of web development you can utilize Firebug to dabble in CSS and HTML edits without having to even make your own website. Pick any website and play with the tool, you won’t hurt anything. Just refresh the page and everything goes back to the way it was before.
Stay curious. Keep learning.