React Native support

[darioceccoli]

Is it possible to debug React Native projects?

I tried creating a new react-native project:

expo init AwesomeProject

cd AwesomeProject
npm start # you can also use: expo start

And I registered the following debug template:

(dap-register-debug-template "Debug react-native example"
  (list :type "chrome"
        :cwd nil
        :mode "url"
        :request "launch"
        :webRoot "/Users/myuser/Developer/AwesomeProject"
        :url "http://localhost:19001/debugger-ui"
        :name "Debug react-native example"))

When I execute dap-debug, Chrome launches correctly, the mobile app connects correctly to the debugger (on Chrome it says Debuger session #0 active), I see the Chrome session on dap-ui-sessions and I see the out window which correctly mirrors Chrome's console, but breakpoints remain in inactive state and they don't get hit.

I guess this configuration is never going to work and we need instead a dap-react-native which uses the https://github.com/microsoft/vscode-react-native extension or https://github.com/jhen0409/react-native-debugger?

The official react-native docs Debugging · React Native mention something about using a custom javascript debugger, but I guess it should be possible to use dap-mode with Chrome?

[yyoncho]

I guess this configuration is never going to work and we need instead a dap-react-native which uses the https://github.com/microsoft/vscode-react-native extension or https://github.com/jhen0409/react-native-debugger?

Yes, we have to create the corresponding register methods for dap-mode.

[yyoncho]

I checked the react native debug adapter, and it seems like it is straight forward to configure it following dap-chrome.el/dap-firefox.el/dap-node.el as an example. So if you wanna give it a try you may ping me here or in gitter. Otherwise, I will try to implement it next week when I have time window.

[darioceccoli]

I can give it a try. I'll try adding a dap-react-native.el which will get the vscode/msjsdiag.vscode-react-native extension and use msjsdiag.vscode-react-native/src/debugger/reactNativeDebugEntryPoint.js as debug-program.

[darioceccoli]

I started working on that on #118

[rezaamashi]

Is this still feasible with the newer React Native architecture and the latest React Native DevTools? I have been scratching my head around setting this up today.

Here is my setup

(dap-register-debug-template
  "React-Native Debugging"
  (list :type "chrome"
        :runtimeExecutable "/Applications/Chromium.app/Contents/MacOS/Chromium"
        :cwd nil
        :mode "url"
        :request "launch"
        :webRoot "/Users/myusername/Dev/ReactNative/myapp/"
        :url "http://127.0.0.1:8081/debugger-frontend/"
        :name "React-Native Debugging"))

So far I had no luck and keeps getting this (even if I set it up to run with Brave.)

Debug session process exited with status: killed: 9

Also nothing come out in the log buffer.