LB Beta

• All 7
• Freebies 1
• Geo Location 1
• Web Design 1
• Javascript 1
• Tools 2
• Work Life 0
• Business 1

Essential web browser tools for the pro web developer

Posted in Tools on 20 May 2008 | 739 Comments

From the beginning of my web development career after high school in the summer of 2006. I have frequently used certain web browser tools or add-ons if you like to aid me in my every day web development. Through the course of time I have learn to use these tools to become a better web developer. In this post, I will make a list of all the web browser tools or add-ons I find most useful to the professional web developer.

Firebug

In my own opinion Firebug is the most useful out of the crowd of web browser add-ons for the web developer. It has helped me finish task quickly which will otherwise take me hours to finish. It's functionality spans from the ability to inspect page elements and there HTML, edit CSS values and preview results instantly and even set breakpoints in your JavaScript code to aid you in the debugging process.

Firebug is available only to the Firefox browser at the time of this writing. 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 HTML 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.