Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debug a modal dialog (showModalDialog) in IE

I want to debug (examine DOM, use the interactive JS console, etc) part of a web application that is inside a modal dialog that was created by showModalDialog().

I can't find a way to use the standard IE-8 developer tools for this; The dialog doesn't have a toolbar and the usual shortcut (F12) doesn't work.


Another SO question (I unfortunately have lost the link to) suggested that the only solution is to (perhaps temporarily) replace showModalDialog() with an old-fashioned window.open(). If this is the case, is there a straightfoward way to do it?

Caveats:

  • The app cares about passing dialogArguments and the return value of showModalDialog
  • I can't use other browsers, FF+Firebug, etc.
like image 846
hugomg Avatar asked Feb 05 '11 18:02

hugomg


People also ask

What is showModalDialog?

When Windows Internet Explorer opens a window from a modal or modeless HTML dialog box by using the showModalDialog method or by using the showModelessDialog method, Internet Explorer uses Component Object Model (COM) to create a new instance of the window.

What is the difference between a modal and a dialog?

Modal windows, by their nature, are compulsory and require the user to act immediately. Since the dialogs place the system in a different mode, users cannot continue what they are doing until they acknowledge the dialog.

Is modal dialog is blocking window?

A modal window blocks all other workflows in the top-level program until the modal window is closed, as opposed to modeless dialogs that allow users to operate with other windows. Modal windows are intended to grab the user's full attention.


4 Answers

F12 works to bring up the developer tools if you turn the address bar on.

Go Tools / Internet options / Security / (pick the right zone for your site) / Custom Level Under "Miscellaneous" Under "Allow websites to open windows without address or status bars", choose "Disable".

Source: https://stackoverflow.com/a/10984858/79835

like image 197
row1 Avatar answered Oct 09 '22 10:10

row1


i do it by creating an error in the js code, which then brings up the error window asking if you want to debug the script.

one way to do that would be to call a non-existent method somewhere in the code.

e.g. blabla();

like image 22
H77 Avatar answered Oct 09 '22 08:10

H77


You can now put the word debugger without quotes in your javascript.

IE and Chrome should both break on it as if you had set a breakpoint on it. Make sure its on a line by itself. Press F12 to open the browser debugger and then refresh your page or trigger the event to run your javascript and the debugger should automatically display the code with the breakpoint set.

like image 32
Bill Avatar answered Oct 09 '22 08:10

Bill


What I do when i'm debugging modal windows are two things.

  • You can include in your js code the instruction debugger; that will stop the js execution as if you had put a breakpoint.
  • You can also open the ie developer tools before opening the modal window and, once it's open, you can review the generated code in the script tab, adding breakpoints, pausing execution,... everything you need.

Hope it helps!

like image 24
albervera Avatar answered Oct 09 '22 09:10

albervera