Debugging in React Native with the Redux and React-Native Debugger

January 05, 2021 Publish By : Expert App Devs 3 min read Viewed By : 827
React Native Debugging

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

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.

  1. JavaScript code
  2. Chrome DevTool
  3. React DevTools
  4. 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
  • Redux-devtools-extensions
    npm install --save redux-devtools-extension
                                Or
    yarn add redux-devtools-extension
  • React-devtools 
    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).

open react-native debugger

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…

Debug JS Remotely

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.

  1. window.__REDUX_DEVTOOLS_EXTENSION__
  2. window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  3. window.__REDUX_DEVTOOLS_EXTENSION__.connect

How we use the debugger statement - 
We use the debugger where we want to put the debugging conditions.

Conclusion - 

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.