Inspecting apps is now as easy as it was always meant to be. Effortlessly inspect React JS and React Native mobile apps with Reactotron, a free desktop application by Infinite Red.
The Event Timeline lets you watch your app events happen in realtime and drill down to get more information. Track how long a network request or redux action takes to complete and solve race conditions as they happen.
Encountering a puzzling state? Subscribe to changes to that part of the state object and watch it update as you tap through the app.
Overlay a jpg or png on top of your screen to assist you in laying out your components. You can set the image to a see-through opacity and line up your components to match the design perfectly. Your design team will love you.
Reactotron is jam packed full of great features to help you be more efficient when building apps for React JS and React Native. We had trouble even condensing all of this down to just a simple list of 9 incredible features that ship with Reactotron right out of the box.
React and React Native apps are driven by application state, and Reactotron's most useful feature is the ability to drill down into, inspect, and even modify your application state.
A key part of building a successful app is efficient and timely interaction with your back end servers. Reactotron makes it easy to keep an eye on your API requests and inspect the payloads.
By watching the Event Timeline and corresponding benchmark numbers, you can quickly identify, isolate, and improve the performance of your app across the board. Performance is no longer a guessing game with Reactotron.
Looking for one specific part of the state tree? Just add a subscription through Reactotron and cut out all of the noise. It's easy to do and effective at finding problematic states.
Reactotron gives you a `console.tron.log` function that lets you send messages to Reactotron while debugging your app. Reactotron will then handle displaying and inspecting those logs for you.
Application errors show up in Reactotron. This lets you watch for unexpected error events all in one place.
Using Redux? Reactotron is Redux-ready and lets you dispatch custom actions to see how your app and Redux store responds.
Go beyond Redux with Redux Sagas and Reactotron will be right there with you. Built-in support for monitoring Redux Sagas!
Designers love a pixel-perfect implementation, and Reactotron makes it trivial. Overlay an image over a screen to check the alignment of your components with the initial design.
Reactotron isn't something we just do in our spare time for fun, it's also actively being used on real projects worldwide. It's because of this fact that we need to know it'll be quick to set up and easily configurable – two things we're proud to say are true.
We've worked hard to make the setup experience fast and easy to get started and well on your way. If you run into any trouble, help is available on our Slack community team.
Whether you're using macOS, Windows, or Linux, our goal is to make things work right away! Reactotron works well right out of the box and has some easy configuration options to get the most out of your experience.
If you're ready to get a head start developing React apps, install it and read the docs at Github below.
