What makes it possible to debug typescript in chrome?

Question

What makes it possible to debug typescript in chrome when browser understands only Javascript? I always debug my typescript files in my angular project created using angular CLI from chrome developers tool, however I don't know the reason how we are able to debug typescript files. Can someone explain it to me?

Please refer to this answer: https://stackoverflow.com/a/51443584/6923507 — Adnan Abdul Khaliq, Jul 20 '18 at 13:53
see this link https://stackoverflow.com/questions/46714537/chrome-debug-angular-typescript-how-to-navigate-to-ts-file/51941277#51941277 — kumar chandraketu, Aug 21 '18 at 03:51

score 20 · Accepted Answer · answered Aug 20 '17 at 16:42

Angular CLI uses webpack. When webpack transpiles your TS to JS, it can be be configured (and is by default) to generate source maps as well. This is how Chrome is able to tie the javascript code back to typescript for debugging.

Example tsconfig.json generated by angular CLI:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true, <--- this right here
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

What makes it possible to debug typescript in chrome?

1 Answers1