Hello Friends 👋,

Welcome To Infinitbility! ❤️

React native shows all logs in react native metro bundler terminal and it’s available in both ios and android but it’s not flexible to use and debug code.

React native also provide remote debugger option where it show’s all messages, logs, warning, and errors. See the image below for what it looks like.

React Native, remote-debuger, debug, Example

Now, we are going to learn how we can start a remote debugger in an emulator or real device.

Remote debugger in android

Android emulator

For the android emulator, Click on the emulator screen and Press Control + M ( Ctrl + M ), After open the dialog option select Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there, use the Chrome Developer tools JavaScript console to view console.log().

Android device

For a real android devices, shake your device and it will open the dialog of the option, select Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there, use the Chrome Developer tools JavaScript console to view console.log().

Remote debugger in iOS

iOS simulator

For the iOS simulator, Click on the simulator screen and Press Command + D ( ⌘ + D ) After the open the dialog option select Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there, use the Chrome Developer tools JavaScript console to view console.log().

iOS device

For a real iOS device, shake your device and it will open dialog of option, select Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there, use the Chrome Developer tools JavaScript console to view console.log().

Thanks for reading…