A Thorough Guide to Install React Native Debugger to an Expo App
[Updated on March 20, 2019]
React Native Debugger is the holy grail of debugging React Native applications as it combines Chrome Devtools, React Devtools, and Redux Devtools all in one window.
Here I present the steps to install React Native Debugger to an Expo App.
- Download React Native Debugger from the release page.
- Click open the Debugger, ⌘+t to open new window and set port to 19001.
- npm start expo app, open Developer menu, enable “Debug JS Remotely.”
- Setup “__REDUX_DEVTOOLS_EXTENSION__” as shown here.
Most likely,, it should be working!
If you have any issues or want to know some more tips and tricks, read the following in-depth guide.
2. Start React Native Debugger
To start React Native Debugger, manually click open the app.
For MacOS, you can use a CLI script like this.
$ open ‘rndebugger://set-debugger-loc?host=localhost&port=19001’
The port is set to 19001 as Expo’s metro bundler uses that port. However, when you manually click open the app, the port will be set to 8081 as that is the default setting in React Native Debugger.
To set to another port, press ⌘+t to open a new window where you can reset the port to Expo’s metro bundler’s port (default 19001).
3. Start Expo app and Debug JS Remotely
$ npm start
Open your app, open the Developer menu, then enable “Debug JS Remotely”. Now the chrome developer tools should be connected.
In case, to open the developer menu, “shake” with Expo client, “⌘+d” with iOS simulator, “⌘+m” with Android emulator.
For convenience in MacOS, you can wrap step 2 and 3 to one script like this.
4. Setting up React Devtools
If you use Expo client (real device via Wi-Fi), the Docs state that an additional step may be necessary.
Find the setupDevtools.js file at node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js.
Now, the property “host” passed to the function “connectToDevTools” needs to be changed to your local IP address as below.
(Check out your local IP address here)
(You need your “local” IP address, not the “public” IP. The one you get by googling what is my ip? is the public IP)
React devtools should now be running!
5. Setting up Redux Devtools
Since window.__REDUX_DEVTOOLS_EXTENSION__ is already provided, you can include redux devtools with the usual dance.
or if you use other middlewares,
This will do the trick!
In the previous versions of React Native Debugger, redux devtools were not included out of the box. In such cases,
$ npm i redux-devtools-extension
Again, if everything has gone alright, you should see something like this.
P.S To log network requests, right click on the React Devtools or Redux Devtools section and click Enable Network Inspect!
Hoped you liked it! Connect with me on GitHub!