How to do logging in React Native?

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

console.log works.

By default on iOS, it logs to the debug pane inside Xcode.

From the IOS simulator press (⌘+D) and press Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there use Chrome Developer tools javascript console to view console.log

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

Pre React Native 0.29, run this in the console:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, run:

react-native log-ios

or

react-native log-android

As Martin said in another answer.

This shows all console.log(), errors, notes, etc. and causes zero slow down.

Use console.debug("text");

You will see the logs inside the terminal.

Steps:

• Run the application:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Run the logger:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code has a decent debug console that can show your console.log.

VS Code is, more often than not, React Native friendly.

Press [command + control + Z] in Xcode Simulator, choose Debug JS Remotely, then press [command + option + J] to open Chrome developer tools.

Xcode Simulator Img

refer：Debugging React Native Apps

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.

Something that just came out about a month ago is "Create React Native App," an awesome boilerplate that allows you (with minimal effort) to show what your app looks like live on your mobile device (ANY with a camera) using the Expo app. It not only has live updates, but it will allow you to see the console logs in your terminal just like when developing for the web, rather than having to use the browser like we did with React Native before.

You would, of course, have to make a new project with that boilerplate... but if you need to migrate your files over, that shouldn't be a problem. Give it a shot.

Edit: Actually it doesn't even require a camera. I said that for scanning a QR code, but you can also type out something to sync it up with your server, not just a QR code.

I prefer to recommend you guys using React Native Debugger. You can download and install it by using this command.

brew update && brew cask install react-native-debugger

or

Just check the link below.

https://github.com/jhen0409/react-native-debugger

Happy Hacking!

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!).

react-native-xlog module that can help you,is WeChat's Xlog for react-native. That can output in Xcode console and log file, the Product log files can help you debug.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Development Time Logging

For development time logging, you can use console.log(). One important thing, if you want to disable logging in production mode, then in Root Js file of app, just assign blank function like this - console.log = {} It will disable whole log publishing throughout app altogether, which actually required in production mode as console.log consumes time.

---

Run Time Logging

In production mode, it is also required to see logs when real users are using your app in real time. This helps in understanding bugs, usage and unwanted cases. There are many 3rd party paid tools available in the market for this. One of them which I've used is by Logentries

The good thing is that Logentries has got React Native Module as well. So, it will take very less time for you to enable Run time logging with your mobile app.

Its so simple to get logs in React-Native

Use console.log and console.warn

console.log('character', parameter)

console.warn('character', parameter)

This log you can view in browser console. If you want to check device log or say production APK log you can use

adb logcat

adb -d logcat

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.

You can use remote js debugly option from your device or you can simply use react-native log-android and react-native log-ios for ios.

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.

There are 3 methods that I use to debug in developing react-native apps

     1- console.log() // shows in console
     2- console.warn() // shows in yellow box bottom of application
     3- alert() // shows as a prompt just like it does in web

console.log() is the best and simple way to see your log on console when you use remote js debugger from your developer menu

Chrome Devtool is the best and easiest way for logging and debugging.

If you are on osx and using an emulator, you can view your console.logs directly in safari web inspector.

Safari => Development => Simulator - [your simulator version here] => JSContext

Just console.log('debug');

And run it you can see the log in the terminal/cd prompt .

There is normally two scenarios where we need debugging.

1. When we facing issues related to data and we want to check our data and debugging related to data in that case console.log('data::',data)

   and debug js remotely is the best option.

2. Other case is the UI and styles related issues where we need to check styling of the component in that case react-dev-tools is the best option.

   both of the methods mention here.