Firebug, the Firefox extension for live debugging and monitoring CSS, HTML, and Javascript of any website, is a free and open source.

The book I'm using to learn selenium is based on firefox version 17.0.1. I know this is an older version but I want to be consistent with the book. I installed this older version of firefox and now need to install a compatible version of firebug.

Firebug is a Mozilla Firefox extension. You can install the Firefox extension into your Firefox browser and view the CSS files.

While Firebug is particularly popular among developers and testers, it can prove to be a great tool for learners and newbies too.

If you are wondering how to get started, don’t worry. In this article, we’ll see how you can install and use the various options of Firefox. Additionally, we’ll see how you can use firebug to customize your WordPress theme with custom CSS.
Here’s how you can Install Firebug:
There are two ways of installing Firebug

• Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug is always just a keystroke away, but it never gets in your way.
• Firebug plugin free download - Firebug, Firebug Lite, FireSass for Firebug for Firefox, and many more programs.
• FireBug is a Firefox extension that allows you to monitor and tinker with JavaScript, CSS, HTML, and Ajax through a combination of a powerful debugger, error console, command line, and code inspectors.

• Open Firefox, go to Tools > Add-ons > Get Add-ons and then search for firebug. Now click on Install. Restart Firefox after installing.
• Or, you can go to getfirebug.com and click on “Install Firebug for Firefox” button.

Using Firebug
The short cut key to view the Firebug windows is “F12”. Or alternatively, you can also click on the firebug icon from the status window.

Inspecting Element:
This is the most powerful feature of firebug. Through this, you can directly get the source of that particular element. You can know all about that element, which style sheet is it using, which links its pointing to, what HTML is it using, etc. Inspecting about an element means knowing all about that particular selection.

To inspect an element simply right click on the element which you want to inspect and click on “Inspect Element with Firebug”. Or you can also press “F12” and click on the “inspect” icon and then move your mouse to any element and then you’ll be able to see a blue rectangle surrounding that element and its code in the firebug window.

Firefox Firebug Plugin

You can edit the text or experiment with the coding here only and the changes will be displayed on the website directly. Also, you can select any line and click on “Edit” and a new window will open where you can further edit that code or text.

However, to confirm changes, you will have to copy the experimental code from the Firebug window and replace the code in the actual code file. Same with CSS. Firebug enables you to find the CSS class and the name and location of the CSS file that you need to edit to make changes in the selected elements. You can try out the changes real time and view a live preview of the changes taking effect. To finalize the changes, you’ll have to open the CSS file using the path of the file, locate the class and then make the required changes.

Here you can minutely change each and every element you wish. Editing in this window is too easy.

Get Firebug

CSS Window:
Music box for cousin. Notice the Style window in the right side. It shows you which CSS file is being used by this element. Just hover the mouse over style.css and you can also know about its location. There’s even the option to copy the path to the location of the CSS file and access it easily.

Layout:
In the HTML window, click on “layout”. This is a very useful feature to see the measurements of the navigation window and to know about padding, border, and margin of a website. Below is an example.

Firebug For Firefox Mac

Console window:
If you want to use the good old command line for javascript, then you can also do that. To open it click on “Console” in the firebug window.

Now you can edit the javascript from this window. It also has many other functions like autocomplete, automatic resizing, copying the code, hyperlinking to object, etc. You can also debug errors in this window.

Net window:
Want to know which elements of your webpage are slowing the user experience? This small nifty tool will show you each and every detail of the loading time. Maybe you forgot to compress the images or the javascript is taking ages to load, this tool will show you everything.

If you just want to know about the loading time of images, then click on “Images” and it will show you just the loading time of images on your web page.
This way you can know which files are taking a long time to load. You can also know about loading time of HTML, CSS, and Javascript. This feature is very useful to speed up the website and to find out the problems. You can also examine HTTP headers, or you can know if the website is using cache effectively, etc.

Firebug For Mozilla

Uses of Firebug

Firebug is a lightweight and easy to use plugin, for monitoring/modifying your web project file. For a programmer or a web designer, there are numerous ways firebug proves to be helpful.
Below are a few situations where you can use firebug to help you with the development or modification of your web project.

Firebug Download For Firefox

To change the layout and customization settings
Use firebug to find out the name of the CSS file that controls the appearance of a certain screen element. Firebug provides you with the complete path and the CSS class of that contains the code that affects.

Find image paths
If you’re not sure where the image on the screen comes from. Let Firebug help you find it. Also, if you want to resize an image, you can first try it with firebug and check what dimensions work best. Once you find the ideal height and width, you can apply it to the required CSS files.

To discover the HTML codes
Planning to restructure the elements on your web page. Use firebug to inspect the elements and the edit HTML option to try out changes in the appearance of your website.

To find out the javascript
Problems with the javascript on your website. Use firebug to get a report on the errors in .js files.

Edit as HTML option
Want to modify/change the HTML code of the website, or want to see the HTML of any website, you can do so very easily.

Try out modifications on fly
If you want to try out new colors, new formatting for your website and want a preview of how it will look, you can use Firebug to see the reflection of changes you are going to make.

Firebug lite: For browsers other than Firefox

Firebug is built for Firefox but what if you’re using some other browser. Firebug lite is the solution. Firebug lite integrates with browsers like Internet Explorer, Opera, Chrome, and Safari.

Firebug For Firefox For Mac

There are a few features in firebug that you won’t find in firebug lite, but it can still be very useful for your basic code monitoring.

Firebug For Firefox Add On

Through this firebug plugin, you can edit live websites, preview how it looks, inspect the elements and do just about everything you wish to. This plugin is a real solution to web developer’s problems. Worth a try, isn’t it?