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?

Try out [react-native-log-ios](https://github.com/Annihil/react-native-log-ios) npm pkg, it works out of the box without remote JS debugging. — anni, Nov 05 '18 at 12:09

score 431 · Answer 1 · edited Aug 01 '21 at 22:54

431

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

edited Aug 01 '21 at 22:54

Peter Mortensen

30,738
21
105
131

answered Jun 27 '16 at 14:33

Martin Konicek

39,126
20
90
98

2

This is very helpful since starting the debugger up makes animations slooooow. – jcollum Nov 13 '16 at 16:12
14

This is not working. I get this messge when I run `react-native log-ios` **evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69[948] (com.apple.videosubscriptionsd) : Service only ran for 0 seconds. Pushing respawn out by 10 seconds.** – rptwsthi Jan 11 '18 at 15:36
@rptwsthi I have the same problem. Were you able to solve this? – Ben Jan 12 '18 at 11:20
@Ben I open it today and it worked fine as it were. Did nothing just launched terminal, excuted `react-native run-ios` opened new tab and then ran `react-native log-ios` (Inside project directory of-course). – rptwsthi Jan 12 '18 at 11:59
2

@Denis Kniazhev I don't think there's an option to only log errors, but you can filter the output. If you're on Mac or Linux: react-native log-android | grep "my filter for errors". – Martin Konicek Jan 19 '18 at 14:31
Using Remote JS Debugging as mentioned by @Yinfeng will give you just the logs without output, if you're looking for cleaner logging. – Sun Lee Jun 02 '18 at 04:23
1

console.warn helped me to check certain concerns. – Madhavi Jayasinghe Dec 18 '18 at 03:40
Does not work for me, I only see generic React Native log messages, such as `Initializing React Xplat Bridge.`. – Philipp Ludwig Sep 12 '19 at 15:09
1

Those logging commands don't work at all. They only log fatal exceptions. Anything that you print with `console.log` will not show up. – Andrew Koster Oct 17 '19 at 05:03
1

log-ios results in ```error No active iOS device found``` even though I'm seeing other logs show up via the Console.app – greg7gkb Nov 01 '19 at 23:46

score 422 · Accepted Answer · edited Jan 20 '23 at 00:02

422

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

edited Jan 20 '23 at 00:02

ICW

4,875
5
27
33

answered May 09 '15 at 04:05

Yinfeng

5,131
1
18
15

50

And how to print console log in Android using atom for React Native? – sandy Apr 14 '16 at 06:58
3

@sandy See this [answer](https://stackoverflow.com/a/45833930/7219360). It's not specifically for Atom, but can be used in non XCode (aka non macOS) development – alexdriedger Aug 23 '17 at 08:02
23

Note that as of React Native 0.29 and later, you can get logs without running the debugger. Just run react-native log-ios or react-native log-android on the command line inside your project folder. – Martin Konicek Jan 19 '18 at 14:34
1

And when you open the Remote JS Debugging, you have to press option+command+i and check the console. Totally necessary info that was missing and had me confused. – sudo Jul 10 '18 at 03:21
unfortunately its hard to work with error objects on this, console.dir wont print out the entire error object in this case – Return-1 Jul 17 '18 at 07:42
1

just remember console.log in production version of your app may crash your app in ios. so make sure you check if the environment is development you can know it by __DEV__ global variable in react native. – Yash Ojha Mar 12 '19 at 10:12
The `console` API seems to work without any import, so, having `import console from 'console';` in your file should result in `console.log is not a function` error. – Top-Master May 27 '19 at 05:20
I'm testing on an android device, run from my terminal without android studio, how can I log then? – conor909 Sep 14 '19 at 10:17
I think you need to upgrade your react-native to the latest version, in my case that allows me to show console without enabling js debug trough **ctrl+m** in windows – NMI Feb 22 '20 at 04:08
1

What is the menu option for (⌘+D)? In my case, I press that combination and don't see anything happening. Assuming there is a Simulator option I have relatively misconfigured. – ryanwebjackson May 10 '20 at 17:21
Excellent, how do you read the log in production?... – Dimitri Kopriwa Jul 22 '21 at 15:41

Joe · Answer 3 · 2017-10-17T14:05:12.610

58

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.

edited Oct 17 '17 at 14:05

answered Nov 08 '16 at 16:34

Joe

679
7
11

3

+1 for this simple option. I ended up using a slightly variant command (after I Read The Fine Manual) to get timings also: `adb logcat -v time -s ReactNativeJS` – spechter Feb 14 '17 at 01:53
Keeping debug tab in background produces lag. The solution is to keep the tab in foreground or opening it in a new window. – Sabbir Apr 09 '17 at 11:45
I've been using React Native Debugger for months and it's the best option to avoid the lag Sabbir told: https://github.com/jhen0409/react-native-debugger – Fran Verona Feb 21 '18 at 11:02
`react-native log-android` error Unrecognized command "log-android". `react-native --version` 4.14.0 `adb logcat` continues to work with or without react-native tools installed. – Shaun Wilson Feb 10 '21 at 19:26

score 51 · Answer 4 · edited Jun 17 '18 at 14:29

51

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

edited Jun 17 '18 at 14:29

Ronan Boiteau

9,608
6
34
56

answered Sep 18 '17 at 11:37

omprakash8080

1,211
16
11

3

any way to filter only from console.log? – Mar 19 '18 at 04:40
1

Does not work for me, I only see generic React Native log messages, such as `Initializing React Xplat Bridge.`. – Philipp Ludwig Sep 12 '19 at 15:07

score 27 · Answer 5 · answered Aug 23 '17 at 07:59

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

Install Google Chrome, if you have not already
Run app using react-native run-android or react-native run-ios
Open developer menu
- Mac: ⌘+D for iOS or ⌘M for Android iOS
- Windows/Linux: Shake Android phone
Select Debug JS Remotely
This should launch the debugger in Chrome
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.

This may slow down the performance of the app during development. — Andrien Pecson, Oct 19 '17 at 01:21

score 25 · Answer 6 · edited Aug 01 '21 at 22:53

25

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.

edited Aug 01 '21 at 22:53

Peter Mortensen

30,738
21
105
131

answered May 14 '16 at 14:22

goodhyun

4,814
3
33
25

12

Can you elaborate more on how VS Code can receive debug output from react-native. Thanks! – mike123 May 20 '16 at 12:32
Select 'Debug JS' from your app on the device, and 'Toggle debug console(shift-command-y)' from your view menu on VS Code. You need https://github.com/Microsoft/vscode-react-native though. – goodhyun May 21 '16 at 09:06

score 24 · Answer 7 · edited Aug 01 '21 at 23:16

24

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

edited Aug 01 '21 at 23:16

Peter Mortensen

30,738
21
105
131

answered Aug 31 '18 at 07:17

Omar Samman

573
5
12

score 17 · Answer 8 · edited Aug 02 '21 at 00:06

17

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

edited Aug 02 '21 at 00:06

Peter Mortensen

30,738
21
105
131

answered Oct 29 '20 at 07:52

Sid009

421
5
16

score 10 · Answer 9 · edited Aug 01 '21 at 23:06

10

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

edited Aug 01 '21 at 23:06

Peter Mortensen

30,738
21
105
131

answered Mar 14 '18 at 18:51

Daniel Agus Sidabutar

329
3
6

I'm using this instead the default `start` This will open Debugger as you default debugger instead of Chrome and the `-g` flag will prevent it from hijacking focus on reloads. `"start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"` – flaky Jan 25 '19 at 12:17

score 6 · Answer 10 · edited Aug 01 '21 at 22:53

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

bocai · Answer 11 · 2016-06-29T14:23:30.443

4

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

edited Jun 29 '16 at 14:23

answered Jun 29 '16 at 12:23

bocai

437
2
9

score 4 · Answer 12 · edited Aug 01 '21 at 23:08

4

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

edited Aug 01 '21 at 23:08

Peter Mortensen

30,738
21
105
131

answered Mar 29 '18 at 23:23

Jatin parmar

424
4
13

Everything shows up on ADB except for the `console.log` and `console.warn` statements. – Andrew Koster Oct 17 '19 at 05:10
Yes @AndrewKoster I agree with you, we can view the all logs with ADB but this give you device logs here the query is related to logging a web development. ADB gives you device logs as well you can control and check device configurations. You can gather information from bellow link of ADB commands which can help you while development. https://www.androidcentral.com/10-basic-terminal-commands-you-should-know – Jatin parmar Nov 11 '19 at 05:52

score 4 · Answer 13 · edited Aug 01 '21 at 23:12

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

or

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.

score 3 · Answer 14 · edited Aug 01 '21 at 22:57

3

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');

edited Aug 01 '21 at 22:57

Peter Mortensen

30,738
21
105
131

answered Jan 12 '17 at 02:39

EngsSH

31
2

Ryo-code · Answer 15 · 2017-10-01T17:24:12.410

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.

score 3 · Answer 16 · answered Sep 26 '17 at 08:42

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.

score 3 · Answer 17 · edited Aug 01 '21 at 23:15

3

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

edited Aug 01 '21 at 23:15

Peter Mortensen

30,738
21
105
131

answered Aug 29 '18 at 14:06

Paulin Trognon

762
6
17

score 2 · Answer 18 · edited Aug 01 '21 at 22:58

2

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.

edited Aug 01 '21 at 22:58

Peter Mortensen

30,738
21
105
131

answered Jan 03 '18 at 09:41

Tanumay Ghosh

73
1
8

What is *"debugly"*? – Peter Mortensen Aug 01 '21 at 22:58

score 2 · Answer 19 · edited Aug 01 '21 at 23:00

2

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.

edited Aug 01 '21 at 23:00

Peter Mortensen

30,738
21
105
131

answered Jan 30 '18 at 17:41

Arun kumar

1,041
5
20
39

score 2 · Answer 20 · edited Aug 01 '21 at 23:43

2

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

edited Aug 01 '21 at 23:43

Peter Mortensen

30,738
21
105
131

answered Mar 07 '19 at 06:36

Chetan Sheladiya

57
3

*"[Retiring the Nuclide Open Source Project](https://nuclide.io/)"* – Peter Mortensen Aug 01 '21 at 23:43

Raj D · Answer 21 · 2021-08-02T14:31:35.153

2

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.

edited Aug 02 '21 at 14:31

answered Mar 16 '19 at 07:54

Raj D

485
1
5
11

The GitHub link is broken (404). – Peter Mortensen Aug 01 '21 at 23:47
What do you mean by the last paragraph? Can you elaborate? – Peter Mortensen Aug 01 '21 at 23:47

score 2 · Answer 22 · edited Aug 01 '21 at 23:49

2

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

edited Aug 01 '21 at 23:49

Peter Mortensen

30,738
21
105
131

answered Aug 05 '19 at 11:51

Innocent TRA BI

53
4

score 2 · Answer 23 · edited Aug 01 '21 at 23:50

2

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

edited Aug 01 '21 at 23:50

Peter Mortensen

30,738
21
105
131

answered Aug 10 '19 at 15:18

Ravin Gupta

783
7
13

Highly recommend -- Reactotron gives you a console PLUS full visibility into your redux store PLUS a log of api calls, events, etc. I could not develop in React Native without it – Peter Hollingsworth Mar 24 '21 at 16:32

score 2 · Answer 24 · answered Apr 05 '20 at 14:58

You use the same thing that is used for regular web. The console command also works in this case. For example, you can use console.log(), console.warn(), console.clear() etc.

You can use Chrome Developer to use the console command when you're logging while you are running your React Native app.

score 2 · Answer 25 · answered Aug 15 '21 at 09:51

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.

score 1 · Answer 26 · edited Aug 01 '21 at 23:04

1

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.

edited Aug 01 '21 at 23:04

Peter Mortensen

30,738
21
105
131

answered Mar 06 '18 at 07:28

Nirali

11
4

score 1 · Answer 27 · edited Aug 01 '21 at 23:23

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.

score 1 · Answer 28 · edited Aug 01 '21 at 23:28

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);
```

score 1 · Answer 29 · edited Aug 01 '21 at 23:31

1

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.

edited Aug 01 '21 at 23:31

Peter Mortensen

30,738
21
105
131

answered Nov 03 '18 at 18:40

David Hudman

301
4
8

score 1 · Answer 30 · edited Aug 01 '21 at 23:32

1

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.

edited Aug 01 '21 at 23:32

Peter Mortensen

30,738
21
105
131

answered Nov 23 '18 at 02:16

Thamizhselvan

144
1
5

score 1 · Answer 31 · edited Aug 01 '21 at 23:51

1

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

edited Aug 01 '21 at 23:51

Peter Mortensen

30,738
21
105
131

answered Nov 22 '19 at 07:42

Frankjs

565
1
4
14

score 1 · Answer 32 · edited Aug 01 '21 at 23:55

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.

score 0 · Answer 33 · edited Aug 01 '21 at 23:58

0

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.

edited Aug 01 '21 at 23:58

Peter Mortensen

30,738
21
105
131

answered Jun 02 '20 at 04:46

Sjonchhe

790
8
16

Re *"the log in node itself"*: Do you mean *"the log in [Node.js](https://en.wikipedia.org/wiki/Node.js)* itself? Or something else? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/62145010/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Aug 02 '21 at 00:02

Aliaksei · Answer 34 · 2021-08-27T17:23:00.507

0

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.

edited Aug 27 '21 at 17:23

answered Dec 09 '20 at 17:19

Aliaksei

1,094
11
20

What do you mean by *"open the system console log on MAC address"*? Can you elaborate? – Peter Mortensen Aug 02 '21 at 00:13

score 0 · Answer 35 · edited Aug 02 '21 at 00:18

0

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.

edited Aug 02 '21 at 00:18

Peter Mortensen

30,738
21
105
131

answered Jul 21 '21 at 06:41

Vigeesh Kumar V G

191
1
6

score 0 · Answer 36 · answered Dec 06 '21 at 10:01

0

Edit the start script in package.json to

react-native start & react-native log-android

This will concurrently run both scripts

answered Dec 06 '21 at 10:01

Vizard

149
1
12

score -1 · Answer 37 · edited Aug 01 '21 at 23:17

-1

Just console.log('debug');.

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

edited Aug 01 '21 at 23:17

Peter Mortensen

30,738
21
105
131

answered Sep 06 '18 at 07:22

uday

13
5

Explain more, and add more details. – new Q Open Wid Apr 05 '20 at 14:58
"cd prompt" for "command prompt"? You have got to be kidding us. How cryptic can it get? – Peter Mortensen Aug 01 '21 at 23:21
Guess Peter means to see the logs in metro server for react-native in development/debug mode. So in cmd we can do npm start and it shows all logs. This may not be applicable for install ready build packages. – saurabh Feb 22 '22 at 08:14

How to do logging in React Native

37 Answers37

Steps

1. The emulator or a real device

2. On a real device, shake your device.

Linked