console.log and React Native

The easiest way to view console.log messages is using Chrome.

Select CTRL+M within your Android emulator then select Debug JS Remotely. This will start a Chrome browser window and connect it to a debugger session.

As usual within Chrome, type CTRL+SHIFT+I to view the dev tools and ensure the Console is displayed, now you should see console.log messages in the Chrome console tab.

warn and error

Alternative to using console.log, we can use console.warn and console.error which will display yellow and red pop-ups within the emulator, which Debugging-React Native states are disabled within production builds.

Standalone dev-tools

Interestingly the standalone dev tools seem not to display console.log messages. I think I read something on the chat on the React GitHub issues which suggests console logging is not part of React devtools but supplied by Chrome. However, standalone React devtools offers more debugging tools – such as viewing props/state etc.

To try out the standalone dev tools, run the following

npm install -g react-devtools

Now run

react-devtools