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:
- It is based on official Remote Debugger and provides more functionality.
- Includes React Inspector from
react-devtools-core
. - Includes Redux DevTools, made the same API with
redux-devtools-extension
.
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. 🙂