It's very simple to debug a typescript app in chrome debugger. You setup the tsconfig.json:

"sourceMap": true,

than install ts-node set a breakpoint in your ts code with "debugger;"

After start my app with

node --inspect -r ts-node/register ./src/my_app.ts

and now I'm in the chrome debugger.

How work this on the react typescript demo project???

npx create-react-app@next webclient --template typescript

CodePudding user response：

npx create-react-app@next webclient --template typescript

webclient/tsconfig.json add

"compilerOptions": {
    ...
    "sourceMap": true,
    ...
}

run at webclient dir

npm start

app is open at http://localhost:3000

open chrome developer tools with 'inspect'

choose "sources" tab

open under "localhost:3000" your local "src" dir

now open App.tsx

You see the source of demo code and you can here set breakpoints.

All changes on your code are hot deployed for easy development.

For firefox take the same way! Here you take the "Debugger" tab!