Reactotron - A Desktop App for inspecting your ReactJs and React Native projects. It's available for macOS, Windows, and Linux platforms. So you don't have to open any Web browser to see any console log or API response.

1. Use it to:

• view your application state.
• show API requests & responses.
• perform quick performance benchmarks.
• subscribe to parts of your application state.
• display messages similar to console.log.
• track your sagas.
• track your Async Storage in React Native.
• dispatch actions like a government-run mind control experiment.

2. Installing the Application

You can install it from the attached link according to your platform. Once you have the application installed it should download and alert you that a new version is available and that new version should be installed on next launch.
https://github.com/infinitered/reactotron/releases/tag/v2.17.1

3. Configure Reactotron with your project.

• For React Native Project

Let's install Reactotron on your project as a dev dependency using below command.

npm i --save-dev reactotron-react-native

1. Create ReactotronConfig.js file.

Create ReactotronConfig.js file in your root folder of your project and copy the below code in it for initializing.

import Reactotron from 'reactotron-react-native'

Reactotron
  .setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from 'react-native' or '@react-native-community/async-storage' depending on where you get it from
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

Finally, we import this on startup in App.js or index.js of your project.

if(__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}

At this point, Reactotron is hooked up.

Refresh your app and have a look at Reactotorn now.

• For ReactJs Project

Let's install Reactotron as a dev dependency.

npm i --save-dev reactotron-react-js

Create separate file for initializing src/ReactotronConfig.js in your editor of choice and paste this:

import Reactotron from 'reactotron-react-js'

Reactotron
  .configure() // we can use plugins here -- more on this later
  .connect() // let's connect!

Finally, we import this on startup in src/index.js on line 1:

import './ReactotronConfig'

At this point, Reactotron is hooked up.

Refresh your web page (or start it up npm start) and have a look at Reactotron now.

4. Configure Console.log

To see console.log, we have to configure ReactotronConfig.js additionally.

import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

Reactotron.configure({name: 'app_name'})
  .setAsyncStorageHandler(AsyncStorage)
  .useReactNative()
  .connect();

//  patch console.log to send log to Reactotron
const yeOldeConsoleLog = console.log;
console.log = (...args) => {
  yeOldeConsoleLog(...args);
  Reactotron.display({
    name: 'CONSOLE.LOG',
    value: args,
    preview: args.length > 0 && typeof args[0] === 'string' ? args[0] : null,
  });
};

export default Reactotron;

Summary

Effortlessly inspect React JS and React Native mobile apps with Reactotron, a free desktop application by Infinite Red.
Majorly, It is used for Realtime Event Timeline, to see Application state, console logs messages, API Requests/Responses and Track Global Errors.

You can also configure your Reactotron with redux for tracking global errors, and watching network requests.

Use this link to configure Reactotron with redux https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md.

I hope this article has helped in knowing Reactotron and its setup in ReactJs and React Native. Thanks for reading the article.