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?

Answer 1

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