How can I log a variable in React Native, like using console.log
when developing for web?
-
Try out react-native-log-ios npm pkg, it works out of the box without remote JS debugging. – anni Nov 5 '18 at 12:09
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
-
48
-
3@sandy See this answer. It's not specifically for Atom, but can be used in non XCode (aka non macOS) development – alexdriedger Aug 23 '17 at 8:02
-
23Note 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
-
1And 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 3:21
-
1just 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
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
-
2This is very helpful since starting the debugger up makes animations slooooow. – jcollum Nov 13 '16 at 16:12
-
14This 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) <Notice>: Service only ran for 0 seconds. Pushing respawn out by 10 seconds. – rptwsthi Jan 11 '18 at 15:36 -
-
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
-
1
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.
-
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 1: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 9 '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: 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.0adb logcat
continues to work with or without react-native tools installed. – Shaun Wilson Feb 10 at 19:26
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
-
3any way to filter only from console.log? – user6791424 Mar 19 '18 at 4: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:07
Visual Studio Code has a decent debug console that can show your console.log.
VS Code is, more often than not, React Native friendly.
-
8Can 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 github.com/Microsoft/vscode-react-native though. – goodhyun May 21 '16 at 9:06
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
orreact-native run-ios
- Open developer menu
- Mac:
⌘+D
for iOS or⌘M
for Android iOS - Windows/Linux: Shake Android phone
- Mac:
- Select
Debug JS Remotely
- This should launch the debugger in Chrome
- In Chrome:
Tools -> More Tools -> Developer Options
and make sure you are on theconsole
tab
Now whenever a console.log
statement is executed, it should appear in Chrome Dev Tools. The official documentation is here.
-
2This may slow down the performance of the app during development. – Andrien Pecson Oct 19 '17 at 1:21
There are 3 methods that I use to debug when developing React Native apps:
console.log()
: shows in consoleconsole.warn()
: shows in yellow box bottom of applicationalert()
: shows as a prompt just like it does in web
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'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
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!).
Press [command + control + Z] in Xcode Simulator, choose Debug JS Remotely, then press [command + option + J] to open Chrome developer tools.
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
-
Everything shows up on ADB except for the
console.log
andconsole.warn
statements. – Andrew Koster Oct 17 '19 at 5: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. androidcentral.com/10-basic-terminal-commands-you-should-know – jatin.7744 Nov 11 '19 at 5:52
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.
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.
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.
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
- 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
Use react native debugger for logging and redux store
https://github.com/jhen0409/react-native-debugg
Just download it and run as software then enable Debug mode from the simulator.
It supports other debugging feature just like element in chrome developer tools, which helps to see the styling provided to any component.
Last complete support for redux dev tools
- 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
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.
If you are on osx and using an emulator, you can view your console.log
s directly in safari web inspector.
Safari => Development => Simulator - [your simulator version here] => JSContext
You can do this in 2 methods
1> by using warn
console.warn("somthing " +this.state.Some_Sates_of_variables);
2> By using Alert This is not good each times if it reaches alert then each time pop will be opened so if doing looping means not preferable to use this
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
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.
You can use Reactotron also, it will give you lot more functionality than just logging. https://github.com/infinitered/reactotron
There are several ways to achieve this, 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 remote debugging option from dev tools, Android Studio and Xcode. or you can opt out for remote debugging option and view logging on chrome dev tools or vscode 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. - Most effective method that I came across is to use a third party tool, Reactotron. 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 app without slowing down the performance.
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.
Where you want to log data use
console.log("data")
And to print this log in terminal use command for android
npx react-native log-android
and for iOS
npx react-native log-ios
console.log()
is the best and simple way to see your log on console when you use remote js debugger from your developer menu
There is normally two scenarios where we need debugging.
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.
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.