Tuesday, March 12, 2019

React Native Debugging 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.

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. Here we are using android studio for the demonstration, whenever user click on the button, then you can see the console.log messages in logcat section of android studio. Refer the below screenshot for the example.

React Native Debugging Using Console.log()


NOTE : select the currently operating emulator from the logcat section and in the console the console you can see the various android logs details.

Lets use the below complete source code for logging a message in console, that ultimately help you to debug the code.

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()

Check the debugging messages in android logcat.

React Native Debugging Using Console.log()


Also you can refer this react native application article for debugging :
1. React Native Debugging Methods

This is all about React Native Debugging Using Console.log() message in android or ios. Thank 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