JavaScript/Native Interop Debugging in Visual Studio 2013

JavaScript/Native Interop Debugging in Visual Studio 2013

Rate This
  • Comments 15

Hello, I am Patrick Nelson, a developer on the Visual Studio Debugger Team.

Authoring apps that are using more than one language is not uncommon these days. For example, some developers prefer one language for the UI layer but use another language (or reuse components in another language) for their business logic. When debugging such apps, most of the time you are either debugging one language or the other (and you select which debugger type you want to use through the project properties), but sometimes you need to have the debugger attached to both. In other words, you want to be using both debugger engines at the same time. It is for this reason that in VS2012 Update 1 we enabled and blogged about interop debugging between Managed and Native code in the same app.

With Visual Studio 2013, we offer the same interop debugging capability for JavaScript and Native code, as I will describe in this blog post.

Visual Studio 2012 workaround

Before delving into the VS2013 experience, it is worth pointing out that even with Visual Studio 2012, it is possible to debug both code types of the same app simultaneously by starting debugging in one instance of Visual Studio, and then opening another instance of Visual Studio to attach to the same process but with a different debug engine selected (in the project properties)

There are some disadvantages to using this workaround including:

  1. You need to have two instances of Visual Studio running
  2. The instance of Visual Studio that is debugging JavaScript code will be unresponsive when the Visual Studio that is debugging native code is in break state.
  3. Breakpoints have to be set in the correct instance of Visual Studio
  4. Call stacks are for only one language so it is more difficult to understand the flow between JavaScript and Native code

Visual Studio 2013 experience

In Visual Studio 2013, we are introducing a new debugger type named “Native with Script”. This new debugger type is really what the name implies. It is essentially the Native debugger with some JavaScript support added. This means the “Native with Script” experience will give you the full Native debugging experience, but does not provide the full script debugging experience you will get with “Script Only” debugging. For example, the Watch window and DataTips do not have the same fidelity. Also note the DOM Explorer and JavaScript Console are not available when debugging Native with Script.

To select this new debugger type, go to project properties –> debugging and for “Debugger Type” select “Native with Script”

image

Now when you start debugging, you’ll notice the active script documents load in the solution view as they do when Script debugging:

clip_image003

It is also possible to set breakpoints both in your native code files an in the JavaScript files. When you hit breakpoints, you’ll see call stacks with both Native code and JavaScript code. In addition, it’s possible to view local variables in the “Locals” window when inspecting a JavaScript frame. This works when stopping at a native or JavaScript breakpoint.

image

A Concrete Example

Say we are debugging an app that crashes on startup. If we debug it with Script Only, all we see is an unhandled exception in WWAHost and the Visual Studio Just-In-Time debugger:

image

 

If we debug with Native only, we get a bit more information. We see a divide by zero first chance exception in FolderInfo.h by looking at the Output window. To see why we are getting the divide by zero error, we can temporarily enable break on divide by zero exception via Debug -> Exceptions:

image

image

Running it again with break on first chance exceptions thrown, we see the divide by zero error is being caused because m_ImageList->Size is zero. Unfortunately, the deep call stack provides no clue as to how we got here except that we came from jscript9.dll:

image

Using Native with Script we get more information. We can now see the JavaScript code on the call stack and see where we were in JavaScript code. We can see the call to folder.SampleImage and inspect the folder parameter via the Locals window. Notice we have the ability to inspect the native object even though we are currently looking at a JavaScript frame:

image

Here we see that the folder we are looking at is “Pictures” and there are no images in that folder. This is the cause of the divide be zero error. If we add a picture to the pictures folder the divide by zero exception goes away. We found and verified a possible fix.

By the way, now is a good time to turn off break on divide by zero exceptions so we don’t get extra noise during future debugging sessions.

In Closing

If you want to try this yourself, you can download the sample program I used to create this post.

We are actively looking for feedback on both this and other diagnostics features so please stop by our MSDN support forum and let us know what you think.

