React native debugger— Debugging react native made easy

Application becomes powerful when you’re able to debug your code. It’s like separating the wheat from the chaff.

When it comes to debugging web application browser itself is powerful enough to provide the tool for making the life of a developer easier. For a react application, we already have React developer tool extension in chrome browser to debug the application extensively. But unfortunately we don’t have support for debugging React native application via this extension.

So, in order to debug react native application, we got a convenient tool called React native debugger which combines the functionality of Chrome DevTools, React DevTools, and Redux DevTools all together in single place.

Benefits of React native debugger

1. Console — In the console tab, you can inspect errors, warnings, and logs from the app. Along the line, you also check the state of component by simply selecting the component in React DevTools and hitting command $r which will let you inspect its props, state, and instance properties.
2. Network — Right click on the react DevTools to see options to toggle DevTools and interact with emulator/simulator. By enabling inspect network requests, use XMLHttpRequest or fetch to track the API calls happening around the application.
3. Memory — Easily check for memory leaks straight from React Native Debugger, although you can also use Xcode or Android Studio for this purpose.
4. Async storage — In React Native Debugger context menu you can log or clear Async Storage content.
5. Test tab — It takes your root state and provides a written test on what the end state should hold. Quite useful you want to check the impact of a state change through redux.
6. Sources — Instead of using console.logs, in Sources tab you can open source code and start debugging right away from React Native Debugger. You can set breakpoints and step through the code to find an issue.
7. Elements — After opening “Toggle Inspector” from the device development menu, you can click on the element, which will be displayed in the React devTools under “Elements” tab as a React component tree. With a highlighted element, you can not only inspect its styles but also change or add new ones and results will be immediately displayed in the simulator/emulator.
8. Slider — You can toggle slider and move it through all of the displayed actions.

Setup to run react native debugger

1. Install React native debugger To install React Native Debugger, you can download it from the release page. For macOS, you can use **Homebrew Cask** to install $ brew update && brew cask install react-native-debugger
2. Start React native debugger CLI command: $ open ‘rndebugger://set-debugger-loc?host=localhost&port=8081’ or you can do manually, by opening the React native debugger tool.

To set to another port, press ⌘+t to open a new window where you can reset the port to bundler’s port.

Start debugging in react native debugger

Open your app, open the Developer menu (⌘ + m), then enable “Debug JS Remotely” .

yarn start

or modify your start script as

open ‘rndebugger://set-debugger-loc?host=localhost&port=8081’ && yarn start

Setting up Redux DevTools

Since window.REDUX_DEVTOOLS_EXTENSION is already provided, you can include redux DevTools by simply doing the step below:

or if you use other middlewares,

or to make things easier, there’s an npm package to install:

npm install --save redux-devtools-extension

and to use like so:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';  

const store = createStore(reducer, 
composeWithDevTools(applyMiddleware(...middleware));

What else out there?

1. **Reactotron

• Tool with a different UI **to understand (which means requires learning effort to begin with)
• Requires lot of code to be embedded in your code to console logs or to run custom commands

2. **Flipper **I couldn't find any support for Redux DevTools — if it’s not an important use case then good to go with it as it comes with react native 0.62 release by default.

Troubleshooting

If you’re using ‘react-native-root-toast’, then to make toggle element inspector works, just comment the import of ‘react-native-root-toast’

Conclusion

For me react native debugger turned out to be a single place where I can control my redux, network call traces, inspecting element, profiler and console logs. Debugging got easier without any extra effort of learning this tool since the whole setup is exactly same as web chrome version of redux and dev tools. (sounds cool to me!)

Refer to the official document for any troubleshooting : React Native Debugger