Developer Tools for Internet Explorer

For the past months I’ve been developing ASP.NET infrastructure (authentication, authorization, profile, membership and resource providers). My job is not building web pages. My job is make the lives of web page developers a lot easier (well, they might not agree with me on that).


Nevertheless, when developing authentication providers I need to know when and where to redirect requests and to control how many postbacks are occurring.


To help developers on their tasks there are a few tools for Internet Explorer that can be used.


Internet Explorer Developer Toolbar Beta 3


This a free tool from Microsoft that helps you mostly with HTML issues.


The announced features are:


  • 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.
  • Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
  • 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.
  • Style Tracer: Right mouse click on a style value for an element and select Style Tracer to find the style rule that is effecting that value.
  • CSS Selector Matches: View a report of all style rules set and how many times they are used on the current page.
  • View Source: View the formatted and syntax colored source of the original page, currently rendered page, element or element with the styles that are effecting it.

    You can find more information on the Internet Explorer Developer Toolbar at its Channel 9 Wiki page.


    I had to uninstall the beta 3 version because it either hangs or kills Internet Explorer.


    If you need HTTP debugging, you’ll need the Fiddler Tool, but that’s outside of Internet Explorer.


    Web Development Helper


    This is a free tool from Nikhil Kothari that provides HTTP tracing, client-side script diagnostics and tracing, as well as an immediate window.


    For ASP.NET developers, when developing against your site on your local development machine, this tool provides the ability to view ViewState, ASP.NET trace messages, contents of your cache etc.


    The following is a list of features offered by the tool:

    • A warning when either debug or trace have been turned on. Ability to hide trace information from the page, and view it in a separate dialog, so it does not get in the way of your page’s layout.
    • Ability to view the page’s view state (in various forms: raw, parsed, and decoded) to help you optimize your state management logic.
    • Ability to view items stored in cache, and remove them for testing purposes.
    • Ability to shutdown the application (unloading the associated AppDomain), in order to test starting it from a clean state.
    • Ability to log all HTTP (and HTTPS) traffic between the browser and your server, and view request and response details, including those performed via XMLHttpRequest.
    • Ability to view the live HTML DOM using a DOM Inspector that allows viewing all elements, selected elements, or elements matching ID or CSS class. For each element, you can see the markup, attributes, and style attributes.
    • Ability to view rich error information for script errors (full call stack, script URL and line number), as well as a script immediate window to execute some script against the current document.

    I haven’t tested this tool myself but I saw a friend of mine using it and it messed with all those characters (ãçõ) that we, Portuguese people, have the hasty habit of using. So, I never even downloaded it.


    HttpWatch


    This is a tool from Simtec Limited and has both a Basic (free) and a Professional (paid) version.


    HttpWatch Feature List



    Support is provided by e-mail or telephone.


    IEWatch


    This is a tool from IEWatch Software LLC and has no free version.


    IEWatch Feature List


    HTTP Features


    • Captures HTTP and HTTPS – HTTP(s) headers including authentication headers, status codes, Cookies, URLs, POST data, Query Strings and Response Content are recorded.
    • Export Data – The HTTP Log can be saved in various formats, including XML, comma separated and text format. The XML structure is described in the XML Schema.
    • Filters – IEWatch allows the most extensive filtering, including filters on HTTP headers and response content. You can store up to seven Filter definitions.
    • Find in HTTP Log – HTTP search functionality that displays the results in separate panes. Unlike the filter operation, the Find in HTTP Log function can be applied after browsing to repeatedly search in the HTTP log.
    • Dynamic HTTP Header help – Comprehensive help for HTTP headers and status codes are available by simply pressing the F1-key.
    • Compare Requests – IEWatch allows comparing two requests using an external diff utility, for example Microsoft® WinDiff.
    • HTTP Notes – You can use notes to tag specific HTTP requests. Notes can be useful to relate HTTP requests to HTML pages.
    • HTTP Performance Charts – Use the Timeline Chart to spot performance bottlenecks and to tune the performance of your web site.
    • Automation Interface – You can use the automation interface to integrate IEWatch with your favorite testing framework.
    • Docking Windows – Configure your work area with Visual Studio® style docking windows.

    HTML Features


    • Tree view of the HTML structure – The tree view reflects exactly the structure of the HTML page even if the page contains many sub documents. You can drill down on HTML elements to display details on links, images, scripts, style sheets, applets, ActiveX objects and forms.
    • Page Summary – The Page Summary window displays statistical information on the web page including page load time and page weight.
    • Image List – IEWatch shows you the image size, height, width and the download time of the image in one glance.
    • HTML Designer – Allows visual HTML modification by clicking and editing items in the web page.
    • Rapid Prototyping – You can modify the HTML Style Sheets and Scripts of any web page to quickly test code or develop prototypes without having to create development environments.
    • Script Debugging – Use the Immediate window to trace debug messages, evaluate variables or issue commands.
    • Highlight HTML elements – Locate and highlight HTML elements in the HTML code window. This feature applies to any link, image, applet, ActiveX control or form element.
    • HTML Spotlight – This feature allows quick pinpointing of any element in the HTML code by directly clicking in the web page (Patent Pending).
    • Docking Windows – Configure your work area with Visual Studio® style docking windows.

    IEWatch Tools


    • Capture Screenshot – Take screenshots of a complete web page or Internet Explorer window and email or save the screenshot.
    • Window Transparency – You can apply transparency to the IE window which is useful for comparing a modified page or image to the original. Additionally you can apply transparency to the IEWatch window to monitor HTTP traffic while viewing the web page.
    • Resize IE Window – This tool allows developers to resize and fine tune web pages to different screen sizes.
    • Color Picker – You can pick the color of any pixel on the screen or you can choose a color in the color palette. This tool integrates seamlessly with the rapid prototyping features.

    Support is provided by e-mail through a web form. There is also an online FAQ.


  • Your Own


    And you can always build your own Browser Helper Object (BHO).