Trying With Expo
By default for instance on Expo@v47.0.3 if you generate an app and try to open the dev menu this is the message you see:
And even with Hermes enabled, Expo does a nice job opening Chrome DevTools for you but while you can see logs and inspect the code source you can't profile performance.
According to Expo docs you could enable React Native Debugger with a few extra steps and have access to its network tab but that didn't seem to work with Expo@v47.0.3 - I was never able to connect to React Native Debugger.
Then I tried chrome://inspect on Android
This also didn't work, I can see console logs but I can't inspect Network nor Profile the app.
What About V8?
Next I thought I would try a different JS engine with Expo since I knew react-native-v8 has done some extra work to implement Chrome's debugging protocols.
Another interesting point was how the open debugger option on the Expo CLI did not work with V8, and I was only able to inspect the running JS by opening the developer menu and choosing the Start Remote Debugging option which opened Chrome for me.
With V8 I was able to get logs and run the performance tab, although this time chrome://inspect didn't find the running JS engine for me to inspect it - I could be doing something wrong with the ports forwarding section.
Up to this point our debug experience is still incomplete. You can get logs and step through code with Expo and Hermes but you can't profile nor see Network logs. And with react-native-v8 you can get logs, step through, and profile but you don't get Network logs.
In its documentation it did mention that you would be able to inspect Network tabs with React Native Debugger but as you noted above we couldn't find a way to figure that out.
Lastly, we know we could use Flipper’s network extension. But Expo doesn’t come with Flipper installed in its default template. After following Expo's documentation on enabling Flipper. Side note, I had to create an Expo account to use their Expo Application Service and make a developer build for Android to finally build Android with the Flipper native module then install the APK locally which allowed me to run Expo dev.
Flipper + React Native V8
Finally, I was able to see Network logs on Flipper, on this attempt I was using react-native-v8.
The above was a pleasant surprise - I was not expecting to see Hermes Debugger's tab work with react-native-v8.
Flipper + Hermes
Using Flipper's Hermes Debugger panel we were also able to profile the app:
Rant: Flipper Network Plugin's Shortcoming
Flipper's Network plugin lacks a network waterfall view similar to Chrome's. This for me has been the second feature I use the most in Chrome's network tab after simple request inspection. Over the years, while fine tuning apps for performance, one thing that has come up over and over is the latency implications caused by a network request waterfall. Without this feature, finding this undesired behavior of network waterfall becomes much harder.
Concluding Debugging with Expo
In order to fulfill all debugging requirements that include the ability to: log; inspect code source and step-through with breakpoints; take memory snapshots; profile CPU; and inspect Network, you have to use Expo's EAS service to create a development build and enable the ability to use Flipper else you will find yourself with a limited debugging experience.
Note, Expo 47 will be shipped with support for the Hermes inspector allowing you profile, snapshot memory, and use that integrated Chrome inspector that comes with Flipper. This means it will only miss a proper way to inspect the Network.
Next: Trying with Bare React Native
Next post we will explore how using a Bare React Native Template without Expo differ's in the development experience.