• Log In

laminbarrow.com

Random opinions on programming, web design and life
  • Home
  • Post archive
  • Pics
  • About me
  • Contact

Essential web browser tools for the pro web developer

Edit Display Settings

or
Edit Post
Tuesday, May 20, 2008
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. 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.

 
Your Comments
 
There are 4 comments - add your comment
Jonah Dempcy - Washington, United States
Thursday, May 22, 2008 1:37 AM
Nice list of programs! I can add a couple to that list as well: the Microsoft Script Debugger or the Script Editor (the Script Editor is better but I believe you need Office ... Or maybe you can find it if you poke around Microsoft's site, but I certainly wasn't able to). Either of those will get the job done, though, but of course the Script Editor is better.

Or, if you use Visual Studio, you can use its script debugger which plugs into IE. But I use Aptana as my IDE so that doesn't apply for me.

Besides that, I also use the color picker and measuring tool in Firefox. They are named ColorZilla and MeasureIt! respectively. That allows me to grab the hex number and pixel coordinates of things easily.

I use the Firefox Web Developer Toolbar which has a lot of nice functionality. My favorite, though, is definitely FireBug. Big ups to that program!

I wrote an article on getting acquainted with Firebug. It's online at this address:

http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started.html
JT - United States, North America
Friday, May 23, 2008 10:35 AM
Helpful add-ons. My favorite is the Web Developer add-on.
khathutshelo - Johannesburg, South Africa
Wednesday, June 11, 2008 7:18 AM
Great post, does Opera and Safari have anything similar?
Shane - Manchester, United Kingdom
Thursday, July 03, 2008 12:48 PM
Hey there Lamin,

just came to your site from nettuts.com - good article. I'm going to check out Yslow at work tomorrow.

Thanks.

Your Comment

Your Name
Your Website
Your Location
Email me if someone replies.
To receive emails create a username or Sign In
Your Email
Username
Password
Confirm Password
Add me to the contact list.
Remember me on this computer.
Sign in below or Sign Up
Username
Password
loading...  Post Comment
 
More Post
« Back
Next »
Related Topics
web, tools, browsers, add-on
Media Actions
0
Promote
Email to a friend
Save to delicious
Digg this
Stumble it
Sponsored Links

See Also
    © Copyright 2007-2008 Lamin Barrow
    Site created with .geographical media. Explore geo