Introduction To Firebug - HTML/JavaScript Tutorials

The more questions I read on the forums, the more I realize that new developers are not familiar with the Firebug extension. It's either they've never heard of it or they were intimidated by it. Whatever the reason, I've decided to write up a very small introduction to this simple yet so very powerful tool.

What is Firebug?

Firebug is a browser add on that allows you to edit, debug, and monitor CSS, HTML, and Javascript live on any web page. This gives you an in depth look at what's working behind the scenes on your page and the pages of others.

The full version is available on Firefox and there are lite versions for Google Chrome, Opera, IE6(ughh) and Safari.

Installation

There are two simple ways of adding this extension on to your browser.

1. Search for it from your add on window on Firefox.

2. Manual download and installation from https://getfirebug.com/downloads/

After you've installed and restarted your browser, you can now launch it by hitting the F12 key on your keyboard for Windows and Command + F12 (+ fn if you're using the hotkeys on your top row)

You will need to activate each panel as you use them. You can also activate all panels from the Firebug menu. For this introduction, we are going to look at the first 3 panels today which are the Console, HTML and CSS panels.

Console Panel

The console panel has a JS command line and also lists messages, errors and warnings that you have on your page. To test the JS command line simply type out a simple alert(); at the bottom panel.

Once done, hit enter and a pop up box should appear instantaneously. Although this may seem pretty simple and useless, think of all the possibilities. You can select elements, get element attributes, interact with live pages and test how JS will work on your page directly from the console.

The console also points out errors such as syntax errors or even logical ones. This may save you a lot of guessing work and time. It also displays warnings which may take a little longer to realize.

HTML Panel

The HTML panel might be one of the simplest panels to get used to. It displays the entire markup for the page in a very simple and interactive tree format. It also highlights the specific element as you are hovering over it so you know the exact location on the page.

It displays all elements on the page, even those that are hidden by JS or CSS.

Another way of getting to an element on a page is by simply right clicking on an element and selecting the "Inspect Element with Firebug" option. It will take you to the portion of the tree where the element is.

You are also allowed to interact with live pages. However the changes are NOT permanent. This allows developers to see live changes without the need to refresh.

(This will also make for a funny prank to play on your friends. Possibly changing names and pictures on websites for a little bit of fun on your computer. You can't send them the link though as changes only appear on your end :detective:

)

CSS Panel

The CSS panel is a lot more useful to designers than to back end programmers I must admit. However there is yet a lot to learn from it.

It interacts in the same way the HTML panel does. Whenever you're on a page, it will show you the different CSS files and scripts that were loaded for each page. You can also interact with the elements on the fly.

Once again, please take note that the changes are NOT permanent. Not even on local development.

It sure saves some trial and error time. Instead of going back to your text editor, making a change, going back to the page, refreshing, only to find out you missed a semicolon :hammer:

Conclusion

Another very, very productive usage of both the HTML and CSS panels is that it allows you to learn from other websites and developers. Ever wanted to take a peek at somebody elses code? Now you can!

This is only a brief introduction to this very powerful extension. I've been using it for a long time and I truly appreciate what it allows you to know and see. I'm sure you will too once you start using it in day to day development.

The remaining panels are just as powerful and have their very distinct uses for example the Script panel displays JS scripts on the page and the Net panel displays HTTP requests (very useful for AJAX development) It also displays the time take to complete loading each HTTP request. You'll be able to pickup on the little bottlenecks a lot easier.

Be sure to check out the documentation and Wiki. There are also several screencasts which displays these features in action.

Hope this helps anyone who is new to web development or the Firebug extension. Don't just take my word for it, please use the tools that are meant to increase your productivity.

https://getfirebug.com/

Thanks for reading!