debug jsx file in chrome, is it possible

Question

How can I debug jsx in chrome? (using webpack.config & react.js) Im using chrome extension for react and I can see the components I created but can debug only the output js file

Possible duplicate of [Debugging JSX using browser / plugins](https://stackoverflow.com/questions/27516580/debugging-jsx-using-browser-plugins) — GalAbra, Jan 28 '18 at 16:25
It's not a duplicate, because they changed the chrome plugin, and now it doesn't behave the way indicated in the above link. — Jan Jansz, Jan 17 '20 at 13:40

score 0 · Answer 1 · answered Jan 28 '18 at 16:31

0

I think you can use JS debugger for this one.

debugger; - when the parser encounters this directive, and the Developer Tools are open it will trigger a breakpoint.

answered Jan 28 '18 at 16:31

Lasith Niroshan

925
10
18

not work, i can debug the js output after the transpiler work – user3144678 Jan 29 '18 at 14:18

score 0 · Accepted Answer · answered Jan 31 '18 at 09:28

0

found something by using transform-react-jsx and add it to babelrc im reciveing jsx files in chrome , to exactly the code i wrote but can use it to debug the code.

answered Jan 31 '18 at 09:28

user3144678

111
9

debug jsx file in chrome, is it possible

2 Answers2