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 ).

Basic debugging

If you are new to R.N development, I guess will start by saying, you can actually debug by using the common methods like console.log() console.warn() or debugger

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class Home extends Component {
  welcome() {
    console.log('Message')
    console.warn('Warning')
    debugger
    return <Text>Welcome to my app</Text>;
    console.err('Error')
  } 

  render() {
    return (
      <View>
        {this.welcome()}
      </View>
    );
  }
}

export default Home;

Expo console

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.

exponent console


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.

exponent mobile

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:

exponent mobile


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.

exponent mobile

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 react-devtools with 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.

exponent mobile

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