Debugging in React Native with the Redux and React-Native DebuggerJanuary 05, 2021 Publish By : Expert App Devs 3 min read Viewed By : 827
Debugging in react-native is a very important part, if you are able to debug apps in a good way then you save time for app creation.
In React-Native remote debugger tool developers can view all the three tools - Chrome DevTools (https://developer.chrome.com/devtools) React Devtools (https://github.com/facebook/react-devtools), and Redux Devtools Extension (https://github.com/zalmoxisus/redux-devtools-extension)- combined in one window
First, we need to know what is debugging in react native. I hope you like this blog, so let’s start the journey…
Debugging in react-native:
Every developer will get to a point when they start working on debugging their code. Sometimes figuring out how to do debugging is a significant challenge.
When you start debugging the biggest question is how we debug, so we are going to use “React Native Debugger”, This debugger has the full set of developer and debugging features, which includes the Redux Developer Tools as well. You have the following access.
- Chrome DevTool
- React DevTools
- Redux DevTools
The Keyboard shortcut for Chrome DevTools -
- macOS: Command+Option+I
- Windows/Linux: Ctrl+Alt+I
The Keyboard shortcut for Redux DevTool -
- macOS: Command+Option+j
- Windows/Linux: Ctrl+Alt+J
The Keyboard shortcut for React DevTools -
- macOS: Command+Option+K
- Windows/Linux: Ctrl+Alt+K
The Keyboard shortcut for reloading JS -
- macOS: Command+R
- Windows/Linux: Ctrl+R
Installing debugger -
- React-native-debugger for mac -
brew cask install react-native-debugger
npm install --save redux-devtools-extension
yarn add redux-devtools-extension
yarn global add react-devtools
npm install -g react-devtools
How to open react-native debugger -
For opening react-native debuggers you need to shake the device and choose the option for the debugger, get to the debug tools, first, we need to the context menu within the emulator you can use the ctrl + m (Android) or ⌘ + D (iOS).
After clicking on “Debug JS Remotely” a debugger UI will automatically open in your browser. You can bring up the dev tools console by pressing ctrl + shift + j or cmd + option + j, the opened window is like…
Note: Enable Live Reload and Enable Hot Reloading are very helpful.
Redux developer tools -
We can use react-native debuggers for redux debugging or if you want to use middleware like redux-thunk, you can use it.
React Native Debugger has the following pieces of the redux-devtools-extension API, which is used globally.
How we use the debugger statement -
We use the debugger where we want to put the debugging conditions.
So we complete this article and after reading this, I think you are able to understand everything about react-native debuggers, and as a developer, you need to know about all things related to the debugging environment.
The tools we use allow us to multiply our productivity and make debugging easy. Can you imagine building anything without using tools? So please invest a lot of time into your toolset, so you are able to debug and complete your projects. These developer tools are a must for any professional developer.
Need a consultation?
Drop us a line! We are here to answer your questions 24/7.