Blog

Belajar React Native - React Native Debugging

by
published on
Belajar React Native - React Native Debugging

Debugging adalah sebuah proses untuk melakukan pelacakan pada kode yang kita inginkan.

Untuk program yang sederhana, kita hanya perlu menggunakan console.log saja untuk melakukan debugging.

Akan tetapi, jika aplikasi yang kita buat cukup besar, kita harus bisa meletakkan breakpoint pada baris kode yang mencurigakan.

Walaupun demikian, di manakah hasil console.log dan di manakah kita bisa menset breakpoint?

Inilah yang kita bahas dalam bab ini.

Prinsip Kerja Debugging React Native

Pada prinsipnya, debugging di React Native adalah membuat atau membuka project yang ingin kita debug.

Langkah selanjutnya, jalankan project dengan cara biasa, react-native run-android .

Selanjutnya saat aplikasi sudah tampil di layar, kita membuka menu React Native dengan menekan tombol Ctrl+M di layar emulator dan membuka menu debugging.

Caranya

Agar lebih paham dengan cara debugging di React Native, kita akan melakukannya sambil praktek.

Pertama, buat project React Native baru bernama "Debugging":

react-native init Debugging

Selanjutnya ubah file "App.js" menjadi seperti ini:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class App extends Component<Props> {
  componentWillMount() {
    var someVar = "xcvxcvxcv";

    setTimeout(function() {
      someVar = "ABCDE";
    }, 1000);

    someVar = "123";
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Perhatikan bagian ini:

componentWillMount() {
    var someVar = "xcvxcvxcv";

    setTimeout(function() {
      someVar = "ABCDE";
    }, 1000);

    someVar = "123";
  }

Bagian itulah yang akan kita pasang breakpoint nantinya.

Selanjutnya, jalankan emulator dan jalankan aplikasinya:

react-native run-android

Tunggu hingga layar aplikasi tampil.

Selanjutnya, setelah tampil, buka menu React Native dengan menekan Ctrl+M pada layar emulator.

Nanti akan muncul menu seperti ini:

Selanjutnya klik "Debug JS Remotely".

Nanti layar browser Chrome (jika Anda sudah menginstallnya) akan terbuka di:

http://localhost:8081/debugger-ui/

Dari browser inilah Anda akan melakukan debugging.

Pada layar browser ini, klik kanan > Inspect. Nanti inspector akan terbuka:

Selanjutnya, di layar inspector, buka tab "Sources", kemudian cari file "App.js" di sana:

Pada panel kanan ("App.js"), Anda bisa menset breakpoint pada baris kode yang Anda inginkan.

Cari method componentWillMount dan set breakpoint di sana dengan mengklik line numbernya.

Contoh breakpointnya seperti ini:

Selanjutnya, kembali ke layar emulator dan tekan R dua kali secara cepat.

Nanti layar aplikasi akan direload dan berhenti pada breakpoint pertama.

Dari sini Anda bisa mengontrol aliran instruksi dari kode di file "App.js".

Kontrol tersebut ada di panel kanan:

Di situ Anda bisa:

  • Resume
  • Step Over
  • Step Into
  • Step Out

Di sana juga ada Watch, yang bisa dimasukkan variable yang kita ingin watch:

Selanjutnya, terserah Anda.

Hanya saja, yang perlu Anda ingat adalah, jika Anda menambahkan breakpoint pada kode yang sudah dilewati, Anda harus mereload aplikasi React Native dengan menekan keyboard R dua kali pada layar emulator.

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.