React-native-debugger: Usage with Expo

[AdrienLemaire]

** Please ensure:

• [x] I'm using the latest version of react-native-debugger
• [x] I have read README.md

** Please provide the following information if you found some bugs or have question:

React Native version: Expo SDK 17
Platform: Android
Is real device of platform: No
Operating System: Arch Linux

I'm trying to get react-native-debugger to work with Expo and my genymotion android device, without success so far. When running the debugger, it will always listen on a random port, and I cannot figure out a way to tell expo and react-native-debugger to agree on the port.

• Updating my package.json file with the following script didn't help:
  "scripts": { "postinstall": "rndebugger-open --expo" }
• Since Expo starts the RN packager for me, I don't understand how to run REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start
• I tried xdg-open "rndebugger://set-debugger-loc?host=localhost&port=19001"xdg-mime query default http without success (not sure how to assign react-native-debugger to this specific mime.

[jhen0409]

Currently the open rndebugger:// way is only for macOS, for Linux / Windows we haven't yet to register rndebugger scheme.

Updating my package.json file with the following script didn't help:

Do you ensure the postinstall script is successfully run? You should can see the following log:

PASS Replace `open debugger-ui with Chrome` to `open React Native Debugger`.

Also, for the inject script you don't need use --expo because it will detect the port automatically.

[jhen0409]

If you're using CRNA for create Expo project, we have examples.

[AdrienLemaire]

Thank you for the fast reply. Just updating this thread with what I did for registering the rndebugger scheme

$ pacaur -S mimeo
$ mimeo -m "rndebugger://set-debugger-loc?host=localhost&port=19001"
rndebugger://set-debugger-loc?host=localhost&port=19001
  x-scheme-handler/rndebugger
$ mimeo --add x-scheme-handler/rndebugger react-native-debugger.desktop
$ mimeo "rndebugger://set-debugger-loc?host=localhost&port=19001"
Starting listen set-debugger-loc request on port 33219

Realizing afterwards that it was pointless, since it goes back to calling the executable with the path as argument, which I already knew wouldn't work..

postinstall

When restarting the expo project, I get the following error:

Opening on Android device
5:54:27 PM
Launching Dev Tools...
5:54:27 PM
Google Chrome exited with error: { Error: spawn google-chrome ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn google-chrome',
  path: 'google-chrome',
  spawnargs: [ 'http://localhost:19001/debugger-ui' ] }

Fixed after running sudo ln -s /usr/bin/google-chrome-stable /usr/bin/google-chrome, but it will only start the chrome debugging and not the rndebugger application...
Therefore the postinstall script calling "rndebugger-open" is not run.

I'm not using CRNA, and will try using relay instead of redux/mobx.

[jhen0409]

postinstall

It seems still try launching the browser, so the inject script has not been run? Should do npm run postinstall or npm install before npm start.

[AdrienLemaire]

I managed to connect to react-native-debugger, yay!

Basically:

• Start react-native-debugger app
• Close browser debugger-ui if opened
• restart expo project and open on android
• manually run npm run postinstall in the terminal
• set remote js debugging

Seeing a lot of errors in the console though, stuff like

Uncaught TypeError: Cannot read property 'getHostNode' of null
    at Object.getHostNode`

Also, I cannot open the component (which is kind of what I care about):

Any idea regarding these last issues ?

[jhen0409]

Seeing a lot of errors in the console though, stuff like

Not sure why, is this error can't reproduce in browser debugger-ui? O_o

I'll try to reproduce on my Linux machine later.

Also, I cannot open the component (which is kind of what I care about):

This mean the Show <> in Source item on context menu? If yes, currently we have the built-in editors path is only for macOS (see this), you can run process.env.EDITOR = 'the_editor_path' in the console for custom it. (Maybe we will provide a better way in the future)

[AdrienLemaire]

@jhen0409 sorry for the late reply. react-native-debugger is usable to some point, but there's a lot that could be improved (at least for my use case).

Here is a video to demonstrate the console errors effect when navigating elements through the dom view: https://youtu.be/ZWX-IedeRrQ (file a bit too heavy to convert to gif and upload here, that's why I used youtube)

[jhen0409]

It seems like the errors is from react-devtools, I can reproduce it on RN 0.44.

[MrHubble]

@Fandekasp I know you're not using CRNA but I thought this short video might still be relevant: Create React Native App + React Native Debugger

In the video the author recommends this article: React Native Debugger + Expo = AWESOME

[mmahalwy]

I got it all working but cannot get react-devtools to work at all.

[jhen0409]

@mmahalwy I think it related to #45.

[mmahalwy]

@jhen0409 oh yeah.

[jhen0409]

[email protected] should fixed the problem (https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-303962375), please update the package in your react-native project. (Note that it's dependency of react-native)

[mmahalwy]

@jhen0409 forgive my ignorance, but I installed RND through brew - how will updating to [email protected] for my RN project resolve it?

[jhen0409]

@mmahalwy you can update this dependency of react-native to the latest matched version, just run yarn upgrade or npm update (or reinstall all dependencies) in your RN project.

[mmahalwy]

@jhen0409 awesome! Thanks!

[mlg87]

for anyone that would like a bash function to open the debugger on the port of your choosing

function rndebug() {
  if [ -n "$1" ]
  then
    open "rndebugger://set-debugger-loc?host=localhost&port="$1""
  else
    open "rndebugger://set-debugger-loc?host=localhost&port=19001"
  fi
}