An Insight to React Native Debugger

What is React Native Debugger?

The easiest debugging tool for debugging is the built-in JavaScript react native debugger. It can be accessed in the simulator menu which is opened by “command+m” on Android and “command+d” on iOS you can find the “Debug JS remotely” position. The tool that is opened under http://localhost:8081/debugger-ui is the same as the one hidden under the inspect menu button. 

In order to use tools suitable for React, you should use the React Developer Tools extension, but the browser version is unfortunately not working with React Native. The only way is using standalone React Developer Tools. 

React Native Debugger is the most convenient choice as it has Chrome Developer Tools combined with React and Redux debuggers. This tool is available as a desktop app for Mac OS, Linux, Windows. It is even setup free, unlike React Developer Tools. 

 

Chrome dev tools and React dev tools features. 

Elements-

First open the “Toggle Inspector” from the device development menu and then click on the element. Thus, it will be displayed on the Elements tab as a React component tree. With a highlighted element, you can inspect, change and add to its styles, and the results will immediately be displayed in the simulator. 

Profiler-

It helps detect and diagnose performance issues. You can record non-performant action and you will get a flame graph with components render duration. 

Consoler-

The consoler tab helps you inspect errors, warnings, and logs from the app. 

Sources-

Instead of using console logs in Sources tab, you can open source code and start debugging right away from React Native Debugger. Breakpoints are set to form steps with the help of code so as to find an issue. 

Memory- 

Hunt memory leaks directly from React Native Debugger. Xcode and Android Studio are also nice options to consider.

Async Storage- 

In the React Native Debugger context menu, you can log or clear Async storage content. 

 

Redux dev tools features- 

The Redux dev tools setup is available on-  https://www.npmjs.com/package/redux-devtools-extension

Inspector-

It shows us all the actions in real time that are firing currently in the app. You can easily jump back in time or skip an action just by clicking the jump/skip button from the menu opened after hovering at the action. 

Action Tab- 

It displays selected action and data carried to the reducers. 

State tab- 

It shows us the entire state tree at the time of the selection of the action. 

Diff tab-

It shows us where the action changed in the state tree. 

Test tab- 

It takes your root state and provides a written test on what the end state should hold. 

Log monitor- 

It displays the list with completed state and actions. 

Dispatcher-

It allows firing a custom action with custom data. 

Chart- 

It shows us the state in a structure that is similar to a tree. 

Slider-

You can toggle the slider and move it through all of the displayed actions. This feature is also available in the Mac touch bar. 

Import/Export/Print-

Import or export states as JSON from the application. It enables running your app with the custom state. 

Reactotron-

Another tool used for the process of debugging React Native apps is Reactotron. We can also use it with the React Native Debugger too. Though both of them have similar features, one is enough for debugging. Reactotron is easy to set up and very flexible with its different extensions. However, the main idea is to mix the redux actions with console responses. It may feel like an advanced version of react-logger. 

The set up guide for Reactotron is available on- 

https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md 

Connections-

On the bottom of the Reactotron page, there is a connection panel. It can be used to run multiple devices and make a swift switch between them while debugging. Reactotron can also be used with a different debugger such as React Native Debugger while it is connected to it. 

Timeline tab- 

This shows us the timeline of all app events and redux actions used and conducted. 

 

This is useful to us in the following ways- 

–       Log anything from your app to the timeline using eg. Reactotron.log(). 

–       Check redbox errors and quickly find the corresponding code. 

–       Helps filter events

–       Convenient way to repeat redux actions

–       Helps us to edit and dispatch Redux actions. 

State Tab- 

The state tab helps us subscribe to a specific store field and create and store snapshots with the ability to get us back in time to the particular moment that the saving occurs. 

It also helps us in creating custom commands to automate dispatching actions. 

The React native tab- 

This tab is a quick way to switch to storybook mode and also display the design on top of an app with the use of the “image overlay” option and create a pixel perfect UI. 

 

Debugging using A custom JavaScript debugger- 

In order to use a custom JavaScript debugger in place of Chrome Developer Tools, use the React_Debugger environment variable to a command that will help start your custom debugger. 

The next step would be to select “Debug JS Remotely” from the developer menu to start debugging. 

 

After this is done, the debugger will receive a list of all project roots that have been separated by the use of a space.

Simply set,

REACT_DEBUGGER=”node /path/to/launchDebugger.js –port 2345 –type ReactNative /path/to/reactNative/app , the code will be used to start your debugger. 

 

Primarily keep in mind that the custom debugger commands that are executed this way should be very short-lived processes. They should also not produce more than 200 kilobytes of output content. 

 

React Developer Tools- 

You can use the standalone versions of React Developer Tools to assist you with the debugging of the React component hierarchy. To use it, install the react-devtools package globally from the link given below: 

npm install -g react-devtools

 

Now run react-devtools from the terminal to launch the standalone DevTools app: 

react-devtools

 

This should help you connect with your simulator within a few seconds. 

 

If you prefer to avoid global installations, you can add react-devtools as a project dependency. Firstly, add the react-devtools package to your project using npm install –save-dev react-devtools.

Secondly you must add “react-devtools”: “react-devtools” to the scripts section in your package.json.

Finally, then run npm run react-devtools from your project folder to open the DevTools.