Typescript + gulp-sourcemaps generates map but browser DevTools don't recognize it

Question

Using Typescript 1.8, Gulp 3.9.0, gulp-sourcemaps 1.6.0, and a tsconfig.json file.

At one point a long time ago this was working fine. Of late (and I can't pinpoint when), neither Chrome nor Firefox will actually use the sourcemap.

I've enabled sourcemaps on Chrome, and recognizes that there's a sourcemap, telling me in the console:

"Source Map detected. Associated files should be added to the file tree. You can debug these resolved source files as regular JavaScript files. Associated files are available via file tree or Ctrl + P."

However, the source files are not available through either method.

Built File Structure on local build (just using Login as an example):

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

However, Chrome only shows this in the file tree:

build
  |- resources
      |- js
         |- app.js

That's it. No Typescript folder, no files. Ctrl-P doesn't find them either. So when I'm debugging, I can only debug the compiled app.js file rather than see the Typescript code.

My gulp file relevant sections:

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // instead of gulp.src(...)
        .pipe( sourcemaps.init() )
        .pipe( ts( tsProject ) );

    return tsResult.js
        .pipe( sourcemaps.write( '.', 
             {
               includeContent: false, 
               sourceRoot: 'typescript'
             }) 
         )
        .pipe( './build' )
        ;
} );

I've looked at various documentation and solutions for similar situations but I'm still not getting Chrome to use the sourcemaps.

https://www.npmjs.com/package/gulp-sourcemaps

https://github.com/ivogabe/gulp-typescript/issues/201

https://github.com/floridoo/gulp-sourcemaps/issues/89#issuecomment-73184103

gulp-typescript: Problems using createProject ... "and much more!"

No idea why this isn't working correctly. Any insight, Stackers?

Answer 1

In chrome dev Tools open settings (F1 in windows).

Make sure that options:

Sources:

• Automatically reveal files in navigator
• Enable JavaScript source maps

are checked

Answer 2

Probably not exactly what you are looking for, I personally use webpack and source-map-loader and able to get the source map shown correctly, albeit under "webpack://"

You can check out my configuration at https://github.com/unional/aurelia-logging-color

Hope it helps.