Saturday 28 March 2009

Firebug Tool - edit, debug, and monitor CSS, HTML, and JavaScript

If you work in Internet Development then I highly recommend the use of firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) which is tool where you can examine all the elements of the webpage that you are viewing. Firebug is specifically for use with Firefox however there is a Internet Explorer version if you're that way inclined which is called 'Internet Explorer Developer Toolbar'. With Firebug you can ->edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
If you're involved in css changes it's a must have tool and it's completely free.
For example on the left hand side view you could select the HTML tag. This would give you a list tags that may look something like this.
+ < div class="1" >+

Clicking on the'+' sign to the left of these tags would display all the contents of that < div >. for example
+ < div class="1" > < div class="2" > + < div class="" >

It's the same principle if we were to replace the div tags with table tag etc.
On selecting the tag of your choice on the right hand of the screen we could choose to view the css for this item. And not only that we can edit the style from here and view the changes immediatley. Thus saving time consuming testing. Also on the right hand side you could move that item around the screen by selecting the layout tag. When you make changes here 'Firebug' shows you the css you need to write to make the changes.
There's even a tab so you can change Javascript DOM . Not something I've used yet though.
This is a must have tool for any other internet developer.

No comments: