Chrome debugger not working with typescript files

Question

I am using webstorm 2016.2, angular-cli, webpack2. In the photo, I cannot create a break point on lines 19,20,22,23. When I create line 21, the console does not print what I told him on line 19.

I see a ts file that should be debugged, but it looks like I'm debugging another file or js file that I do not have access to.

I would like to debug the ts file if possible, and if not, then 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 at compile time, and ultimately it is a javascript file that loads in a web browser. your browser does not know about typescript .

ts ---> js (es5).

When the debugger starts, it runs the corresponding compiled js file. if there is any error, it points to the js file, and you are mapped to ts line number of the file (where the error occurred) using .d.ts inside.

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

Answer 2

If you want to use tools in TypeScript files, you usually need to create map files at the same time as TypeScript is compiled.

Map files contain information on how to link the source .ts file to the compiled .js file. Tools such as debuggers often need these files to work with .ts files.

Someone explained it here .

In addition, if you do not want to generate an additional file for these mappings, the TypeScript compiler allows you to add this data directly at the end of the compiled files using --inlineSourceMap .

Here I think that Chrome does not find map files.

Answer 3

Chrome perfectly debugs, allows you to fix breakpoints and print log messages. I think the problem is in your tsconfig.json . As mentioned in another answer, you should generate js files at compile time. To let the compiler know about this, you must add:

  "compileOnSave": true 

This will start compiling your typescript immediately after saving it.

And, if it still does not work, clear the browser cache and restart the browser. This will undoubtedly do the magic.

Hope this helps. (My version of Chrome: 52.0.2743.116 m (64-bit) -> but that doesn't really matter)