Attachment: Sample.zip
Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post
  • Will you also support debugging JavaScript and Managed code in the same solution?

  • Hello Mark,

    We are not currently planning to support debugging mixed mode debugging of JavaScript and Managed code in Visual Studio 2013.

    I created a request for this in User Voice.  If this is important for you, vote for it here:  visualstudio.uservoice.com/.../4168526-support-javascript-managed-mixed-mode-debugging

    Thank you for your feedback!

  • This feature sounded so cool. Much nicer than Firebug & similar browser based tools. So I spent the last few days searching for ways to get the Debug Menuitem to appear in the Project (or Solution) properties page. I installed & reinstalled VS2013, Tried heaps of projects to no avail.

    My Conclusion:

    This feature is not available for al C#+JavaScript dev. It doesn't work for Web Dev (ie: ASP.NET: MVC+Knockout)

    Patrick:   Can you confirm this feature only works with Windows Store projects?

    ( It is possible that is what Mark's comment is about. if so, was just a tad subtle for me. Given nearly all Web projects require some JS Debugging, I assumed .NET+Javascript as the main use case. With WinStore as a niche requirement. )  

  • Hello David,

    Thank you for the feedback!

    I'm not familiar with MVC+Knockout, but I assume you are running JavaScript code on the client side with C# code on the server side.  Let me know if this is not the case.

    The Visual Studio debugger already supports debugging C# server side code at the same time as JavaScript code on the client side.  You should be able to set (and hit) breakpoints in both your client side JavaScript code and your server side C# code while debugging your web project.

    This blog post has more to do with debugging JavaScript and C# code at the same time _in the same process_.  Currently this is only supported for Store Apps.  The reason is, when doing web development, developers are typically interested in debugging the JavaScript code running in the browser.  They rarely have the need to debug the browser itself at the same time.  There are some reasons besides store apps to support mixed mode debugging in one process such as debugging Silverlight in the browser or debugging server side JavaScript, but these scenarios are less common than typical client/server web development.

    -Patrick

  • Hey Patrick,

    I notice in your comment dated (11 Nov 2013 8:38 PM) that you state "The Visual Studio debugger already supports debugging C# server side code at the same time as JavaScript code on the client side."  That's exactly the situation I am in, but I can't get the debugger to catch on breakpoints in Visual Studio 2013.  Do you have any references for how to get this enabled?

    The specific issue is that "The breakpoint will not currently be hit. No executable code of the debugger's target code type is associated with this line. Possible causes include: conditional compiliation, compilier optimizations, or the target architecture of this line is not supported by the current debugger code type."

    Thanks in advance.

  • @ Scott

    Can you contact us at vsdbgfb@microsoft.com? This may be easier to troubleshoot over email.  It would be most helpful if you could provide detailed repro steps about what you are trying to do and the results you are seeing  (what type of project, does it happen for all the projects you tried or a particular one, what do you do - set a BP, F5, etc.) and a simple repro project.

  • Is this supported only for "Windows Store Apps"?

    I am trying to debug an application that hosts MSHTML/WebBrowser and having no success. When I attach (remotely) I still have to choose Native or Script but not both. No matter which one I choose, there's no project and thus no project properties window in which I can choose "Native with Script".

    Is is because this JS/Native interop is supported only with WWAHost.exe and not the general MDM/PDM case of Active Scripting?

    Do you have any suggestions for me?

  • Using VS2013, but the Configuration Properties under project property,  does not have "General" and "Debugging"

    Why?

  • @Alex

    This is only supported for Windows Store Apps unfortunately. If you would like it supported for other app types, would you mind logging a suggestion on visualstudio.uservoice.com

    Thanks,

    Maria Ghiondea

    Visual Studio Debugger

  • @Mel

    The Project properties pages are different depending on what project type you have. Can you give me more details about what you are trying to do, what's your project type, etc.

    Thanks,

    Maria Ghiondea

    Visual Studio Debugger

  • Well, I am working on a mobile app using MVC 5.0 and Bootstrap. I right mouse click on the solution in the Solution Explorer.

  • @Maria @Mel

    I'm having the exact same problem, I don't get the "General" or "Debugger" items, just "Configuration" item in that tree.  I really really want to take advantage of the script debugging, but this mystery has prevented me from using it.  My project is a Windows Phone + PhoneGap template I found online, it says "(Windows Phone 8 Silverlight 8)" in the project name, but it's wrapping an HTML5 app.  I'm using VS2013 Ultimate.

    Any ideas on why this project type doesn't give me the JavaScript debugging options?

  • These kinds of efforts on the part of the MSFT team are much-appreciated. They really do help - more so, I think, than the terribly dry formula-driven documentation. Before you post them, however, it might be a good idea to run them past the "terribly dry formula-driven" folks to avoid some of the more common errors.  As the comments are making clear, a few lines at the top of this article defining its scope would be helpful.

  • There is no Configuration Properties on the Web Application Property pages in my version of VS 2013. I have roamed through the property pages selections: Application, Compile, References, Web, Package/Publish Web, etc. and could not find the settings displayed above. I went back to alerts.

  • Hi David Coulter,

    I would suggest please install IE 11. I faced the same issue, it got fixed after installing IE 11.

Page 1 of 1 (15 items)