0

So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.

For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.

This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.

Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?

BaronVonKaneHoffen
  • 1,902
  • 1
  • 21
  • 29
  • 1
    What are you trying to debug? If your app is crashing? Output is incorrect? You will benefit either from natively debugging (Xcode or adb) or JS debugging. – Sean Wang Jan 21 '19 at 00:49
  • @BaronVonKaneHoffen Welcome to the world of React-Native! It's not just device, but also simulator/emulators that struggle to execute firebase methods while Chrome debugging is enabled. The result in my case is the app just sits there while nothing happens. Oh and it gets worse; it sometimes works. Like it works and then Bam! stops working, within no code change. If you actually care about this development platform and would like to see it improved, then you should probably open a bug ticket on the react-native Firebase Github site. I however don't. – Ash Oct 05 '19 at 02:34

1 Answers1

1

The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.

Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.

If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:

  • React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.

  • React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.

Up-to-date installation instructions and configuration are provided in their respective repositories.

Siavas
  • 4,992
  • 2
  • 23
  • 33
  • Yeah exactly. I have made sure I'm doing a debug build, and I see activity in the Chrome dev tools. The trouble is, Firebase functions such as fetching records from Firestore don't seem to work when run from there. – BaronVonKaneHoffen Jan 21 '19 at 09:17
  • That's useful further input @BaronVonKaneHoffen. Are these function calls to be debugged coded in JavaScript? – Siavas Jan 21 '19 at 13:06
  • Yes. So, for example, I could initialise the Firestore DB in my App.js with `firebase.firestore();` then attempt to perform a query, such as `await result = db.collection('whatever').doc('123').get();`, which works fine when running on the device. However with Remote JS Debugging enabled, it never completes... presumably erroring somewhere outside of the JS environment. I can `console.log(result);` on the next line and nothing ever reaches the console. – BaronVonKaneHoffen Jan 21 '19 at 16:40
  • @BaronVonKaneHoffen I have added two good alternatives to the built-in debugger which allow code breakpointing as well. Let me know if this helps. – Siavas Jan 21 '19 at 17:23
  • 2
    Ah great! Tried with `react-native-debugger` and it worked! Thanks so much :-D ...anyone else looking at this: I installed via homebrew, then opened with `open "rndebugger://set-debugger-loc?host=localhost&port=8081"` , enabled "debug JS remotely" on device, and all Firestore comms seems to be working fine now, with the debugger attached. – BaronVonKaneHoffen Jan 22 '19 at 20:26