ASP.NET: JavaScript Source Maps with Microsoft Ajax Minifier

3 days back jQuery announced release of jQuery 1.9. One of the great things with this release is that it is shipped with Source Maps. However in general there are very rare scenarios where we require to debug jQuery but still this would be really helpful to vast community specially contributor.

Now as a being web developer (more specific ASP.NET developer), first question arise is that how do I generate JavaScript source map for my custom component or JavaScript library in visual studio and ASP.NET application? So here in this post we will see how to configure ASP.NET web application to generate minified version of JavaScript and JavaScript source map at build time.

To get started, download & install Microsoft Ajax Minifier. Microsoft Ajax Minifier enables us to minify JavaScript and CSS. It also included Visual Studio build task so we can minify JavaScript and CSS at build time. Microsoft Ajax Minifier also supports source map generation. Naming convention for source map is output-min-filename.map.

So to see it in action follow the below quick step and get sample ready!

Create web application project
Add your JavaScript component file to project

Open .csproj file in editor and add build task as mentioned below

Now build project and open windows explorer and navigate where JavaScript file is located. Here we can see generated minified file along with source map