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

Issue

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

Solution

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!

Answered By - Gerd
Answer Checked By - - David Marino (ReactFix Volunteer)