title: How do I Debug in functions using Visual Studio Debugger in source maps
body: <p>The Setup:</p>
  
  <p>Visual Studio 2013 update 5
  I am using Task Runner Explorer and the below gulp file from recipes:
  <code></p>
  
  <pre><code>'use strict';
  var watchify = require('watchify');
  var browserify = require('browserify');
  var gulp = require('gulp');
  var source = require('vinyl-source-stream');
  var buffer = require('vinyl-buffer');
  var uglify = require('gulp-uglify');
  var sourcemaps = require('gulp-sourcemaps');
  var gutil = require('gulp-util');
  var assign = require('lodash.assign');
  
  var customOpts = {
      entries: ['./app/controller.js'],
      debug: true
  };
  var opts = assign({}, watchify.args, customOpts);
  var b = watchify(browserify(opts));
  
  gulp.task('js', bundle); // so you can run `gulp js` to build the file
  b.on('update', bundle); // on any dep update, runs the bundler
  b.on('log', gutil.log); // output build logs to terminal
  
  function bundle() {
      return b.bundle()
        // log errors if they happen
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        // optional, remove if you don't need to buffer file contents
        .pipe(buffer())
        // optional, remove if you dont want sourcemaps
        .pipe(sourcemaps.init({ loadMaps: true })) // loads map from browserify file
           // Add transformation tasks to the pipeline here.
        .pipe(sourcemaps.write('./',{includeContent: false, sourceRoot: '../'})) // writes .map file
        .pipe(gulp.dest('./dist'));
  }
  </code></pre>
  
  <p></code>
  The below is from the html page containing a reference to my browserify bundled file:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I get the following source Maps and bundle.
  SourceMap:</p>
  
  <pre><code>{"version":3,"sources":["node_modules/browserify/node_modules/browser-pack/_prelude.js","app/controller.js","app/module.js"],"names":[],"mappings":"AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA;AACA","file":"bundle.js","sourceRoot":"../"}
  </code></pre>
  
  <p>Bundle:</p>
  
  <pre><code>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&amp;&amp;require;if(!u&amp;&amp;a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&amp;&amp;require;for(var o=0;o&lt;r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  require('./module.js');
  angular
      .module('app')
      .controller('myController', 
  
  function () {
      var vm = this;
  
      vm.title = 'test';
  
      activate();
  
      function activate() { }
  });
  
  function test() {
      var vm = 'test';
  }
  
  },{"./module.js":2}],2:[function(require,module,exports){
  angular.module('app', []);
  
  },{}]},{},[1])
  </code></pre>
  
  <p>I can debug successfully using the original files loaded through source maps in IE and chrome.</p>
  
  <p>The Problem:</p>
  
  <p>I cannot debug with script debugger within functions in the source mapped files but I can in the bundled file.</p>
  
  <p>Scripts
  <a href="https://i.stack.imgur.com/0hqAk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hqAk.png" alt="Scripts"></a></p>
  
  <p>Can't Debug in function in controller.js but can debug outside of controller function
  <a href="https://i.stack.imgur.com/4LS3X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4LS3X.png" alt="Can&#39;t Debug in function in controller.js but can debug outside of controller function"></a></p>
  
  <p>Can Debug Bundle.JS
  <a href="https://i.stack.imgur.com/oDLmf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oDLmf.png" alt="Can Debug in Bundlejs"></a></p>
  
  <p>Let me know if you have any suggestions. Chrome and IE debugging works fine but a good percentage of our team debugs in visual studio.</p>