Top 6 Internet Explorer Extensions for Web Developers

Apr 22 2008 by Jacob Gube | 19 Comments

Lead Image - Internet Explorer BrowserFor Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

Screenshot -Internet Explorer Developer Toolbar add-on for IE

The Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

It shares many features that we love from Chris Pederick’s Firefox Web Developer extension such as: outline div elements, mark-up validation tools, ruler and measuring tools, resizing the browser window precisely (i.e. to 800×600), and all that good stuff.

It’s an essential tool for analyzing and troubleshooting web pages.

Some features:

  • A Document Object Model inspector pane
  • Multiple validation – automatically opens validation services in multiple browser tabs at the same time
  • Syntax coloring of source code

Related Resources:

Download:

2. Web Accessibility Toolbar

Screenshot - Web Accessibility Toolbar - Internet Explorer Add-On

The Web Accessibility Toolbar, developed by Vision Australia, was designed specifically to assess and analyze the accessibility of a web page, but it’s very useful regardless of whether you’re testing for accessibility or not.

Some features:

  • Greyscale function – renders pages into grayscale so that you can test color contrast.
  • Color Contrast Analyzer - a more detailed test for color blindness accessibility, which provides an analysis of the foreground and background color for "color visibility" as suggested by the W3C consortium.
  • Test Styles – which opens up a dialog box where you can edit existing CSS styles on a web page.

Related resources:

Download:

Documentation:

3. HttpWatch (Basic Edition)

Screenshot - HttpWatch IE Add-On

HttpWatch is an HTTP data viewer and debugger extension by Simtech Limited. HttpWatch comes in two editions: Basic and Professional.

The Basic edition displays plenty of information regarding HTTP data and web page performance such as status codes, total elapsed time it takes a web page to load, amount of downloaded data, and HTTP compression savings (if you use data compression).

Some features:

  • Page Level Time Chart – gives you a visual representation of the web page’s performance
  • Errors Log Summary - notifies you of any HTTP errors encountered.

Download:

Documentation:

4. WebCollect

Screenshot - WebCollect IE Add-On

WebCollect is a simple web content capture tool. It allows you to take and save screenshots easily (great tool for design mock-ups and presentation). It also has an eyedropper tool which allows you to sample colors from a web page to extract their color values (in RGB, Dec, and Hex).

Some features:

  • Copy full screen – enabling you to copy a web page without having to crop or resize the image
  • Capture Rectangle Area – which allows you to copy just parts of a web page.
  • Support for most digital image file types such as JPG, PNG, and GIF.

Download:

5. Fiddler2

Screenshot - Fiddler2 IE Add-On

Fiddler2 is a web debugging proxy add-on whichs logs HTTP(S) traffic data. It’s very robust in features and is customizable to your needs.

Some features:

  • Session Inspector – which also provides you with headers and web forms data.
  • Set break-points – so that you can experiment with inbound/outbound data.
  • Performance Statistics – including world-wide estimated download times

Related resources:

Downloads:

6. Web Development Helper

Screenshot - Web Development Helper IE Add-On

The Web Developer Helper is an IE extension targeted towards ASP.NET and JavaScript/Ajax Developers. It has a special set of tools for ASP.NET development.

Some features:

  • Trap script errors – to see call stack errors.
  • Detailed request headers

Downloads:

IE still can’t match the Firefox’s number of extensions for web developers but these extensions help even out the field a little bit.

Got any interesting experiences with any of these tools (or horror stories)? Share it with us in the comment section.

19 Comments

BookwormProductions

April 23rd, 2008

The prospect of using IE again as part of my development environment just makes me cry, in the good way of course (like after sex or skydiving), I’m just so happy at the prospect of using IE again. I’m especially excited about the microsoft plugin which I’m certain just kicks firebugs a%#.

I’ve never used any of these tools but I certainly have my share of IE horror stories. One problem in particular comes to mind, after installing SP2 on XP my IE actually stopped working. Funny thing, a service pack actually breaking a application, just wonderful; but hey its microsoft I don’t expect anything they make to work without extra work.

FYI. My sarcastically expressed hatred of IE and microsoft shouldn’t be taken personally, I appreciate this blog and the valuable posts made here thats why I’m subscribed to the RSS feed.

