Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/infinitered/reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://github.com/infinitered/reactotron

debugging desktop react-native reactjs reactnative reactotron redux redux-saga

Last synced: 3 days ago
JSON representation

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Awesome Lists containing this project

README 

        
# ![Reactotron Logo](./docs/plugins/images/readme/Reactotron-128.png)



[Join our Community Slack](http://community.infinite.red/)



## Introduction



Reactotron is a powerful debugger for React and React Native applications. It provides an easy-to-use interface for developers to monitor their application's **state, network requests, and performance metrics** and can be used for any size of project, from small personal apps to large-scale enterprise applications. The OG debugger at [Infinite Red](https://infinite.red) that we use on a day-to-day basis to build client apps. Additionally, Reactotron is completely open source and free to use, making it an invaluable tool for developers at all levels of experience.



We recommend that you watch [Darin Wilson's](https://github.com/darinwilson) talk at [Chain React](https://chainreactconf.com/): [Chain React 2018: Debugging and Beyond with Reactotron](https://www.youtube.com/watch?v=UiPo9A9k7xc)!



## Reactotron Superpowers



Use Reactotron 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 global errors with source-mapped stack traces including saga stack traces!

- dispatch actions like a government-run mind control experiment

- hot swap your app's state using Redux or mobx-state-tree

- show image overlay in React Native

- track your Async Storage in React Native



You plug it into your app as a dev dependency so it adds nothing to your production builds.



### Desktop



Reactotron on the left, demo React Native app on the right.



![Desktop](./docs/plugins/images/readme/reactotron-demo-app.gif)



## Installation



On the [Releases](https://github.com/infinitered/reactotron/releases?q=reactotron-app&expanded=true) page, you can find the latest version of:



- macOS (x64 & arm64)

- Linux (32-bit & 64-bit)

- Windows (32-bit & 64-bit)



## How to setup Reactotron in our app



- [**React Native**](https://docs.infinite.red/reactotron/quick-start/react-native/)

- [**React**](https://docs.infinite.red/reactotron/quick-start/react-js/)



## How to use Reactotron's features/plugins



- [**Track Global Errors**](https://docs.infinite.red/reactotron/plugins/track-global-errors/)

- [**Track Global Logs**](https://docs.infinite.red/reactotron/plugins/track-global-logs/)

- [**Networking**](https://docs.infinite.red/reactotron/plugins/networking/)

- [**Async Storage**](https://docs.infinite.red/reactotron/plugins/async-storage/)

- [**React Native MMKV**](https://docs.infinite.red/reactotron/plugins/react-native-mmkv/)

- [**Benchmark**](https://docs.infinite.red/reactotron/plugins/benchmark/)

- [**apisauce**](https://docs.infinite.red/reactotron/plugins/apisauce/)

- [**Overlay**](https://docs.infinite.red/reactotron/plugins/overlay/)

- [**MST**](https://docs.infinite.red/reactotron/plugins/mst/)

- [**Redux**](https://docs.infinite.red/reactotron/plugins/redux/)

- [**Open in Editor**](https://docs.infinite.red/reactotron/plugins/open-in-editor/)

- [**Storybook (only for React Native)**](https://docs.infinite.red/reactotron/plugins/storybook/) \

   `reactotron-react-native` ships with [Storybook](https://storybook.js.org/).

  This enables you to switch to Storybook from the Reactotron app.

- [**Custom Commands**](https://docs.infinite.red/reactotron/custom-commands/)



## Tips and Tricks



[Some tips that will elevate your Reactotron experience.](https://docs.infinite.red/reactotron/tips/)



## Bug Reports



When reporting problems with Reactotron, use the provided example app located in `app/example-app` to replicate the issue. This approach enables us to isolate and expedite the resolution of the problem.



## Want to contribute? Here are some helpful reading materials



- [**Contributing**](https://docs.infinite.red/reactotron/contributing/)

- [**Architecture**](https://docs.infinite.red/reactotron/contributing/architecture/)

- [**Monorepo**](https://docs.infinite.red/reactotron/contributing/monorepo/)

- [**Release**](https://docs.infinite.red/reactotron/contributing/releasing/)



## Troubleshooting



- [**React Native iOS**](https://docs.infinite.red/reactotron/troubleshooting/#react-native-ios)

- [**React Native Android**](https://docs.infinite.red/reactotron/troubleshooting/#react-native-android)



## Credits



Reactotron is developed by [Infinite Red](https://infinite.red), [@rmevans9](https://github.com/rmevans9), and 70+ amazing contributors! Special thanks to [@skellock](https://github.com/skellock) for originally creating Reactotron while at Infinite Red.



## Premium Support



[Reactotron](https://infinite.red/reactotron), as an open source project, is free to use and always will be. [Infinite Red](https://infinite.red/) offers premium React and [React Native](https://infinite.red/react-native) mobile app design/development services. Email us at [[email protected]](mailto:[email protected]) to get in touch for more details.