Visual Studio 2015 Unsupported format of the sourcemap

Question

I am trying to debug the JavaScript source files. But unable to debug. Breakpoints are not working as expected.

I am using grunt to concatenate and minify the files. Sourcemap is generated also.

I tried debugging directly in chrome with f12: works I tried debugging directly in ie11 with f12: works But fails in Visual Studio 2015 JavaScript debugging.

Unsupported format of the sourcemap

Investigated further, I have seen the above line in immediate window.

So tried commenting the following line

//# sourceMappingURL=Country.js.map

The error goes away. And obviously that's not the fix, but I did that to narrow down the issue.

My gruntfile.js

module.exports = function (grunt) {
// load Grunt plugins from NPM
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// configure plugins
grunt.initConfig({
    uglify: {
        country: {
            options: {
                sourceMap: true,
                sourceMapName: 'wwwroot/Scripts/Country.js.map'
            },
            files: { 'wwwroot/Scripts/Country.js': ['wwwroot/Scripts/Source/**/Country*.js'] }
        },
        cities: {
            options: {
                sourceMap: true,
                sourceMapName: 'wwwroot/Scripts/City.js.map'
            },
            files: { 'wwwroot/Scripts/City.js': ['wwwroot/Scripts/Source/**/City*.js'] }
        }
    },

    watch: {
        scripts: {
            files: ['wwwroot/Scripts/Source/**/*.js'],
            tasks: ['uglify']
        }
    }
});

// define tasks
grunt.registerTask('default', ['uglify', 'watch']);};

My folder structure

See the attached image to see my scripts and setup.

I tried 3+ hours spending on narrowing down the issue. If I solve this issue I will update here sure. I tried googling the term all possibilities "Unsupported format of the sourcemap" "Visual Studio" sourcemap debug JavaScript.

Answer 1

Still the issue is not solved. But my objective is to debug from Visual Studio 2015.

Instead of debugging the minified files I went ahead and used environment tag helpers to render source Javascripts without minification.

It may not be the answer to the original question, but if it helps for anyone looking for a way to debug. Then this can be a better option.

<environment names="Development">
    @section headscripts {
        <script src="~/Scripts/Source/AngularApps/CountryManager.js"></script>
        <script src="~/Scripts/Source/Controllers/CountryController.js"></script>
        <script src="~/Scripts/Source/Services/CountryService.js"></script>
    }
</environment>
<environment names="Staging,Production">
    @section headscripts {

        <script src="~/Scripts/Country.min.js"></script>
    }
</environment>