Chrome debugger doesn't work on typescript files

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.