How to use Firebug to Inspect HTML and Tweak CSS in Real Time

Tutorial on how to install Firebug, inspect Elements, tweak CSS

Firebug is a very popular and powerful open source web development tool. It can be used to inspect HTML elements and modify CSS and the layout in real time. Firebug is an add-on of Mozilla’s Firefox browser but it is also available for other browsers in a lite version. Still, with Firefox it is most powerful and can be even extended further.

We will keep this Firebug tutorial at a beginner level though. So in case you have a website or blog and want to change the color of your menu bar, modify the font size or tweak the link hover color – this tutorial could be very helpful to you.

Mozilla Firefox Firebug Add-on
Image Source: Screenshot – getfirebug.com

Download and Install Firebug

If you are using Firefox, you can install Firebug as an add-on. To do so, please go to Tools => Add-ons, search for the Firebug add-on and click Install. If you are working with other browsers you can use Firebug lite – it is basically simply a script written in JavaScript and no installation is necessary. Instead you may simply use the following link and drag & drop this link directly into your browser’s bookmark:

Firebug lite

Working Correctly with Firebug

How to work with Firebug? This is pretty easy. After installation you will see a small bug icon in your Firefox browser bar (or in your bookmarks when using another browser) – if that’s not the case you might want to restart your browser. As soon as you click on the bug a split screen will open. The browser is now showing your website’s content in the upper half and the Firebug screen in the lower half.

You may modify the Firebug screen size by pulling the screen up or down as you like. On the left side of the Firebug screen you can see the (mostly collapsed) HTML structure of your currently open website – on the right side you can see all the CSS rules which apply to the selected HTML element.

Inspecting HTML elements to modify CSS

Now let’s start inspecting! There are different ways to use the Firebug inspection tool. One is, to “navigate” within the HTML structure of the Firebug screen and unfold elements to find what you like to change and when marked/clicked, you will see the CSS which applies to this element. As you will have to go through a lot of elements here, this might be quite time consuming.

Inspecting HTML

Here is a shortcut: The second approach would be to activate the square shaped Inspect Element icon in the upper left corner of the Firebug screen. Now use your mouse on your website to find exactly the element you want to inspect (e.g. a link, main navigation bar, title, button etc.). Having selected this element you may now further inspect it by unfolding the HTML elements in the Firebug left screen. Again on the right side you can see the applied CSS.

Tweaking and modifying CSS in real time

You have now inspected your website and you’ve found the element you want to modify. On the right side in your Firebug screen you can see the CSS from every existing style that is applied to your selected element. To tweak CSS in real time you can now click on the CSS rule which you want to modify and change it. (To modify CSS you will need to know some basic CSS and HTML.) In the example below we have changed the link color from #1f1e1e to #1feded. Please see the image below.

Changing CSS Rule

How to make permanent CSS changes

Please remember, that the CSS changes you apply with Firebug are only for the moment and only you are able to see the changes, not your website visitors. As soon as you refresh your browser, the modifications will be gone again. Firebug is basically the tool to help you finding the element (HTML element, CSS class or ID) you wish to tweak.

To apply custom CSS permanently, you will have to insert the custom CSS by either using a plugin (e.g. Simple Custom CSS), creating a child theme or through an option which is implemented in your WordPress theme. It is not recommended to apply custom CSS directly into the stylesheet of your WordPress theme, because with the next theme update all of your changes will be gone – that’s why you always should use one of the mentioned methods (child theme or plugin).

Share this with your friends

Leave a Comment

Your email address will not be published.


*