How to debug redux and inspect react elements in your react native app

As default of react native debugger, we can only debug basic console in your app. Imagine you are using redux how to can you debug your states, actions, etc. Moreover, It is hard to inspect your react native elements and change your style directly like what you did in chrome. In this blog, I will illustrate easy tools and how to integrate within your react native app.

1. react-native-debugger

for mac:

brew cask install react-native-debugger

after installing react-native-debugger successfully, let’s add an extension in our Chrome browser by going to chrome://extensions/ and add redux devtools.

2. redux-devtools-extension

npm install --save redux-devtools-extension
or
yarn add redux-devtools-extension

after that let’s config our store:

import { createStore, applyMiddleware, compose } from ‘redux’
import createSagaMiddleware from ‘redux-saga’
import rootSaga from ‘./sagas/rootSaga’;
import rootReducer from ‘./reducers/rootReducer’;
import { composeWithDevTools } from ‘redux-devtools-extension’;
const sagaMiddleware = createSagaMiddleware();
export default function configureStore() {
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)))
sagaMiddleware.run(rootSaga)
return store
}

3. react-devtools

if you want to install globally please follow the command line below:

# Yarn
yarn global add react-devtools
# NPM
npm install -g react-devtools

If you prefer to avoid global installations, you can add react-devtools as a project dependency. With Yarn, you can do this by running:

yarn add — dev react-devtools

after installing 3 packages above successfully, let play around with by just running this command line

open "rndebugger://set-debugger-loc?host=localhost&port=8081"

it will open a react native debugger tool but please make sure your pervious debugger is closed. when react native debugger is launched, just type the following shortcuts to show developer menu and choose debug js remotely then it will be linked to react native debugger tool.

for IOS simulator
cmd + d
for Android emulator
cmd + m

Now you can play around with that tool by debugging state, action or inspecting your component’s styles.

you can see more more options by just right click on your react debugger tool.

I hope this will help you guys to test or debug your react native application easily. If this blog help you just give me some claps :)