Firebug
Every web programmer must have an idea of firebug and its working. It is plugin for the firefox web browser and useful for the web programmers.They can inspect the html code generated for a particular section in a web page. We can trace the client side bugs easily using the firefox.
Many of us are using firebug ,but you should be a master in it if you are a web developer.
How to use firebug?
1. Ensure that you are in firefox browser.
2. Download the latest version of firebug from https://addons.mozilla.org/en-Us/firefox/addon/firebug/. (Click on Add to Firefox)
3. Restart the firefox
I am going to elaborate about firebug with the help of a newly installed drupal site.
1. Go to any web page, right click on any section and choose the option "inspect the element with firebug"
.png)
2.After clicking on "Inspect Element with Firebug",a small window will open on the footer region of the browser.
1.HTML
This is not same as the view source page as "view source" page won't contain all the generated html as some of the html may be generated in the client side(Javascript). As a programmer ,you should focus on the html shown in the developer tools.
You can expand/minimize the source html.
1. You can insert new html into the page using firebug for testing.
I want to insert a new html "<ul><li>CSS</li><li>Jquery</li></ul>" to the content region sepcified by the id "content".
.png)
Screenshot 1.1 (Editing the content section)
Screenshot 1.2 (Inserting the html)
2.You can edit the html attributes, tags etc.
Click on any html attribute and it will become editable so that programmer can change its value.
.png)
Screenshot(2.1)
Screenshot(2.2)
I am going edit the "header" id to "header123"in my site.
Screenshot 2.1 -> editing the header id
Screenshot 2.2 -> changin the id to header123(This change affected the css through out the site and you can see that the header section css is affected.
In this way ,we can easily test the inclusion of an html using this firebug.
CSS TAB
Easily tracks all the css files in the site.
 |
| Screenshot css-tab-1 |
 |
| Screenshot css-tab2 |
 |
| Screenshot css-tab 3 |
We can comment a css property, edit a property, remove/add a rule etc....
Screenshot css-tab 1 represents the css tabs with all the available css.
Screenshot css-tab 2 shows all the base.css after clicking on it.
Screenshot css-tab 3 shows commenting out a property in the base.css under autocomplete id.
Javascript tab
javascript tab represents all the javascript inclusions on the page.
Click on the enable link and scripts will be shown.
.png) |
| Screen shot script 1 |
The middle tab shows all the scripts in this page and you can search a particular script in this tab.
DOM TAB
This tab consists of the objects specified in the html tree structure.The object can be html, javascript variables, functions etc..
The objects includes those coming from the standard DOM and those coming from the javascript.
You can edit/view a particular DOM property of an object.
This gives a clear idea of your html structure
Markup -> object
NET
net tab shows the progress of the contents loaded in your site and loading varies depending on the speed of retrieval from the server.
Very useful showing the perfomance of the page load.
Can easily track the loading of a particular script and status.
Showing the requests and content loading progress
All the http/https requests
Easy to debug a site which is taking long time to load the page.
Header/cookies/cache information of requests
Cookies
Cookies tab shows the information of the cookies stored on your browser.
You can edit a particular cookie from this tab.
You can see three drop down tabs
Cookies
You can create/remove cookies from this tab.
Login to your facebook account and inspect the page with firebug in the firefox browser. Go to this option specified in the "cookies" tab. Select "Remove Cookies" and save. If you load the page again ,you can see that the page will be logged out as the session has been removed from the cookie.
Similarly you can add your own cookies to your web pages for testing and debugging.
Filter
This is to specify what type of cookies to be shown in the list.
Third tab
This is to accept/deny cookies.
You can extend the functionality of firebug by installing more plugins like omnibug (for omniture tracking) , Drupal etc...
