How To Use Firebug

Posted on

Firebug is a Mozilla Firefox extension. It allows to view and edit CSS, HTML, and Javascript of any website. It provides some of the best web development tools and is the most popular and powerful tool for web developers. You can change HTML, CSS, text, etc elements of the webpage on the fly, and you can use it for any live website also.

Now let’s learn how to use firebug:

Installing firebug

There are two ways to install firebug

  • Open firefox, go to Tools > Addons > Get Addons 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 link 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.

Click on “+” to expand that line. You can edit the text or experiment with the coding here only and the changes will be displayed in 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.

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

CSS Window:

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. This is very useful if you want to know the location of that particular style sheet. When you hover the mouse over the color element in this window, visualization is shown of that color, this live preview gives you a idea of how that color looks like.

 

Layout:

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

 

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 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 about the loading time. May be 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 webpage.

This way you can know which files are taking 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.

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. Just try it.

2 thoughts on “How To Use Firebug

  1. Srikanth AD says:

    Nice tutorial on the usage of Firebug. Web Developer is another incredible addon to inspect various elements of a web page.

    1. R.Bhavesh says:

      yep. Web Developer is very nice add on as well. This tutorial is targeted towards DIY kind of customers who are not really expert at web design but still wish to customize basic things on their own.

Comments are closed.

New Directory child theme: Meet the best Business Directory theme 2016 for WordPress.Check it out now!