CODEWITHSUNDEEP
node.jsreactjsvisual-studio-code
Nor
Nor

Reputation: 11

VS code debugging browser breakpoints unbound

I'm trying to debug my react app browser against my app server in vs code. Though the browser will launch the breakpoints are unbound. The index.js file has two files.

  1. Contains JSX syntax (full path/src/index.js)
  2. Contains the first file transformed to React.createElement('div') elements at build time (/src/index.js < path is relative to project root).

I can with some finagling, get breakpoints to stop on the compiled code in create element form which is hard to read, but not the source JSX tag style code which would be preferred.

The index.js file compiled and uncompiled plus the launch.json

1

Upvotes: 0

Views: 995

Answers (1)

Nor
Nor

Reputation: 11

The below URL gives the solution that took me two weeks to solve. I was using react webpack-dev-server, In my webpack.config.js file I put the following entry among other stuff like entry, output, modules

devtool: "source-map" // thats it!

https://trackjs.com/blog/debugging-with-sourcemaps/

Upvotes: 1

Related Questions