如何在Visual Studio 2013中调试JavaScript

Question

We are trying to build a Windows 8 native application using JavaScript. We are using jQuery to dynamically load the javascripts files, and all the javascript files are stored inside of the app. When I try to debug the javascript, the breakpoint can't hit, saying "The breakpoint will not currently be hit....", but in the Solution Explorer, there is a Script Documents project, there is a file called "script block", which contains all the javascripts which are loaded from jQuery. I can debug from there after I disable the "Enable Just My Code", but it's difficult to find the right place to put breakpoint, since this file is huge...

Actually all the javascript files are having sourcemap attribute, for example: //# sourceURL=ms-appx://d664ef20-6ac8-11e4-ab78-2f4dc8b50d53/www/resources/abc.js

It is working fine with all the browsers, IE, Safari, Firefox and Chrome. But Visual Studio seems not be able to recognize them.

Anyone who has the same issue?

Regards, Xiaojun

Answer 1

I expect you are doing this, which evals the contents as a string, causing the string to be added to the "eval code" file under Script Documents. Note, you can still set breakpoints, you just have to do it from the "eval code" document.

// eval via AJAX -- adds to the "eval code" document
$.ajax("./js/fileToAdd.js").done(function (data) {
    window.eval(data);
});

If you load the file via a script tag, the script file is loaded separately and breakpoints bind as expected because the contents are tied to the file and not a string. Here's how:

// Add <script> tag to head -- Causes script file to be loaded/displayed individually
var scriptTag = document.createElement("script");
scriptTag.src =  "./js/fileToAdd.js"
document.head.appendChild(scriptTag);