React Native Debugger – Standalone Debugging Tool

Introduction

This page will contain the information about React Native Debugger. React Native Debugger will help you to debug your app in a very easy way. So let’s get started and see how to debug React Native App.

We all know debugging is the most important part of any development process and a better debugging process makes the development fast. For those developers who have just migrated from native development to the React Native development, It is going to be different my friend and can be complex as well (Just kidding :p).

I accept that debugging in React Native development was too tough and needed too much effort to find the problem at the initial level of React Native but as time passed many superheroes came to help the community and provided many tools to debug React Native app. React Native Debugger is one of those debugging tools which will help you to debug your app.

Basic Debugging in React Native App

Before we directly go to see React Native debugger I want to introduce some basic debugging techniques for those who are new in React Native development.

How to Debug using Debug Menu?

React Native itself provides some ways to debug. There is always a hidden developer menu in debug build (Not in release/ production build) and to open the debug menu you have to shake your device or if you are using an emulator then you can use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Here is how it will look like

Please remember to enable Fast refresh for the fast debugging it will refresh your app nearly in run time. So after enabling whenever you make a change in the code and hit ctrl+s or save the code, it will auto-refresh the app and you will see your changes in the app.

So that was the developer menu and how to enable fast refresh, now open the debug menu again and click on “Enable debugging” or “Enable Remote JS debugging” option which will open a localhost URL (http://localhost:8081/debugger-ui) in your browser and you will be able to see the remote message now you just have to inspect and have to open the browser console. For Chrom use ctrl + shift +I or open Tools > Developer Tools.

Now you can see all the console or the debugging warning or error on the console like this

Debugger Output Screenshot

This is how you can do some basic debugging in React Native development. If you want to explore more then you can also go through this.

React Developer Tools

React Devtools is another tool, which is officially provided by React Native. You can use the standalone version of React Developer Tools to debug the React component hierarchy. Many of the developers use this tool but the reason I prefer React Native Debugger is that React Native Debugger has all the features of React Devtools. If you are still interested to know about it then please follow the below instructions:

How to Debug using React Developer Tools?

To use it, install the react-devtools package globally:

npm install -g react-devtools

Now run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

it will open a standalone window waiting to connect your app and when you run your app it will connect with your app automatically. if you are running everything default then your app will run on port 8080 or if you have done some change in port then you have to make some changes as per the official page. After connecting to your app it will look like this.

React Developer Tool Output Screenshot

Cool! Isn’t it?

But wait, This post is not about these tools it is for the React Native Debugger. so let’s see what is it?

React Native Debugger

React Native Debugger is a standalone app for debugging React Native apps and has the following characteristics:

Got the point? This is what I prefer React Native Debugger over React Devtools.
So let’s see how to install and use React Native Debugger.

Installation of React Native Debugger

Installation of Debugger is very easy you just have to click here and have to download the build to install it in one click. Especially for Ubuntu users, you can download *.deb file to click and install.

Use of Debugger

To use the debugger you have to follow the following steps
1. Search for the debugger in programs and open it.
2. Please close debugger clients of React Native. Check for http://localhost:<port>/debugger-ui too, It should be closed.
3. You will see RNdebugger is in “Waiting to connect” state.
4. Now run your app and you will see RNDebugger will try to connect now enable Debug JS Remotely of developer menu on your app.

Done! Here us how you can install and use an RNDebugger. If everything was right then you will see the logs and the app structure in the debugger like this

React Native Debugger output Screenshot

If you have made any change in the default application port then you can follow the following getting started guide and can see the suitable changes.

This is how you can use a React Native Debugger. I hope you liked it. 🙂