WebStorm react-native debug not working

Question

I'm using WebStorm for developing a react-native app + an emulator from the Android Studio virtual device.

The app is loaded great from the WebStorm into the emulator but the debugger isn't working, won't stop on breakpoints.

This is my settings:

1. This is the configuration of WebStorm:

   

2. The device in the emulator is Nexus 5X API 22 (Android 5.1 x86), i enabled "Remote JS Debugging" after its first loaded.

3. WebStorm output:

   /usr/local/bin/node --debug-brk=60746 --expose_debug_as=v8debug /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/launcher.js --port=8081 --sourcesStoragePath=/dev/calculatorApp/.tmp/reactNativeBuild Debugger listening on [::]:60746 [intellij] Downloaded debuggerWorker.js (Logic to run the React Native app) from the Packager.

   [intellij] Starting debugger app worker.

   [intellij] Established a connection with the Proxy (Packager) to the React Native application

   [intellij] Debugging session started successfully.

   Running application "CalculatorApp" with appParams: {"initialProps":{},"rootTag":1}. DEV === true, development-level warning are ON, performance optimizations are OFF

   Process finished with exit code 137 (interrupted by signal 9: SIGKILL)

Answer 1

In my case I found out that the debugger in IntelliJ/WebStorm wouldn't work if I create the project with create-react-native-app app-name from the command line.

However, the debugger does attach if you create the project following the prompts inside of IntelliJ/WebStorm itself.

eg File -> New -> Project -> React Native

I suspect it is because it doesn't use the create-react-native-app command to generate the project files but rather some other mechanism.

If I run create-react-native-app app-name and then load the project in IntelliJ/WebStorm, I noticed that the only sub-directories it creates are node-modules and .expo .

However, if you create the React Native project in IntelliJ/WebStorm, it generates additional directories, android , ios , __tests__ , that are not created when you run create-react-native-app app-name .