How to do logging in React Native?

Question

How can I log a variable in React Native, like using console.log when developing for web?

Answer 1

This is where Chrome Developer Tools are your friend.

The following steps should get you to the Chrome Developer Tools, where you will be able to see your console.log statements.

Steps

1. Install Google Chrome, if you have not already
2. Run app using react-native run-android or react-native run-ios
3. Open developer menu
   • Mac: ⌘+D for iOS or ⌘M for Android iOS
   • Windows/Linux: Shake Android phone
4. Select Debug JS Remotely
5. This should launch the debugger in Chrome
6. In Chrome: Tools -> More Tools -> Developer Options and make sure you are on the console tab

Now whenever a console.log statement is executed, it should appear in Chrome Dev Tools. The official documentation is here.

Answer 2

I had the same issue: console messages were not appearing in XCode's debug area. In my app I did cmd-d to bring up the debug menu, and remembered I had set "Debug in Safari" on.

I turned this off, and some messages were printed to the output message, but not my console messages. However, one of the log messages said:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

This was because I had previously bundled my project for testing on a real device with the command:

react-native bundle --minify

This bundled without "dev-mode" on. To allow dev messages,include the --dev flag:

react-native bundle --dev

And console.log messages are back! If you aren't bundling for a real device, don't forget to re-point jsCodeLocation in AppDelegate.m to localhost (I did!).

Answer 3

There are two options to debug or get output of your react native application when using

Emulator or Real Device

For First Using Emulator: use

react-native log-android or react-native log-ios

to get the log output

on real device.shake your device

so the menu will come from where you select remote debug and it will open this screen in your browser. so you can see your log output in console tab.

Answer 4

Use console.log, console.warn etc.

As of React Native 0.29 you can simply run the following to see logs in the console:

$ react-native log-ios
$ react-native log-android

Answer 5

console.log() is the easy way to debug your code but it need to be use with arrow function or bind() while displaying any state. You may find the link useful.

Answer 6

Every developer facing this issue of debugging with the react native, even I faced too and I refer this and solution is sufficient for me at initial level, it cover few ways that help us to try and use what ever comfortable with us

1. Debugging with console.log
2. Debugging code (logic) with Nuclide
3. Debugging code(logic) with Chrome
4. Use Xcode to debug GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4