Chrome debugger doesn't work on typescript files

Question

I'm using webstorm 2016.2, angular-cli, webpack2. In the photo, I can't create a breaking point on lines 19,20,22,23. When I create on line 21, the console does not print what I told him in line 19.

I'm seeing ts file that should be debugged but It seems I'm debugging other file or the js file that I do not have any access to.

I would like to debug the ts file if possible and if not, the js file.

angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "store-app-02"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+",
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }
}

Answer 1

your ts code is converted to js during compile time and eventually it is javascript file which get loaded in web browser. your browser doesn't know about typescript.

ts ---> js (es5).

When debugger runs it is going to run respective compiled js file. if there is any error it points to js file and you are mapped to ts file line-number (where error occured) with help of .d.ts internally.

if you want to debug, you can use karma test runner or use visual studio code which exclusively provides debug option.

Answer 2

If you want to be able to use tools on TypeScript files, you'll generally need to generate map files at the same time you compile your TypeScript.

Map files contains information about how to link the original .ts file with the compiled .js file. Tools like debuggers will often need these files to be able to act on .ts files.

Someone explained it here.

Also, if you don't want to generate an extra file for these mappings, the TypeScript compiler lets you add these information directly at the end of the compiled files, using the --inlineSourceMap.

Here, I think that Chrome doesn't find the map files.