title: Debugging a simple Typescript app in a Browser using VSCode
body: <p>I am building my first typescript project (my background is C#, Java).The apps works as expected, but i can't put a break point in typescript and debug the application. </p>
  
  <p>Also when i use pure typescript compiler  (tsconfig with tsc.exe) the mapping works perfectly. I am using gulp since i want to bring all js into one file.</p>
  
  <p>When there is a mistake in the generated js, then visual studio code is hitting the break point in js file (bundle.js) instead of typescript, however custom break points never work</p>
  
  <p>I am using windows 10 for development.</p>
  
  <p>Please find my code below.</p>
  
  <p>The HTML</p>
  
  <p>index.html
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;Hello World!&lt;/title&gt;        
          &lt;!-- &lt;script data-main="main" src="scripts/require.js"&gt;&lt;/script&gt; --&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p id="greeting"&gt;Loading ...&lt;/p&gt;
          &lt;script src="bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Type scripts</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { Student } from "./student";
  
  class Startup {
      public static main(): string {
        return Startup.showHello();
      }
  
     public static showHello() : string {
       var std = new Student();
        return std.GetText();
      }
  }
  
  document.getElementById("greeting").innerHTML = Startup.main();;
  </code></pre>
  
  <p><strong>student.ts</strong></p>
  
  <pre><code>export class Student
  {
     public GetText() : string
     {
         return "Hi from VB ggggggggggg";
     }
  }
  </code></pre>
  
  <p><strong>Gulpfile.js</strong></p>
  
  <pre><code>'use strict';
  
  var gulp = require("gulp");
  
  var ts = require("gulp-typescript");
  var tsProject = ts.createProject("tsconfig.json");
  
  var browserify = require("browserify");
  var source = require('vinyl-source-stream');
  
  var tsify = require("tsify");
  var uglify = require('gulp-uglify');
  var sourcemaps = require('gulp-sourcemaps');
  var buffer = require('vinyl-buffer');
  
  var paths = {
      pages: ['src/*.html']
  };
  
  gulp.task("copy-html", function () {
      return gulp.src(paths.pages)
          .pipe(gulp.dest("dist"));
  });
  
  gulp.task("default", ["copy-html"], function () {
  
      return browserify({
          basedir: '.',
          debug: true,
          entries: ['src/student.ts','src/main.ts'],
          cache: {},
          packageCache: {}
      })
      .plugin(tsify)
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest("dist"));  
  }); 
  </code></pre>
  
  <p><strong>tsconfig.json</strong> (i believe this file is not needed since we use gulp to compile, When using pure typescript compile the break points work as expected)</p>
  
  <pre><code>{
      "compilerOptions": {
          "module": "commonjs",
          "outDir": "dist",
          "target": "es5",
          "sourceRoot": "src",
          "noImplicitAny": true,
          "removeComments": true,
          "preserveConstEnums": true,
          // "outFile": "dist/bundle.js",
          "sourceMap": true
      },
      "include": [
          "src/**/*.ts"
      ],
      "exclude": [
          "node_modules",
          "**/*.spec.ts"
      ]
  }
  </code></pre>
  
  <p><strong>also launch.js</strong></p>
  
  <pre><code>{
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
          {
              "type": "chrome",
              "request": "launch",
              "name": "Launch Chrome",
              "url": "http://localhost:8080/index.html",
             "sourceMaps": true,
             "webRoot": "${workspaceRoot}/dist",
  
          },
          {
              "name": "Launch localhost with sourcemaps",
              "type": "edge",
              "request": "launch",
              "url": "http://localhost:8080/index.html",
              "webRoot": "${workspaceRoot}/dist",
              "sourceMaps": true
          },
      ]
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hr3ve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hr3ve.png" alt="enter image description here"></a></p>