2690

DebugBar, Companion.JS And IETester


Some days ago a colleague of mine pointed out to me this tool (IETester) that allows testing the different rendering and JavaScript engines of Internet Explorer (5.5, 6, 7 and 8beta1) side by side with the installed version.


I haven’t tested IETester yet, but I found two other tools in the site that caught my attention: DebugBar and Companion.JS.


DebugBar is like other tools I use [^] with a few differences. DebugBar is an explorer bar (and docks on the left side of IE) and can’t be undocked but has a JavaScript console and tracks only the HTTP/HTTPS traffic that belongs to the visible web browser tab (IE 7). DebugBar can also spy on other instances of IE like Document Explorer or FeedDemon.


Companion.JS is a Firebug-like tool and was the one that liked the most because it gave me something that I hadn’t: something that kills those annoying scripting error dialogs.


Both DebugBar and Companion.JS claim to be JavaScript debuggers but I couldn’t find any way for setting breakpoints or running scripts step by step. Probably because I have Visual Studio installed on this machine.

Internet Explorer vs. FireFox

Until recent I had never used FireFox (FF) because Internet Explorer (IE) was good enough for me.

I don't do much web page development and because I own licenses for Visual Studio (VS), HTTPWatch and IEWatch (tried the Internet Explorer Developer Toolbar but it keeps bowing up and killing IE and I've seen Nikhil Kothari's Web Development Helper installed and doesn't work well when non US English characters are displayed) I never needed anything else.

Over the years I've seen all the campaigning against IE and promoting FF as a better, more standards compliant, more secure and what else.

A few days back I had to do some work with ASP.NET validation summary and validators and needed to check if it worked on FF.

Talk about disappointment:

  • FireBug is by far no better than the tools I've been using.
  • FF needs its own proxy configurations - For me, any application running on Windows that needs its own proxy settings it's just a badly developed application.
  • (I'm sure I'd find much more if I used it.)

IE isn't a good developer tool yet (not even in IE8 at this time [^]) and it should have been for a long time. Or, at least, VS should have better support HTML and CSS debugging.

But, on the other hand, Windows Internet Explorer is just another application built on top of the Web Browser Control[^] (which is part of the IE installation, but can be used by itself). You can build any Windows application that uses a Web Browser Control (I've built more than one). Looks like the same is not as simple with FF [^].

I don't intend to start a web browser war. I just wanted to state my disappointment. I guess FF fans set my expectation too high.

IE8 Beta 1 is out

If you want to download IE8 Beta 1 and test it, it's here. Read the Release notes and the IE8 Readiness Toolkit which will give a detailed description of the features.

If you have any feedback, use the feedback form, which allows you to submit bugs directly to the IE team!

Several updates have been made to the IE8: Technical Beta Program  available on connect. Check it out!

Also check out the IE team's blog:

Find As You Type for Internet Explorer

It astonishes me how something as simple as this is not part of Internet Explorer.

How To Close Browser Windows In Windows Internet Explorer 7

When a web page uses scripting to close a browser window that was opened by the user and not opened by some action on another page, Internet Explorer pops up a question to the user warning that "The webpage you are viewing is trying to close the tab." (in this case, Internet Explorer 7) and asking the user for permission to close the tab.

Before Internet Explorer 7, all that was needed to do was setting the window.opener property to a non null value:

window.opener = self;
window.close();

Unfortunately, Internet Explorer 7 isn't fooled by this. Internet Explorer 7 knows if the window was opened by the user or not, regardless the value of the window.opener property.

Fortunately, Internet Explorer can still be fooled:

window.open("","_self");
window.close();

Going one step further, if you want all your calls to the window.close method to work this way, you can change the method implementation like in the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    // Save a reference to the original method.
    var windowClose = window.close;

    // Re-implement window.open
    window.close = function ()
    {
        window.open("","_self");
        windowClose();
    }
    </script>
</head>
<body>
<input type="button" value="Close Me!" onclick="window.close()" />
<input type="button" value="Close Me!" onclick="windowClose()" />
</body>
</html>

WebBrowserControl for the .NET Framework 1.1 Updated

"My" WebBrowserControl for the .NET Framework 1.1 has been updated.

A few bugs were fixed and a few changes were made to the API (still thinking of a .NET 2.0 version).

I managed to solve all the problems with the design time but, unfortunately, the PropertyGrid throws an exception when the WebBrowserControl is bound to it:

System.NullReferenceException: Object reference not set to an instance of an object.
   at System.Windows.Forms.PropertyGridInternal.GridEntry.Create(PropertyGridView view, Object[] rgobjs, IServiceProvider baseProvider, IDesignerHost currentHost, PropertyTab tab, PropertySort initialSortType)
   at System.Windows.Forms.PropertyGrid.UpdateSelection()
   at System.Windows.Forms.PropertyGrid.RefreshProperties(Boolean clearCached)
   at System.Windows.Forms.PropertyGrid.Refresh(Boolean clearCached)
   at System.Windows.Forms.PropertyGrid.set_SelectedObjects(Object[] value)
   at System.Windows.Forms.PropertyGrid.set_SelectedObject(Object value)

Does anyone have a clue?

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).

    IE 7 is out

    Windows Internet Explorer

    Download: IE7 Final For Windows XP 32-Bit
    http://download.microsoft.com/download/3/8/8/38889DC1-848C-4BF2-8335-86C573AD86D9/IE7-WindowsXP-x86-enu.exe

    Download: IE7 Final For Windows Server 2003 32-Bit
    http://download.microsoft.com/download/D/1/3/D1346F12-F3A0-4AC6-8F5C-2BEA2A184957/IE7-WindowsServer2003-x86-enu.exe

    Download: IE7 Final for Windows XP/Server 2003 64-Bit
    http://download.microsoft.com/download/1/1/4/114D5B07-4DBC-42F3-96FA-2097E207D0AF/IE7-WindowsServer2003-x64-enu.exe

    WebBrowserControl for the .NET Framework 1.1

    Finally, I published "my" WebBrowserControl for the .NET Framework 1.1.

    I wanted to do a nice article on the buts, hows and whys, but never got the time for it. And since .NET 3.0 is knocking on our door, pretty soon no one will care about .NET 1.1 stuff.

    I've already done some work to port it to .NET 2.0. My wish was to enhance the WebBrowser control supplied, but they made it near impossible to extend.

    Once more, many thanks to Igor Tandetnik, João Melo, Luís Abreu, Oleg Mihailik and many more.