As a web application developer there are times when it becomes necessary to debug JavaScript.
Up until Internet Explorer 7, it was simply a matter of placing a breakpoint in the JavaScript file and pressing F5 in Visual Studio.
Unfortunately, as of Internet Explorer 8 things changed and the Visual Studio debugger stopped working for pop-up windows.
I tried attaching to the iexplore.exe process using the Attach to Process dialog but had mixed results with the debugger not attaching most of the time.
I finally decided that I needed to figure out a way to get debugging of JavaScript to work with Visual Studio even for pop-up windows.
The first technique I discovered to achieve Visual Studio debugging of JavaScript in a pop-up window was the debugger command.
The debugger command only works in Internet Explorer and triggers the Just-In-Time debugger window of Visual Studio when the code execution hits the statement.
The following is an example of how the debugger command works:
(click to view the image full size)
The Just-In-Time debugger window will allow you to select an open solution or to open a new instance of Visual Studio as shown below:
(click to view the image full size)
Once in Visual Studio you can debug as per normal.
(click to view the image full size)
This is an interesting way to achieve debugging in a pop-up window but is not a method that I recommend.
If you do use it, I highly recommend that you create some sort of process to ensure the command doesn’t make it into production code (wrap it in some sort of debug statement that will be pulled from the release code or have a checklist of things to search for in the files to remove).
Although the debugger command was a bit of a breakthrough in achieving Visual Studio debugging of JavaScript code from a pop-up window of Internet Explorer 8, I felt there had to be a better way.
I knew that debugging worked for the main html forms when you press F5 in Visual Studio but it stopped working for pop-up windows.
Having examined the processes that were running when a pop-up window is displayed, I also knew that each window of Internet Explorer appeared to spawn a new process.
(click to view the image full size)
My first thought was that the process with the title of the pop-up window must be the one I need to attach the debugger to. As it turns out this was not the case and the process with the title is simply the last window to have the focus before I displayed the attach to process dialog.
Looking at the iexplore.exe processes and I noticed something.
When I start the web application in debugging mode, the process I attach to is 'Script' while the process with the title of the last window that had the focus only has the process type of 'x86'.
(click to view the image full size)
As it turns out, when attaching to a window in Internet Explorer to do JavaScript debugging, the processes you want to attach to are the ones with the type of 'Script, x86'. If you’re not sure which process you need to attach to, you can select all processes of type 'Script, x86'.
So in summary what appears to happen is that Internet Explorer 8 uses one process (x86) to control the browser itself. Each html window/tab is then given its own process (Script, x86).
You can cause an html page to trigger the Just-In-Time debugger of Visual Studio using the debugger command but I highly recommend against that approach due to the possibility of the command accidentally making it into production code.
To attach to a running process of Internet Explorer 8, simply use the Attach to Process dialog in Visual Studio and select the one or more iexplore.exe processes that are of type 'Script, x86' (IE 8 64-bit processes will be 'Script, x64').
Up until Internet Explorer 7, it was simply a matter of placing a breakpoint in the JavaScript file and pressing F5 in Visual Studio.
Unfortunately, as of Internet Explorer 8 things changed and the Visual Studio debugger stopped working for pop-up windows.
I tried attaching to the iexplore.exe process using the Attach to Process dialog but had mixed results with the debugger not attaching most of the time.
I finally decided that I needed to figure out a way to get debugging of JavaScript to work with Visual Studio even for pop-up windows.
The Debugger Command
The first technique I discovered to achieve Visual Studio debugging of JavaScript in a pop-up window was the debugger command.
The debugger command only works in Internet Explorer and triggers the Just-In-Time debugger window of Visual Studio when the code execution hits the statement.
The following is an example of how the debugger command works:
(click to view the image full size)
The Just-In-Time debugger window will allow you to select an open solution or to open a new instance of Visual Studio as shown below:
(click to view the image full size)
Once in Visual Studio you can debug as per normal.
(click to view the image full size)
This is an interesting way to achieve debugging in a pop-up window but is not a method that I recommend.
If you do use it, I highly recommend that you create some sort of process to ensure the command doesn’t make it into production code (wrap it in some sort of debug statement that will be pulled from the release code or have a checklist of things to search for in the files to remove).
Although the debugger command was a bit of a breakthrough in achieving Visual Studio debugging of JavaScript code from a pop-up window of Internet Explorer 8, I felt there had to be a better way.
I knew that debugging worked for the main html forms when you press F5 in Visual Studio but it stopped working for pop-up windows.
Having examined the processes that were running when a pop-up window is displayed, I also knew that each window of Internet Explorer appeared to spawn a new process.
(click to view the image full size)
Attach to Process dialog
My first thought was that the process with the title of the pop-up window must be the one I need to attach the debugger to. As it turns out this was not the case and the process with the title is simply the last window to have the focus before I displayed the attach to process dialog.
Looking at the iexplore.exe processes and I noticed something.
When I start the web application in debugging mode, the process I attach to is 'Script' while the process with the title of the last window that had the focus only has the process type of 'x86'.
(click to view the image full size)
As it turns out, when attaching to a window in Internet Explorer to do JavaScript debugging, the processes you want to attach to are the ones with the type of 'Script, x86'. If you’re not sure which process you need to attach to, you can select all processes of type 'Script, x86'.
Summary
So in summary what appears to happen is that Internet Explorer 8 uses one process (x86) to control the browser itself. Each html window/tab is then given its own process (Script, x86).
You can cause an html page to trigger the Just-In-Time debugger of Visual Studio using the debugger command but I highly recommend against that approach due to the possibility of the command accidentally making it into production code.
To attach to a running process of Internet Explorer 8, simply use the Attach to Process dialog in Visual Studio and select the one or more iexplore.exe processes that are of type 'Script, x86' (IE 8 64-bit processes will be 'Script, x64').