How to Debug React Native for Android and iOS [Step-by-Step Guide]

Hello everyone! In this article I am going to show you step-by-step guide on  How to Debug React Native application for Android and iOS ...

Hello everyone! In this article I am going to show you step-by-step guide on How to Debug React Native application for Android and iOS (iPhone, iPad, iPod Touch) using React Native Tool.

What is React Native?

Well, React Native is a framework for building native apps using JavaScript. It was created by Facebook in 2015 and over the last few years it has gained a lot of popularity all over the world. So, if you possess JavaScript, you can use these skills to build real native apps for iOS and Android. It also means that you don’t have to learn something extra for iOS and Android programming and I find it very cool. This is also the reason why so many react native development companies prefer using one framework for complex products instead of tens different ones.

Another reason why companies are, so to say, in love with React Native is increased development productivity and faster time to market. It has this amazing feature HotReload, where the moment you save the changes, you will see the result on your phone or in a simulator.

With Native development, every time you make a change, you have to compile your code before you can see the changes. Depending on the size of the app, this can take several seconds or a minute.

What you get with it - is a truly good app. 

How to Debug React Native for Android and iOS [Step-by-Step Guide]

Let’s go step by step. As I said at the very beginning, we will accomplish the debugging process using something such as React Native Tool.

React Native Tool is obviously a code extension. The first thing you need to do is to open the PS code editor and install this tool. Go to the extension tab and type in the search line “react native tool”.

After the successful installation of the extension our editor will be able to debug any React Native project. 

The next task is to open an existing React Native project in the editor and also start an emulator, where we will deploy the project.

Then you have to create a debug configuration file. To do this, go the debug tab, then to the gear icon and from the drop down window select the React Native environment. If you haven’t found this environment, click “reinstall the extension” one more time.

After the creation of the configuration file, we can see the digit drop down near the gear icon. The drop down will have an option to run the command “debug Android” or "debug iOS".

Run, for example, the “debug Android” command and deploy the project to the Android emulator. Once we click on this button, the deployment process starts and we can see that there is a progress bar just below the “debug Android”. The deployment process may take some time.

The next step is to enable the debug involvement into the emulator. To do this, select emulator and select the option “debug JS remotely”. Once this option is selected, two major things will happen. On the emulator side, the project gets redeployed and on the editor side, our progress bar is complete and we get a bunch of debug options to debug the project.

Now, finally, we can apply the debug point in our business logic and inspect the execution of the program.

To apply the breakpoint, go to the project explorer tab and open the main program app.js. At this moment we will maximize our project workspace and minimize the debug console. We will be applying in the breakpoint onClick on the button and in this program onClick of the button we are calling the method onClickChangeBackground.

In such a way, we will be applying the breakpoint at number 19. Now, go to the emulator and click the button. We can see the active breakpoint at this line. At this moment, we can take the help of the debug buttons to inspect the execution of the program line by line. We can also inspect the declared local variables.

Once we reach the end of this method, we can use the resume button to complete everything. On completion of the method, we are changing the background of the app every time. Click on the button one more time and repeat the process. Now, we can remove the breakpoint and click on the button again.

Conclusion:

So, I hope that the knowledge of How to Debug the React Native applications for Android and iOS (iPhone, iPad, iPod Touch) will help you to create high-quality products with a great user engagement. Good luck!