How can I debug the typescript react demo app in chrome?

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

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 contextmenu of page 'inspect'

choose "sources" tab and look there on "Page" tab on left side

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!

You can use this debugging way for every react app!