Reputation: 16790

How to do logging in React Native

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

Upvotes: 481

Answers (30)

Yinfeng

Reputation: 5211

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 the Chrome Developer tools JavaScript console to view console.log

Edit 2023

You can just do console.log and it will print to the terminal you're running react-native in without any special commands

Upvotes: 429

Vizard

Reputation: 159

Edit the start script in package.json to

react-native start & react-native log-android

This will concurrently run both scripts

Upvotes: 1

Aliaksei Litsvin

Reputation: 1261

If you use an iOS simulator, you can open system console log on Mac.

⌘ + space, type "console", press Enter to open the system console log, and select your simulator.

Upvotes: 0

alexanderdavide

Reputation: 1675

If you are using VSCode and run your emulator with VSCode React Native Tools, you can see console.* statements in the output tab. Make sure to select the correct subtab in the dropdown within the output tab. Mine currently is named LogCat - emulator-5554.

Upvotes: 4

Raj D

Reputation: 535

Use the React Native debugger for logging and Redux store - https://github.com/jhen0409/react-native-debugger

Just download it and run as software. Then enable Debug mode from the simulator.

It supports other debugging features, just like element in Google Chrome developer tools, which helps to see the styling provided to any component.

Last complete support for Redux development tools.

Upvotes: 4

Vigeesh Kumar V G

Reputation: 191

You can go with console.log or the debugger available with React Native. For Redux, use Reactotron (recommended) or react-native-debugger. Flipper from Facebook is also good for debugging.

Upvotes: 0

Sid009

Reputation: 501

Where you want to log data, use

console.log("data")

And to print this log in the terminal, use this command for Android:

npx react-native log-android

And for iOS:

npx react-native log-ios

Upvotes: 21

Sjonchhe

Reputation: 828

There are multiple ways to log.

console.warn() will go through the log in the mobile screen itself. It can be useful if you want to log small things and don’t want to bother opening console.

Another is console.log(), for which you will have to open the browser's console to view the logs. With the newer React Native 0.62+, you can see the log in node itself. So they've made it much the easier to view logs in newer version.

Upvotes: 0

Anus Kaleem

Reputation: 564

There are several ways to achieve this, and I am listing them and including cons in using them also.

You can use:

console.log and view logging statements on, without opting out for the remote debugging option from dev tools, Android Studio and Xcode. Or you can opt out for the remote debugging option and view logging on Google dev tools, Visual Studio Code or any other editor that supports debugging. You have to be cautious as this will slow down the process as a whole.
You can use console.warn, but then your mobile screen would be flooded with those weird yellow boxes which might or might not be feasible according to your situation.
The most effective method that I came across was to use a third-party tool, Reactotron. It is a simple-and-easy-to-configure tool that enables you to see each logging statement of different levels (error, debug, warn, etc.). It provides you with the GUI tool that shows all the logging of your application without slowing down the performance.

Upvotes: 1

Frankjs

Reputation: 565

There is a debugger tool in which you can see your console messages on top of your device screen. So you don't need to connect to any remote debugger that will slow down your animation or anything. You can check it here:

https://github.com/fwon/RNVConsole

Or use expo to have a try - https://snack.expo.io/SklJHMS3S

Upvotes: 1

Ravin Gupta

Reputation: 853

You can also use Reactotron. It will give you a lot more functionality than just logging.

Upvotes: 3

Innocent TRA BI

Reputation: 63

Put console.log("My log text") in your code
go to your command line tools
position oneself in its development folder

In Android:

write this command: React-native log-android

In iOS:

write this command: React-native log-ios

Upvotes: 3

Chetan Sheladiya

Reputation: 67

Every developer is facing this issue of debugging with React Native, and even I faced it too. I refer to this and the solution is sufficient for me at the initial level. It covers a few ways that help us to try and use whatever is comfortable with us.

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

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

Upvotes: 3

Thamizhselvan

Reputation: 144

console.log can be used for any JavaScript project.

If you running the app in localhost then obviously it is similar to any JavaScript project. But while using the simulator or any device, connect that simulator to our localhost and we can see it in the console.

Upvotes: 1

David Hudman

Reputation: 321

Users with Windows and Android Studio:

You're going to find it under Logcat in Android Studio. There are a lot of logging messages that show up here, so it may be easier for you to create a filter for "ReactNativeJS" which will only show your console.log messages that are created inside your React Native application.

Upvotes: 1

keerthi c

Reputation: 71

You can do this by two methods

by using warn

 console.warn("something " + this.state.Some_Sates_of_variables);

By using Alert. This is not good every time. If it reaches an alert then each time a popup will be opened, so if doing looping it means it is not preferable to use this.
```
 Import the {Alert} from 'react-native'

// Use this alert
Alert.alert("something " +this.state.Some_Sates_of_variables);
```

Upvotes: 1

Waheed Akhtar

Reputation: 3187

There are normally two scenarios where we need debugging.

When we are 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 JavaScript remotely is the best option.
Another case is the UI and styles related issues where we need to check the styling of the component. In that case, react-dev-tools is the best option.

Both of the methods are mentioned here.

Upvotes: 1

uday

Reputation: 13

Just console.log('debug');.

And running it, you can see the log in the terminal/command prompt.

Upvotes: -1

Omar Samman

Reputation: 613

There are three methods that I use to debug when developing React Native applications:

console.log(): shows in the console
console.warn(): shows in the yellow box at the bottom of the application
alert(): shows as a prompt just like it does on the web

Upvotes: 26

Paulin Trognon

Reputation: 813

If you are on OS X and using an emulator, you can view your console.logs directly in Safari's web inspector.

Safari → Development → Simulator - [your simulator version here] → JSContext

Upvotes: 5

Mudassir Khan

Reputation: 1782

There are two options to debug or get the output of your React Native application when using:

1. The emulator or a real device

For first using the emulator, use:

react-native log-android

react-native log-ios

to get the log output

2. On a 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 the console tab.

Upvotes: 5

Jatin parmar

Reputation: 444

It's 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 the browser console. If you want to check the device log or, say, a production APK log, you can use:

adb logcat

adb -d logcat

Upvotes: 5

Daniel Agus Sidabutar

Reputation: 349

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

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

Upvotes: 11

Nirali

Reputation: 11

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

Upvotes: 1

Arun kumar

Reputation: 1081

console.log() is the easy way to debug your code, but it needs to be used with the arrow function or bind() while displaying any state. You may find Stack Overflow question How can I print state in the console with React Native? useful.

Upvotes: 2

Tanumay Ghosh

Reputation: 73

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

Upvotes: 2

EngsSH

Reputation: 41

The react-native-xlog module, that can help you, is WeChat's Xlog for React Native. That can output in the Xcode console and log file, and 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');

Upvotes: 4

Martin Konicek

Reputation: 40944

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

Upvotes: 436

goodhyun

Reputation: 5002

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

Visual Studio Code is, more often than not, React Native friendly.

Upvotes: 26

Mr Speaker

Reputation: 3107

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

Upvotes: 7

How to do logging in React Native

Answers (30)

1. The emulator or a real device

2. On a real device, shake your device.

Related Questions