Unable to debug Typescript (source) files in Firefox

Question

Ok, I created a basic Angular 2 Typescript project using 5 Min QUICKSTART and it's up and running.

My typescript transpiller is configured to create source map:

tsconfig.js

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Now I can see the *.ts files in Chrome and can debug them as well with no issue. But Firefox (and FireFox Developer Edition for that matter) not at all showing the .ts files even though the "Show Original Sources" is checked in the debugger options.

Blasius

I see them in FF (47.0) but not in Chrome (51.0.2704.103) – Thinia

Answer 1

It will work for Firefox if you will specify sourcemap with a full path in compiled js file:

//# sourceMappingURL=http://localhost:3000/app/app.component.js.map

It seams like Firefox can not work with relative paths.

NOTE: Chrome will not work with full path

Humberto

Answer 2

Hi Saurabh Palatkar, Please Follow this below link. It may helpful to fulfill your need. http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx

Feck

Answer 3

You need to add this commented line to your source code

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Maybe try adding:

"typeCheck": true,

Introgression