0

I am new to React Native. I am stuck with debugging. What is the standard way of debugging apps? I mean how should I configure WebStorm debugger for it to connect to the running app and stop on breakpoints I put in IDE?

And is there a way to use WebStorm debugger alongside Flipper (use it instead of Chrome)?

I currently use RN 0.70.6

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Semreg
  • 13
  • 2
  • Have you tried checking WebStorm's Help pages? Will this do? https://www.jetbrains.com/help/webstorm/react-native.html#ws_react_native_debug – LazyOne Dec 05 '22 at 20:54
  • @LazyOne sorry for the late answer, I didn't get a notification. Yep, I already checked that doc. But I'm not sure how does it work now since RN moved to hermes engine. And if opt it in and start debug from IOS dev menu it throws an error: `info Opening flipper://null/React?device=React%20Native... error Browser exited with error:, Error: invalid url, missing http/https protocol` – Semreg Dec 06 '22 at 21:19
  • Sadly I cannot help much here. But check this one (about support of Hermes engine): https://youtrack.jetbrains.com/issue/WEB-53699/React-Native-Debugging-JS-on-Hermes-using-WebStorm#focus=Comments-27-5930196.0-0 (found from comments in https://youtrack.jetbrains.com/issue/WEB-56246). I see no matches for "invalid url, missing http/https protocol" part anywhere though – LazyOne Dec 08 '22 at 09:55

1 Answers1

0

If you're using Hermes engine, you can simply setup a 'Run configuration' in Webstorm. To do this, go to Run -> Edit configurations and setup a React Native run configuration and name it whatever you like i.e Debug.

Make sure to select 'Hermes engine is enabled' and unselect 'Build and launch application' and click 'Ok'.

After the run configuration is setup, run your app as you normally do. Set any break points on the lines you want to debug and then on the top right corner of the IDE, select your newly created Debug run configuration and click on the Debug button next to the Run button. This should now start the debugger and trigger the breakpoints within WebStorm.

https://youtrack.jetbrains.com/issue/WEB-53699/React-Native-Debugging-JS-on-Hermes-using-WebStorm

rsd96
  • 894
  • 6
  • 6