Working Visual Studio Code Debugger with vscode-chrome-debug sample

.gitignore

@@ -59,3 +59,6 @@ npm-debug.log
 # IDE #
 .idea/
 *.swp
+
+# VS Code
+.vscode/chrome/

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000/",
+      "sourceMaps": true,
+      "diagnosticLogging": true,
+      "webRoot": "${workspaceRoot}/dist",
+      "userDataDir": "${workspaceRoot}/.vscode/chrome"
+    },
+    {
+      "name": "Attach Chrome",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9222,
+      "sourceMaps": true,
+      "diagnosticLogging": true,
+      "webRoot": "${workspaceRoot}/dist"
+    }
+  ]
+}

package.json

@@ -94,7 +94,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1",
-    "webpack-md5-hash": "^0.0.5"
+    "webpack-md5-hash": "^0.0.5",
+    "write-file-webpack-plugin": "^3.1.8"
   },
   "repository": {
     "type": "git",

webpack.config.js

@@ -11,6 +11,7 @@ var helpers = require('./helpers');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+var WriteFilePlugin = require('write-file-webpack-plugin');
 
 /**
  * Webpack Constants
@@ -47,7 +48,8 @@ module.exports = {
   //
   // See: http://webpack.github.io/docs/configuration.html#devtool
   // See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
-  devtool: 'cheap-module-eval-source-map',
+  // Note: Changed from 'eval' to 'inline' for Visual Studio Code Debugger
+  devtool: 'cheap-module-inline-source-map',
 
   // Cache generated modules and chunks to improve performance for multiple incremental builds.
   // This is enabled by default in watch mode.
@@ -106,8 +108,27 @@ module.exports = {
     // inside the output.path directory.
     //
     // See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
-    chunkFilename: '[id].chunk.js'
+    chunkFilename: '[id].chunk.js',
 
+    // Filename template string of function for the sources
+    // array in a generated SourceMap.
+    //
+    // See: http://webpack.github.io/docs/configuration.html#output-devtoolmodulefilenametemplate
+    devtoolModuleFilenameTemplate: function (info) {
+      var resourcePath = info.absoluteResourcePath;
+      if (resourcePath.indexOf(__dirname) !== 0) {
+        // Normalize resouce path if it is not an absolute path
+        // (e.g. 'node_modules/rxjs/Observable.js')
+        resourcePath = helpers.root(resourcePath);
+      }
+      if (resourcePath.charAt(0) === '/') {
+        // Mac OS X absolute path has a leading slash already
+        // https://github.com/Microsoft/vscode-chrome-debug/issues/63#issuecomment-163524778
+        return 'file://' + resourcePath;
+      } else {
+        return 'file:///' + resourcePath;
+      }
+    }
   },
 
   // Options affecting the normal modules.
@@ -218,8 +239,17 @@ module.exports = {
     //
     // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
-    new webpack.DefinePlugin({'ENV': JSON.stringify(METADATA.ENV), 'HMR': HMR})
+    new webpack.DefinePlugin({'ENV': JSON.stringify(METADATA.ENV), 'HMR': HMR}),
 
+    // Plugin: Write File Plugin
+    // Description: Write bundle files for debugging.
+    // Forces webpack-dev-server program to write bundle files to the file system.
+    //
+    // For use in conjuction with Visual Code debugger.
+    //
+    // See: https://github.com/AngularClass/angular2-webpack-starter/issues/297#issuecomment-193989148
+    // See: https://github.com/gajus/write-file-webpack-plugin
+    new WriteFilePlugin()
   ],
 
   // Static analysis linter for TypeScript advanced options configuration
@@ -245,7 +275,8 @@ module.exports = {
     watchOptions: {
       aggregateTimeout: 300,
       poll: 1000
-    }
+    },
+    outputPath: helpers.root('dist')
   },
 
   // Include polyfills or mocks for various node stuff