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?

Tattler

Hi dude! have you found an asnwer to your question? im facing the similar thing but i made the js compilation with requirejs tools – Plectrum

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

Firebird

As the OP I was seeing that message because I was checking the generated JS... after checking these options you have to go select the associated file in the Filesystem panel and debug it. – Campbellbannerman

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.

Lothians

Answer 3

I believe your problem lies in how you defined the sourceRoot. Try something like sourceRoot: './typescript/'.

Aberrant