Debug React Native App in Android Emulator Using Chrome Debug Tool

Google chrome debugger tool also known as Chrome debug is used by many react native developers to debug react native android apps. Debug means checking the app for errors or API class data in the background using custom tool. The debug tool works with Console.log() method. The Console.log() method allow us to print any sending or coming value in debugger console. If we’re receiving data from a WEB API then we can print all the values in Console method and if the data not shown in the List View or FlatList then we can be sure using console that the data is arrived or not in the app using Api call. So in this tutorial we would learn about How to Debug React Native App in Android Emulator Using Chrome Debug Tool.

Contents in this project Debug React Native App in Android Emulator Using Chrome Debug Tool:-

1. The first step is to start the android emulator in your computer. Now start the NPM server or launch the react native app in your emulator. Make sure you have installed Google Chrome Web Browser in your computer.

2. To open the Debug menu we have to simulate the shack device functionality in our emulator. So if you’re using REAL android device then simply shack the device to open debug menu and if you’re using Android Emulator then press CTRL + M from your computer keyboard to open the debug menu. After opening the menu the menu would look like below screenshot.

3. Click on Debug to open the Chrome Debugger Tool in your computer. After opening the Debug tool in your Chrome in your computer look like this.

4. Now Right Click on the screen -> Inspect .

5. Now you can see the Debugger Console Window on the Right Side of Screen. Select Console TAB.

6. Here you can see two debug message first one is App Called… and in the another Console I’m printing the WEB API JSON data. In this console I’m printing one record only.

7. In below screen shot I’m printing the complete data in the JSON format.

This is how we can debug or react native android application in real device or android simulator.

8. Complete Source Code for App.js file:

Screenshot of App:

5 Comments

  1. kindly do tutorial on image upload (react native using expo) .i tried you’r older tutorial and it is not working . kindly provide a solution

    thank you

Leave a Reply

Your email address will not be published. Required fields are marked *