In one of the last versions of Web Essential Tools, Microsoft released one of my favorite features for the web development. I’m talking about the opportunity to create a bundle resource at runtime with the support of SourceMap.
The first step to try this cool feature is to install the Visual Studio plugin so, download it from here
After the installation Visual Studio offers you new features that are not available in the standalone version. In fact, after right clicking on a web resource (css, js, etc) in the solution explorer, you have a new “item” named Web Essential:
What I love most in this extension is the easy way to create the combined and minified resources (really, I’m not in love with the web optimization packages included in ASP.NET MVC 4).
What does it give us?
As you can see in both items there is the SourceMap, but what is it?
I think that feature is a killer feature for frontend developers because some errors happened in production and, in some cases, you are not able to reproduce them during the tests.
The first things is to enable that features in chrome, so:
From now, every time you change and save the files you selected for the bundle, Visual Studio will automatically update it; it means that minified and source map will always be up to date with the original resources without doing anything special (How f..ing cool is that?).
As you can see in the image below there are more files that I’ve included in my page (see previous screenshots).
Chrome understands this behavior and shows you the source files (only if you use the developer tools bar).