Presented by Nick Batik, Pleiades Services
Firebug is a Firefox extension
To get it, go to Firefox menu under Tools > Add-ons and search for Firebug and install it into your browser.
Firebug allows you to go under the hood of your browser. You can view and change the code on any website to see what’s running and what you can do to modify it. All changes are temporary in your own browser and do not affect the live site. This is a great way to learn HTML and CSS as well as a great tool for designing new sites and modifying existing sites.
To turn on Firebug, look for the small lightning bug in your browser under the address bar. That will open up a window under the website content; you can also open it as a separate window.
Once you have a console open, you can inspect the CSS, HTML or Javascript for any website (one running WordPress or not!). You can modify any code you wish, but none of it will be saved on the browser. You will need to save it to a file and upload it to your server for the changes to take effect. Firebug just allows for inspecting, previewing and testing code changes.
From here, Nick demonstrated how to use Firebug, which is difficult to capture in a blog post. Until we can get his video uploaded, here are some links to tutorials you can check out:
- StudioPress’ tutorial: http://www.studiopress.com/tips/using-firebug
- Chris Coyier’s CSS-Tricks screencast: http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
- The Firebug Tutorial Series: http://www.youtube.com/watch?v=tdIk2PztcL0
Nick mentioned the DOM tab in Firebug and explained briefly how to use it to identify areas of a page that can be modified with Javascript. You can read more about this here: https://getfirebug.com/dom
The Layout tab will show you how much space a selected element takes up on the page.
For the Javascript tab, here’s another tutorial: https://getfirebug.com/javascript