yensdesign – Tutorials, Web Design and Coding

Hi there guys and Happy New Year 2009! We present to you a new type of articles titled: Helpful Development Tools. There are many useful Web Development tools that help us to diagnose issues with Javascript, CSS, HTML, Javascript… etc and We will collect all them in a serie of articles, exploring the most popular and useful.

The first one I want recommend to you is Firebug.

Introduction, what’s Firebug?

Firebug is the ONLY ONE Web Development tool for web developers:

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

It’s only available for Firefox but you can use Firebug Lite in Internet Explorer, Opera & Safari. It will recreate some Firebug features by adding a Javascript file in your pages.

Features

As we said Firebug puts a wealth of web development tools while you browse, allowing you edit, debug and monitor CSS, HTML and Javascript but let’s take a closer look at his features:

Firebug is very user friendly and comfortable, it never gets in your way so you can open it in a separate separate window or as a bar at the bottom of the browser. Also you can enable / disable Firebug for each page different page that you open.

Firebug allows You to inspect and edit HTML in real time (finding elements with mouse if you want) so you can see instantly changes you made, also in Javascript-driven sites you will see that HTML elements are constantly being created, removed, and modified because Firebug highlights them for you.
As You can imagine it’s very very poweful

Firebug allows You edit the CSS code of your websites in real time telling you everything you need to know about different styles of your website. You can make changes in the CSS and see them instantly by adding, editing, removing or hiding CSS propertys.
Firebug organices all CSS scripts in a page, so you can swap between them very easy and edit them.

Firebug allows You monitoring network activity. Firebug breaks it all down for you file-by-file so you can find where your website fails: huge images?, too much Javascript?, third party servers?
You can check cached or not cached requests, HTTP Headers, and more…

Firebug includes an awesome & powerful Javascript debugger allowing you pause at any time and have take a look at the state of everything. You will find Javascript errors so easy and so fast and as in CSS, Firebug find and organices all Javascript files contained in a web page.
Also you can profile the Javascript performance, logging function calls, watch expresions and more…

Summary

So guys I want to say you that Firebug is a must have tool for all web developers, it will improve and reduce your development process and it’s priceless

If you know another useful web development tool and want to see it in these articles, just post it in our suggestions category of our forums or just send us a message via twitter.

See you soon!