Mihai Georgescu

April 23rd, 2008

Thanks for the list, so far I’ve only used the “Developer Toolbar” on IE6 once in a while hunting layout issues.
I hope the future will no longer be about a browser having all the developer tools (we all know FF has a good start and Safari also introduced some sort of web developer extension).

Eric Lawrence

April 23rd, 2008

Hey, thanks for the mention of Fiddler. Note that there are a few great add-ons available for Fiddler; check out http://www.fiddlertool.com/Fiddler2/extensions.asp

liam

April 24th, 2008

I’ve recently just made a decision to use nothing but Firefox from now on. This makes me regret my decision, because deep down I love IE7, and this might be a good enough reason for me to go back. Nice read.

glenndavid

May 9th, 2008

what is wrong with you people? Firefox is one of the only browsers a real webdeveloper should be working with, you’re actually not even a developer if you work with IE!
creating plugins and addons for IE (with probally a load of spyware) is like putting a sticker on a wrecked car!
please i beg you, use Firefox with the correct extensions and develop like a man.

Lee G.

May 15th, 2008

i agree with glenndavid… IE is out and firefox is in. even though IE7 has made massive improvements, I know if dev companies all around the world that only now only dev in FF. all hail the mighty firefox !

Dean Reaves

May 16th, 2008

I recently ran across this web based application for building forms and search applications without programming. I was quite impressed with what Caspio Bridge can do. Go to

http://www.caspio.com/?s=113

Carl

May 23rd, 2008

@glenndavid and @Lee G.

Considering that IE still has the largest market share, I wouldn’t trust any “real web developer” who doesn’t test in IE.

MaYaKa

June 13th, 2008

Thanks for the list

Use it Yet?

June 14th, 2008

glenndavid, before you say that, have you ever infact use the ie developer toolbar yet?

i bet not. it really kick that little firebug ass.
i used firebug, and i try ie developer toolbar, and i will never switch back.
firebug just give me too much junk which can not even show me what and where is the source css files came from.

ie toolbar on the other hand, it simple and right to the point, it can even tell you what is the css source file name, where is it, and what are the other in there. it even offer some handy little tool like color picker, ruler….etc
if you want to do anything with css, this tool rock.

you probably not even know how to use that amazing tool, but you are already framing it!! make sure you use it first before you blasting at it.

daniel

August 7th, 2008

I have used firebug for a while but was forced to use IE7, so i installed ie developer toolbar and it has NO chance against firebug!
There is also no good way to debug javascript in IE, i installed debugbar but it only crashed IE all the time.
It’s time you realize that IE sucks, why should you use a browser that can’t follow W3C:s recommendations?

Inspect in iframe

February 4th, 2009

Do you know a tool which will be able to inspect DOM elements in iframes?

Jacob Gube

February 4th, 2009

@Inspect in iframe: I haven’t tried using IE Developer Toolbar in a web page that has iframes, but I’m betting it can do it. If not, try to open the iframe in a new window, but that would probably defeat the purpose of what you’re trying to do – which is to see how your iframes work in a web page.

Daniel Lihaciu

February 13th, 2009

It’s very useful that tools for me even if work with marmura. Thank-you

Will

April 7th, 2009

Hey guys,

Does anyone know of any tools where I can alter the CSS live in IE7? Similarly to what Firebug can do.

The IE developer toolbar only allows you to add CSS attributes from what I’ve found so far. Even that is cumbersome.

Lance

August 28th, 2009

Internet Explorer is a joke and I hate the fact that I have to test sites on it at all, let alone develop specifically for it.

Microsoft and their unwillingness to follow standards will eventually get them into trouble. How many people are sick of having to recode something that works great in 4 different browsers but not in Micro$hite Explorer

Biber Hapı

September 6th, 2009

i agree with glenndavid… IE is out and firefox is in. even though IE7 has made massive improvements, I know if dev companies all around the world that only now only dev in FF. all hail the mighty firefox !

Angela

March 10th, 2010

Get real dude! Microsoft rules.

gary oliver

June 20th, 2010

None of them have the web tools I need like the ones in the firefox addon “web developer”

Leave a Comment

Subscribe to the comments on this article.