Thursday, March 21, 2019

Debug React Native Android or iOS App Using Console log

This tutorial explains how to perform debugging using console.log() in react native application. Console.log() is a inbuilt and predefined function present in javascript. This function is created for both Android and iOS applications and used to maintain and debug errors in apps on run time. Console.log() helps us to detect errors in our code.


Debug React Native Android or iOS App Using Console log


In this example we are using console.log statement inside the function and that function mapped to the button as a click listener. When user perform click event on the button, then it will print console.log statement message in the console. Lets use the below complete source code for logging a message in console, that ultimately help you to debug the code.



React Native Debugging


App.js
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';


export default class App extends Component {


  consoleMessage=()=>{
    alert("clicked");
    console.log("button clicked --- start"); 
    console.log("console message button clicked"); 
    console.log("button clicked --- end"); 

  }

  render() {

    return (
      <View style={styles.container}>
       <Button
            title=" Console Message Example "
            onPress={this.consoleMessage}
            color="#E91E63"
          />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  
});

Screenshot :

React Native Debugging Using Console.log()
If you would like to see the console log statement in react native application, then you need to again execute react-native log-android  command in command prompt in windows and In iOS we would use react-native log-ios  command in terminal.

For example. here we are using debugging statement in android emulator using react native application. lets apply the below command and for more info refer the screenshot.

command used :
react-native log-android

Debug React Native Android or iOS App Using Console log

After that perform click event on the button, then it will print console.log statement message in the console.


Debug React Native Android or iOS App Using Console log

This is all about Debug React Native Android or iOS App Using Console logThank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment