Firebug is an add-on tool created by Joe Hewitt, John Barton, Robcee and Jan Odvarko which integrates itself with Mozilla Firefox (3.5 or Higher). Another version of Firebug Lite 1.30 is available for Non-Firefox browser (example – Internet Explorer, Google Chrome etc.) Within a short span of time, it has gained popularity among the masses.
Firebug is the solution for all your debugging problems. It comes handy for editing, debugging and monitoring HTML, CSS and Java Scripts in real time and the output is obtained instantaneously. Simplicity steals the heart. Keeping the same in mind, Firebug team kept every related aspect of this add-on simple to use from installing, operation and viewing the real-time output. This power-packed tool is free to use.
Firebug 1.5 can be downloaded from the following link: http://getfirebug.com/
Installing Firebug –
- Open the source website (: http://getfirebug.com/)
- Click on “Install Firebug for Firefox” button shown on top-right corner of website
- This would redirect you to the Mozilla Add-on website and a pop-up window would appear which would guide through rest of the installation process
- Restart Firefox
- A new symbol (A Bug in grey colour) would appear in the bottom-right corner of the Firefox window
Getting Started With Firebug –
Many applications annoy its users by bugging them with irrelevant notifications. This is not the case with Firebug. It works the way, you want it to work.
How to Use Firebug –
· Firebug can be switched on-off by simply clicking on the ‘bug symbol’ as shown in the earlier image.
· The screen will split in two parts; The top part shows the website (you were currently viewing) and the bottom part shows the HTML / CSS / Java Script used in that website
· In the bottom pane, we can view the desired coding by clicking on either HTML / CSS / DOM. This helps a lot in debugging process. Debugging can be easily verified by looking at the output in the above pane. CSS stands for Cascading Style Sheets which is used to define the look and formatting of a document. There is no need to modify the original files to see the changes; as it immediately applies the changes to the site you are working on. DOM stands for Document Object Model which is used for handling objects created in HTML, XHTML or XML. DOM properties can be used for making changes in JavaScript.
(Firebug in a nutshell)
Features –
· Very Easy to Use and immediately applies the changes in no time.
· Auto Complete Function – Not so good at coding? Auto Complete Function is just the feature you are looking for. It provides you with a list of all possible code combinations. Select the code as per you requirement.
· Graphic Overlay – Lost in the wide coding of a website… Graphic Overlay feature automatically directs you to the coding segment of a object as soon as you pinpoint the object on the website you are working on.
· Disable Command – It’s easy to determine how the website would look without a particular object. Simply click on it and then click on disable.
· Java Script Debugging – After setting the breakup point, it will show line by line execution of the code. Thus providing a great deal in finding errors in code
· Easy Alignment of Objects – Use the cursor keys to get the appropriate location of objects. Firebug gives extra edge to web developers. Maintaining the layout of websites had never been so easy.
Downloading Videos Using Firebug –
- Click on NET, then click on enable
- A list of tab would open, click on ALL.
- If the video is already viewed once, then it is stored in browser’s cache. For clearing the cache, perform the following action: Tools > Clear Recent History. Click the Details button and make sure the Cache checkbox is selected. Then press Clear Now.
- Click on Refresh button in Mozilla Firefox; this well enable firebug to display the entire request made by the website. From the list, Identify the video file (Generally the size would be heavy and *.FLV extension must be associated with it.)
- Right click on file and then click on ‘open in a new tab’. This will generate a new request for the video file and firebug has to deal with a single coding segment. Rest of the downloading procedure is taken care by the browser itself.
Happy Debugging with power packed features of FIREBUG.
Stay Digified !!!
Nitish Jha
