Setup React-Native For Android App Development On Windows – Part 3

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, 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):




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s