Debugging a mobile app can be a tedious job (it's slow and hard to figure out sometimes) if you compared to the web environment, however, between react native debugging tools and exponent, things can be a little bit easier.
If you still don't know what main benefits exponent gives you, I will list some of them ( the word easier will be used a few times ).
If you are new to R.N development, I guess will start by saying, you can actually debug by using the common methods like
One nice thing about exponent is the screen where you run the app which is initially divided in two, the React Native Packager (on the left) and the console on the right.
On the right side console, you can see your console messages ( with even colors! ), if you simply want to check something without inspecting the element, this is a nice and easy way of doing it.
Note: console.table() does not work yet.
Debug Remote JS
To get the best debugging experience remontly with exponent, first make sure your host type in XDE to LAN and Development Mode are active.
Now press Cmd+D (mac emulator), Cmd-m (Genymotion), or shake the phone (physical device). A screen will pop up where you can choose from the following options:
Choose Debug Remote JS, you will then see a screen poping from
http://localhost:19001/debugger-ui where you can inspect and start visualizing
your logs, you won't see your JSX elements or styling here however.
Toggle Element Inspector
A nice way inspect components separately and see who is responsibilities for what, which is the parent component, styles, touchables and other info. How ever you can't edit or manipulate components directly on the screen.
React Dev Tools
React dev tool is an extension which will let you inspect the React component hierarchy, including component props and state, giving you some nice control when you test and debug. Install
npm i --save-dev react-devtools or
yarn add react-devtools -D if you don't have it all ready, then just run
yarn react-devtools or
npm react-devtools which will
open a window with an inspector called electron similar to Chrome where you can properly modify your inline styles, states and see live results.
You can combine this tool with the toggle element inspector mentioned previously, touch, inspect and play.
Find out more about debugging with React Native here