React Native - Debugging14 Nov 2017
- React Developer Tools
- Remote Redux DevTools
- [RECOMMENDED] React Native Debugger (RND)
React Developer Tools
it’s a standalone version of an official Remote Debugger - Chrome Developer Tools (CDT).
react-devtools connects to simulator automatically (additional configuration
for Android is required).
Remote Redux DevTools
[RECOMMENDED] React Native Debugger (RND)
- Developer Tools (CDT - RND is based on CDT)
- React DevTools
- Redux DevTools
so RND is an all-in-one solution - there’s no need to install other tools separately.
use RND as Remote Debugger
Remote Debugger is opened automatically when application is launched and
Debug JS Remotely option is enabled in Developer Menu.
export REACT_DEBUGGER="open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args"
--args option in the end prevents from opening current application
directory in Finder after launching React Native Debugger.
record network log
it’s not sufficient to press
Record network log button only.
window configuration tips
it’s convenient to dock Developer Tools to bottom and hide either React or Redux DevTools - this way there’s enough space to the right of RDN to place emulator side by side with RDN.
IMO there’s no sense in displaying both React and Redux DevTools at the same
time - show/hide React DevTools (Inspector) with
<D-M-j> and Redux DevTools
<D-M-k> on demand (BTW it’s easier to use
Option keys to
the right of
Space key instead of the ones to the left).
when React DevTools are hidden, emulator’s built-in Inspector is used which is also very handy - turn on React DevTools only when it’s strictly necessary to explore React component hierarchy in more detail (I find built-in Inspector more convenient for simple cases since results are shown right in emaulator’s window).