This post is meant to be read in the context of its parent post "Lessons Learned on a React-Native Project". If you've stumbled on this particular page randomly, I'd recommend jumping over to that post and starting from there.

Firstly, if you're scattering console.log(anObject) or alert('my wonderful message here') around your solution, you're in for a bad time. I know this because it was my experience for most of this project. I am not proud of this.

One of the best things to come out of the React ecosystem is that of hot-reloading and/or live-reloading. I don't know if it's been done before, but React was the first to do it well. Like, really well. I strongly recommend turning either/both of these on when you're developing a React-Native application as, especially once you get stuck into feature development, it'll save you a ton of time having to restart/rebuild the application. Magic.

One problem I had was React-Native tends to prefer the Chrome debugger by default when you enable it on the package. I'm not a huge fan of the Chrome debugger because I feel like it rarely behaves like I'd expect it to. What I ended up doing was a combination of things to get a debugging experience closer to what I prefer. My IDE of choice for React-Native choice is VSCode, so with that in mind:

  1. Install the React-Native extension for VSCode
  2. Go to the Debug tab and create a new configuration. Your VSCode instance should now pick up the fact it's in a React-Native solution and show you some relevant configurations.
  3. Pick the "Attach to Packager" option, and let it create the configuration.
  4. Start your packager, and make sure it's running with no problems (I've lost count of the amount of times I was having build/runtime issues only to eventually realise my packager was broken via some random exception).
  5. Go back to the debug menu in VSCode, and run the "Attach to Packager" configuration.

Now here you might notice that none of your breakpoints are registering correctly in the IDE, and when you try and hit the breakpoints from your application nothing works. Thats because the fun isnt over yet!

  1. Start the developer menu on your device/simulator, and click "Debug JS Remotely".
  • Its important to note that you need to do this step after attaching to the packager in VSCode, otherwise React-Native will launch the Chrome debugger and it doesn't play nice with the VSCode debugger.
  1. At this point your VSCode instance picks up on the fact the relevant package has said "hey debug me plz" and loads the breakpoints correctly.

If you do finding yourself wanting to use alert somewhere for a quick & dirty check, one method I found really useful was JSON.stringify, passing in a JSON Object. This just returns the relevant JSON as a readable string (well "readable" in a very loose sense here).

Next Section -> "Feature development in React-Native is wonderful."