Firebug is available only to the Firefox browser. Download Firebug here.

IE Developer Toolbar

This internet explorer add-on is similar to Firebug in use and functionality. Although it has some extra functionality such as a ruler and one of my favorite, the eyedropper tool (allows you to aye drop the color use on n image, text etc. on your web page), the only thing I feel it is lacks is a syntax highlighter which makes in look inferior to Firebug (I hate to say this because I like stuff from Microsoft). It’s quite a handy tool just when you get to know it.

Download IE developer tool bar from here.

Fiddler

Fiddler is a tool developed by Microsoft for inspecting and debugging web request(s). It runs from your machine and it could be used to debug and inspect internet traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and a whole lot more. It includes functionality that enable you to run simulated test on the web request and tools that can emulate tweaking it. Hands down fiddler is great for examining what’s under the hood of the web request(http/https). Fiddler is an extremely powerful and feature rich application and it’s not for the faint of heart.

NOTE: In order to run fiddler, you must have at least Microsoft .Net framework 2.0 installed on your computer
Download the .Net runtime frame 2.0 from here.

IETAB

The life of a web developer is not at all easy in the world of multiple web browsers. Backward compatibly is a must if your web application is hosted and it is available for use online. That is why I still use IE 6 for testing purposes just to make sure that everything renders properly.

That’s were the Firefox add-on IEtab comes to use. It gives you an option to open a link in a Firefox tab which uses the internet explorer rendering engine to do the actually rendering of the page in Firefox.

I like IEtab because it saves me space on my windows task bar. Instead on lunching many internet explorer windows … I could load them in multiple Firefox tabs which is nice.

Note: IE-Tab is only available to the Firefox web browser.
Download IE-Tab from here.

HTML Validator
This add-on is available to the Firefox web browser only. It inspects a web page’s HTML/XHTML markup and validates it against a validation engine you specify and then it reports any errors it finds. It’s just the perfect tool you need when you want 100% W3C compliant HTML/XHTML.

Download HTNL validator from here.

Yslow
If you are a web performance freak like me then you will probably want to squeeze all the performance out of your web application. Then you will find the Firefox add-on Yslow to be your ally in your quest to design and build better scaling web apps.

If you put a lot of care into work , Yslow will force you to write server side code depending on the framework you use(AP.NET, PHP, Ruby on Rails, JSP etc) to handle and produce better browser output code .Yslow is developed by Yahoo! and it’s an extension to the already popular Firebug extension.

Sometimes i use Yslow to check on the big guys to see who is implementing the best practices and who's not just for fun and most of the times i just laugh at what i see.

Download Yslow from here.

This list is by no means an exhaustive list of essential web browser tools for the web developer but merely a representation from my own point of view. If you have any other suggestions please list them in your comments.

function ShowCommentPreview()
{
  // Access the HTML elements we care about from our page
  var enteredCommentName = document.getElementById("CommentName");
  var previewCommentName = document.getElementById("CommentPreviewName");
  var enteredComment = document.getElementById("CommentBody");
  var previewComment = document.getElementById("CommentPreviewBody");

  // Let javascript do it's final bit of magic
  previewCommentName.innerHTML = enteredCommentName.value + " Says: ";
  previewComment.innerHTML = enteredComment.value;
}

As you can see the javascript is almost self explanatory. First, I declared variables and i assigned various id's of the HTML elements i cared about to them from our page. Finally i take the value of the entered comment and placed it as the value of the comment preview.

Some of the HTML

Finally, i added a HTML attribute to the textarea called the "onKeydown" which is a special javascript thing that we use to wired up the HTML and the javascript method to do the final trick.

That's it ... pretty easy thing to do. I hope you will enjoy building it on your own website. Good luck.

This is a collection of more than 500 free high quality and crystal clear icons. Head over to wikimedia to download them now.

Before

.Menu
{
background-image: image.png;
}

.Menu:hover
{
background-image: hover-image.png;
}

After

So it turns out that i must have background-repeat: repeat-x; in order to make that hover effect work properly in IE6. Very weird indeed.