flutter_stetho : Debug Flutter (Network) Menggunakan Chrome Dev Tools

Ada kalanya ketika melakukan development aplikasi mobile, kita perlu melakukan debugging terkait network layaknya inspect web pada browser chrome. Di flutter hal tersebut juga bisa dilakukan dengan menggunakan plugin flutter_stetho. Dengan menggunakan flutter_stetho menjadikan aplikasi flutter dapat diinspect melakukan chrome dev tools, mirip seperti aplikasi web. Dan fitur yang biasanya digunakan untuk analisa adalah monitor network request, kecepatan, waktu, status, ukuran, dsb.

Install

Pada saat tulisan ini dibuat flutter sudah menggunakan versi 1.22.x. Sementara plugin flutter_stetho untuk versi stabil nya hanya support flutter versi 1.9.x. Berikut rinciannya :

• For Flutter 1.7.x, use version 0.3.x
• For Flutter 1.8.x, use version 0.4.x
• For Flutter 1.9.x, use version 0.5.x

Nah, bagi yang sudah menggunakan flutter diatas versi 1.9.x bisa menggunakan versi developmentnya, dengan pada pubspec.yaml menambahkan seperti ini :

flutter_stetho:  
    git:
      url: git://github.com/jasonlewicki/flutter_stetho.git
      ref: master

Selanjutnya pada file main.dart tambahkan seperti ini :

void main() {
  Stetho.initialize();

  runApp(new MyApp());
}

Jika sudah maka selanjutnya jalankan aplikasinya melalui terminal dengan jalankan perintah

flutter run

Lalu buka browser chrome dan jalankan ini :

chrome://inspect

maka akan menampilkan remote target device yang terhubung untuk melakukan inspect. Sisanya seperti melakukan debug di web.