• Share

Firebug is a very popular web development tool available as an add-on for Firefox web Browser. Using Firebug you can view and edit any Web page right from inside the Browser. You can see the result of your code instantly. Firebug makes web designing and debugging very easy and enjoyable.

Firebug and Firefox are both free, thus saving you cost of buying an expensive Website Editor. Even though it is free, Firebug has lots of very useful and advanced powerful features available for the web designers and developers. The main features and advantages of Firebug are:

• Easy Code Inspection: In Firebug, not only can you can view the whole source code of any web page, but also you can inspect code for any particular region within the page. You just have to right click anywhere in a web page in Firefox and click on ‘Inspect element’ to jump to the code for that element within the source code. This makes finding any code for any page element very easy and fast.

• Live in-Browser Editing: Firebug lets inspect and edit code from within the Browser itself. You can watch the results of your code changes instantly in the pane above Firebug. This eliminates the time required to constantly switch between your code editor and Web Browser.

• Great Debugger: Firebug is of great help in debugging any Javascript and CSS errors. Firebug shows the number of errors detected in the status bar of Firefox. It shows all details of the errors in a web page and also locates their line numbers. Firebug also shows informative description about the error and the source file name from which the error occurred. Firebug also lets you debug Javascript step by step and watch the variables values for each step.

• Web Page Load Testing : Firebug include a powerful Network Monitoring tool which is very useful for testing the performance  and speed loading of a web page and component files within the  page such as CSS files, Javascript source files, Images, Flash, etc. Firebug displays graphically how much time each item took to load with complete break-up for time spent on each stage from making a DNS lookup for that item, connecting to server, Queuing, waiting for response, receiving data and finally loading on page. It shows a useful summary of the total number of server requests sent and total time it took to load all page items. Firebug also shows the size of each page item. This information is very useful for debugging and improving page load performance.

• Faster CSS Editing: Firebug helps a lot in quickly finding the CSS styles which are being applied to various page elements. You can also edit and enable or disable any CSS style and see its effect immediately. Firebug also shows very intelligent tooltip preview which show images or colors when hovered over a CSS style.

• CSS Page Layout: Firebug lets you view the CSS layout of the page’s Box model visually. Firebug also shows the measurements of the each box. It shows the rulers and guides for page elements.