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.
- Launch Fiddler, and make sure Capture Traffic option is selected. (It’s selected by default)
- Launch your IE browser, do whatever you need to do in order to bring up the dialog page.
- 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.
- 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.
[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.