React Native has AWESOME debugging tools! We'll take a peek at Expo's remote debugging, but then focus mostly on React-Native-Debugger.

1. Overview

Whether you are using Expo's tools or third-party debugging tools, you will need to turn on debugging from the Expo-Client Dev Menu. Review information about the Dev Menu here. Things to know:

When you turn on Debug Remote JS:

• Your bundle will immediately reload, so if you have your local state set to clear and no specific game loaded, where-ever you are at the moment in the app may just reset back to the New Player Sign Up screen
• The app will move slower
• Debug Remote JS will stay on until you turn it off (even if you restart your bundle), as the settings are saved in the Expo-Client App
• If you are using React-Native-Debugger, you still need to turn on Debug Remote JS via the Dev Menu

2. Using Expo's Remote Debugger

When you select Debug Remote JS from the Dev Menu, Expo opens a webpage to http://localhost:19001/debugger-ui/. The same Developer Tools/Inspector Menu that you use for debugging webpages is now connected to your phone's app. Very straightforward. Check it out for yourself.

3. Using React-Native-Debugger

This tool has a lot of great options and extensions/add-ons that you can configure with your project to increase your debugging. I highly recommend that you read the docs, download it, and learn how it works, because it is a powerful tool for native debugging. I am going to discuss some features of RND, point out two extensions, link to their github pages, and show the code in the project implemented to make the RND extensions run.

Features:

• Small Red Box: Logs Redux actions that have been run
• Pink Boxes: Options to view state + more in different formats
• Green Box: View of component tree and different elements
• Big Red Box: The usual Developer Tools options
• Red Arrows: RND connects to your phone by listening on Port 19001 where Remote Debug JS points to

Redux DevTools Extension:

For the small red box in the photo above to output Redux's action types and state, we had to add a Redux DevTools extension to RND. Check out the docs here. Code was added in walkertreker/src/store/index.js, adding a middleware to the creation of the store. The picture below points out the details:

• Red Box: this highlights where a React-Native-Debugger (RND) middleware is created to track Redux
• Blue Arrow: this points to where the RND and Sagas middlewares are combined and put into the store

Network Inspect of Chrome Developer Tools Extension

NOTE: This Extension has its limitations, detailed in its docs, and does break under certain circumstances.

This was added to inspect the packets of information going over the network. The green box in the picture below shows some of the detailed information this extension adds to the debugging process. Go here to learn more about this extension.

In the picture below, the pink box highlights the code added to walkertreker/src/App.js to implement this tool.

Toggle Element Inspector + RND

Remember the Toggle Element Inspector from Expo-Client's Dev Menu? When you have turned on the Element Inspector while using React-Native-Debugger, and you select an element on the screen, the component tree / elements view in RND automatically opens to the location of the element that you touched on your phone's screen. And vice-versa, you can select something in the component-tree with your cursor, and it will become highlighted on your phone. SO COOL!

The first photo is the component tree.

The second photo is the view of a phone with Element Inspector turned on.

4. Installing and Running React-Native-Debugger

This follows the instructions in the docs with some added tips and explanations. React-Native-Debugger is a stand-alone app that you need to download and install.

To-Do:

1. Install RND: brew update && brew cask install react-native-debugger
2. Open the app. RND always starts listening on Port 8081. It should look like the picture below:

3. Hit command-t or ctrl-t to open a new window. This lets you select the Port that you want to listen on.
4. Type in Port 19001 and hit enter. This is the Port number that Expo's Remote Debug JS connects to.

5. RND should open a debugging screen with the title showing that it is connected to Port 19001.
6. If you have not already, run expo start and load walkertreker onto the Expo-Client App.
7. Shake the phone to open the Expo-Client Dev Menu (here is its explanation), and select Remote Debug JS
8. Navigate back to your RND window listening on Port 19001, and you should see your phone connected and RND logging output.

Happy Debugging!