Every developer has their own tools that they use in work. Those tools make work easier and when we get used to exploiting them, life becomes unimaginable without them. Whether debugging web applications or going deep with CSS, browser add-ons become irreplaceable in work.
I will show you my must-have IE add-ons and I strongly recommend you to try those (if you haven’t already). Although many developers use FireFox because it has a large number of add-ons, the tools I’m going to show you may change the way you think about development with Internet Explorer. I use both browsers because that way I have all I need for development.
This is my favorite web development tool. It provides a set of utilities that help with Web development, especially when using Ajax. It is created by Nikhil Kotari, a software architect in the .NET Developer Platform group within the Developer Division at Microsoft.
It has several common features:
- DOM inspector
- Screen capture
- Page details viewer
- Script debugging with script console and script class viewer
- Immediate window
And a few helpful ASP.NET related features:
- ViewState viewer that show information in raw, decoded, and parsed forms
- Show trace information
- View and manage cache
- Restart application
My favorite feature is HTTP Logging. It logs HTTP and HTTPS requests initiated by the browser or Ajax scripts. It provides you with all the information about Ajax postbacks shown under request and response details. That means you can see the actual information that is sent to the server and you can see the markup or JSON objects that are sent back to the client.
Web Development helper works with IE version 6 and above and is completely free. It requires .NET Framework 2.0 to be installed. You can see more details and download this tool from Nikhil’s website.
Although this tool has a “toolbar” keyword in its name, it is not actually a toolbar. It is an add-on that comes with a bunch of features that will help you analyze your web pages. Those features include:
- Explore and modify the document object model (DOM) of a Web page.
- Locate and select specific elements on a Web page through a variety of techniques.
- Selectively disable Internet Explorer settings.
- View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
- Outline tables, table cells, images, or selected tags.
- Validate HTML, CSS, WAI, and RSS web feed links.
- Display image dimensions, file sizes, path information, and alternate (ALT) text.
- Immediately resize the browser window to a new resolution.
- Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
- Display a fully featured design ruler to help accurately align and measure objects on your pages.
- Find the style rules used to set specific style values on an element.
- View the formatted and syntax colored source of HTML and CSS.
Please note that IE Developer Toolbar is not compatible with IE 8. IE 8 has its own developer tools. More information and download details can be found on the download page.
This tool is a clone of FireFox inline non modal search feature. Many IE users (including me) complained about its old-fashioned search window so I hope you’ll like this one!
For more information and download details, please visit Inline Search home page.
I hope we’ll have a chance to see more great add-ons in the future. It becomes clear that browsers are just not enough anymore, and that a little spice-up with add-ons and extensions is more than welcome.