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"
    ]
  }
}

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"
    ]
  }
}

• javascript
• debugging
• angular
• typescript
• google-chrome-devtools

4 Answers 4

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.

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.

I am using react native & typescript and my debug points stopped working all of a sudden so I thought it was an issue with the sources maps. It turned out in my scenario it had nothing to do with typescript's source maps but it was due to the chrome debugger/react-native-debugger caching some of the files and simply stopping the cache fixed my debug points. The actual solution can be found here https://github.com/jhen0409/react-native-debugger/issues/423 so on the surface it looked like a typescript issue and that led me on a rabbit hole. So to save others some time I am leaving this here because the title is literally what I googled first when I ran into this issue.

Chrome perfectly debugs, allow sticking up breakpoints and prints log messages. I think, the problem is in your tsconfig.json. As other answer mentioned, you have to generate js files at the time of compile itself.. To let the compiler know about this you have to add:

 "compileOnSave": true

This will start compiling your typescript immediately after you save it.

And ya, if it still doesn't work, clear your browser's cache and restart browser. This will surely do the magic.

I hope it helps. (My Chrome version: 52.0.2743.116 m (64-bit)-> but that does not really matter)