Debugging React Native
Connect To Chrome DevTool
Unfortunately, I have not figured out how to use the standalone React Developer Tool. And I have not found out the correct way to inspect React Native components in Chrome DevTool.
All I can do now, is output some debug information in the console of Chrome browser. I followed the official instructions.
Beforehand, I changed the source code of the sample app created by react-native init. Open index.android.js, add one line:
Open the developer menu by pressing CTRL+M in the emulator, choose Debug JS Remotely, that will open a tab in Chrome:
Press F12 to open up the DevTool of Chrome:
Yeah, we can see the log information we wrote, plus the reddish warnings, splendid.
Bring that Developer Menu again, choose Toggle Inspector,
You would see:
And click the area slightly right above the inspector (but not on text) will change the view as (not sure if it works for everyone the same way, have not found any official docs on that):
Connect To React DevTool
According to its official doc, we can install it locally, so I run npm install –save-dev react-devtools on the project root directory.
And update the package.json, adding react-devtools, it now looks like (displayed in a visualized json viewer):