October 01, 2017 Standard No comment

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

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.

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.

For any other details contact:

Get In Touch

If you have any question regarding how to create a website check out my another video in which I’ve explained how to create a website.

Leave a Reply

Your email address will not be published. Required fields are marked *