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 index.android.js, add one line:

add-line-console.png

Open the developer menu by pressing CTRL+M in the emulator, choose Debug JS Remotely, that will open a tab in Chrome:

debug-remotely

Press F12 to open up the DevTool of Chrome:

console-chrome.PNG

Yeah, we can see the log information we wrote, plus the reddish warnings, splendid.

Bring that Developer Menu again, choose Toggle Inspector,

toggle-inspector.png

You would see:

click-secret-area.png

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

moretabs.png

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.

install-react-devtool.png

And update the package.json, adding react-devtools, it now looks like (displayed in a visualized json viewer):

packages.png

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s