Monday, January 25, 2010

Fiddler to Help Debug an IE Dialog Page

This maybe a well-known tip for web developers, but I was not aware of it until recently I had a need to debug a dialog page of Microsoft Dynamics CRM, so I am trying to document it, which might help you if you ever need to do the same thing.

We all know that IE 8 has provided some great development features including script debugging, DOM inspecting, document validating, etc. All those features can be brought up by simply pressing F12 key. However, this hotkey DOES NOT work for a dialog page which is invoked by IE's proprietary function - window.showModalDialog().

I was pulling my hair out desperately the other day when I was in a urgent need to debug a CRM dialog page. I did ask my Google friend (or Bing if you prefer that way) at first thought, but I got nothing really useful.

Then I thought, wait a second, should I check if my favorite debugging tool – Fiddler is able to help? I am pleased that I have thought of it, though not in the first place.

Here are the steps that you can follow to debug a IE dialog page.
  1. Launch Fiddler, and make sure Capture Traffic option is selected. (It’s selected by default)
  2. Launch your IE browser, do whatever you need to do in order to bring up the dialog page.
  3. Go back to Fiddler, find the session of the dialog page, and right click on it (shown in the following screen shot). Then you select Copy –> Just Url menu option.
    Fiddler
  4. Launch a new IE session, paste the URL to the address bar, and press Enter key. You should know what to do next, all you need to do is to simply press F12 key, then you will be able to see the IE development tool, where you can do whatever you want to debug the dialog page.
    IEDialogDebugging
Small trick, hope it helps. BTW, it works for any IE dialog page.

[Update - Apr 11, 2010] I have discovered, there is an even more efficient way, you can simply click "Launch IE" on the toolbar after you have located the HTTP request session. This really proves that Fiddler is a great HTTP analysis tool with extraordinary features that we are not even fully aware.
Posted by Daniel Cai at 1/25/2010 10:17:00 pm
Labels:

3 comments:

  1. Simon Jackson4 February 2010 at 15:40

    Well done, I've havd this problem loads of times with IE dialogs. Never thought of using fidder (even though I had it installed!!). Genius!

    ReplyDelete
  2. Michael10 November 2010 at 03:30

    it's a usefull tip, thank u, but there is another way you can to enter debug mode in the modal window. If the modal window is opens by pressing any button, so ented to this button by the F12 tool, and type "debugger;" before the main function on "onClick" attribute.

    ReplyDelete
  3. Daniel Cai10 November 2010 at 08:05

    @Michael, my tip helps when you want to inspect the HTML code in the dialog page, not only just the script.

    ReplyDelete

Subscribe to: Post Comments (Atom)