In this lesson we'll explore debugging our React Native application in an actual iOS device.

React Native: Debugging on an iOS Device

[00:00] Once you've gone through the process of provisioning your application and identifying your device in the Apple developer program, rather than rendering to an emulator, we're going to render to our actual device. In order to do that, you're going to need to hardwire your device to your machine.

[00:17] Now we're going to go ahead and try to play, or run, our application. It's actually not going to work, but we're going to give it a shot anyways. We can see the application has been added to our device. However, once it loads up we're going to get this error message, "Could not connect to development server."

[00:35] To solve that we're going to jump to our "AppDelegate.m" file, and we're going to replace "localhost" with our machine's IP address. We're going to go ahead and save that, and we're going to stop and restart our application. Now we've got our actual application we can jump through the tabs. Everything is working.

[01:00] Once we've got this on our actual device, what we can do to access the "developer menu" is pick it up, give it a shake, and the "developer menu" appears. I'm going to go ahead and enable "live reload." If we jump back over here to our code, we'll go ahead and make this tab "one," save it, and we can see it reloads on our actual device.

[01:23] Another thing we can try is to load up "debug" in Chrome. However, we are going to hit another error. In order to solve this new error we're going to jump into our "node modules," into "react-native," into its "libraries" directory, and then finally into "WebSocket" and "RCTWebSocket." Here we're going to get the "RCTWebSocketExecutor.m."

[01:53] Again, we're going to change "localhost" to our machine's IP address. We're going to go ahead and stop our application, and reload it. Now, as soon as we reloaded it, we got our Chrome debugging enabled. So we'll go ahead and load up the debugger, or the "dev tools," sorry. Jump over to our "react" tab, and we can see, you're going to have to drill down a little bit.

[02:23] Here's our tab app, and we can see its selected tab, or its state of selected tab, is tab "one." If I go ahead and jump to tab "two," and then in our debugger reload that, we can see that our selected tab is "two." If I jump to tab "three," we can reload that and see it is in fact tab "three."

[02:46] If we jump back to our "index.ios.js" and here in our "render method" becomes a "log-out rendering," we can see here in our console we have "rendering" each time we jump to a new tab. As we move towards production, we're going to want to decouple our code from this local host.

[03:12] There's a handful of instructions here, but we want to uncomment line 46, and we want to copy this line right here, "react-native bundle --minify." We're going to jump over to our console, and we're going to paste that in, "react-native bundle --minify." We're going to run that.

[03:30] Now we are going to get a handful of babel errors. This is a known issue that is being dealt with. There's an issue logged on GitHub for the React-Native project. Once that's completed, we now have a "main.js" bundle.

[03:48] We can jump back over to our X-code, stop and restart our application. We need to go ahead and disable Chrome debugging. We'll stop that one more time and play it. Now we've got our application without any connection to our local machine.

React Native: Debugging on an iOS Device

Share this video with your friends

Free Community Resource