Menggunakan debugger di Android Studio

1. Sebelum memulai

Codelab ini mengajarkan cara menggunakan debugger di Android Studio untuk memeriksa apa yang terjadi di aplikasi Dice Roller saat runtime.

Debugger adalah alat penting yang memungkinkan Anda memeriksa eksekusi kode yang mendukung aplikasi Android sehingga Anda dapat memperbaiki bug di dalamnya. Alat ini memungkinkan Anda menentukan titik untuk menangguhkan eksekusi kode dan berinteraksi secara manual dengan variabel, metode, dan aspek kode lainnya.

Prasyarat

• Pemahaman dasar tentang Android Studio
• Kemampuan untuk membuat dan menjalankan aplikasi Jetpack Compose dasar di Android Studio.
• Telah menyelesaikan codelab Membuat Aplikasi Dice Roller interaktif

Yang akan Anda pelajari

• Cara memasang debugger ke aplikasi Android.
• Cara meluncurkan aplikasi dengan memasang debugger.
• Cara menggunakan beberapa fitur dasar debugger.
• Fungsi umum debugger.

Yang akan Anda butuhkan

• Komputer yang dilengkapi Android Studio
• Kode solusi untuk aplikasi Dice Roller di Compose

2. Menonton video tutorial coding langsung (Opsional)

Jika Anda ingin menonton salah satu instruktur kursus saat tengah menyelesaikan codelab, putar video di bawah.

Sebaiknya luaskan video ke layar penuh (dengan ikon ini di pojok kanan bawah video) agar Anda dapat melihat Android Studio dan kodenya dengan lebih jelas.

Langkah ini opsional. Anda juga dapat melewati video dan langsung memulai petunjuk codelab.

3. Mendapatkan kode awal

Untuk memulai, download kode:

Download ZIP

Atau, Anda dapat membuat clone repositori GitHub untuk kode tersebut:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
$ cd basic-android-kotlin-compose-training-dice-roller

Catatan: Kode awal berada di cabang main dari repositori yang didownload.

Anda dapat menjelajahi kode di repositori GitHub.

4. Menjalankan debugger

Ada dua cara untuk menjalankan debugger bersama aplikasi Anda:

• Memasang debugger ke proses aplikasi yang ada yang berjalan pada perangkat atau emulator.
• Menjalankan aplikasi dengan debugger.

Kedua cara tersebut mencapai hal yang sama sampai batas tertentu. Setelah memahami kedua cara tersebut, Anda dapat memilih mana yang disukai atau mana yang diperlukan.

Memasang debugger ke proses aplikasi

Jika aplikasi sudah berjalan, Anda dapat memasang debugger ke aplikasi.

Untuk memasang debugger ke proses aplikasi, ikuti langkah-langkah ini:

1. Klik Attach Debugger to Android Process.

Dialog Choose Process akan terbuka dan di sini Anda dapat memilih proses yang menjadi tempat pemasangan debugger.

2. Pilih com.example.diceroller lalu klik OK.

Panel Debug muncul di bagian bawah Android Studio dengan pesan yang menunjukkan bahwa debugger dipasang ke perangkat target atau emulator.

Anda telah memasang debugger ke aplikasi. Anda tidak perlu mengkhawatirkan cara meluncurkan atau menggunakan debugger karena hal itu akan dibahas nanti dalam codelab ini. Selanjutnya, Anda akan mempelajari cara meluncurkan aplikasi dengan debugger yang sudah terpasang.

Menjalankan aplikasi dengan debugger

Jika ingin menggunakan debugger sejak awal, Anda bisa menghemat waktu saat menjalankan aplikasi dengan debugger. Selain itu, jika ingin men-debug kode yang hanya berjalan saat aplikasi diluncurkan, Anda perlu meluncurkan aplikasi dengan debugger yang sudah terpasang.

Untuk menjalankan aplikasi dengan debugger, ikuti langkah-langkah berikut:

1. Di panel Debug, klik Stop, lalu tutup aplikasi di perangkat atau emulator.

2. Klik Debug 'app'.

Panel Debug yang sama akan muncul di bagian bawah Android Studio dengan beberapa output konsol.

Sekarang Anda sudah mengetahui cara meluncurkan debugger. Selanjutnya, Anda akan mempelajari cara menggunakannya.

5. Menggunakan debugger

Panel Debug

Anda mungkin melihat bahwa ada beberapa tombol di bagian atas panel Debug, tetapi tombol ini tidak terlalu penting saat ini. Sebagian besar tombol berwarna abu-abu dan tidak dapat diklik. Bagian ini membahas fitur yang lebih umum digunakan di debugger. Codelab ini akan menjelaskan tombol lainnya yang berguna.

Saat pertama kali meluncurkan debugger, Anda akan melihat sejumlah tombol di panel Debug. Di bagian atas panel Debug, Anda akan melihat tombol Debugger dan Console.

Tombol Console menampilkan output logcat aplikasi. Jika Anda memiliki laporan log dalam kode, output akan ditampilkan saat bagian kode tersebut dieksekusi.

Tombol Debugger menampilkan tiga panel terpisah, yang saat ini kosong karena Anda tidak menggunakan debugger:

1. Tampilan frame
2. Evaluasi dan entri ekspresi yang dipantau
3. Panel variabel

Menggunakan fitur debugger umum

Menetapkan titik henti sementara

Salah satu fitur utama debugger adalah debugger memungkinkan Anda menghentikan eksekusi pada baris kode tertentu dengan titik henti sementara.

Untuk menetapkan titik henti sementara di Android Studio, Anda harus membuka baris kode tertentu, lalu mengklik di gutter di samping nomor baris. Untuk membatalkan penyetelan titik henti sementara, Anda perlu mengklik titik henti sementara yang ada di gutter agar terlihat.

• Untuk mencobanya sendiri, tetapkan titik henti sementara tempat variabel imageResource ditetapkan.

Menggunakan tombol Resume Program

Di bagian terakhir, Anda akan menetapkan titik henti sementara tempat variabel imageResource ditetapkan. Dengan titik henti sementara ini, eksekusi akan ditangguhkan sesuai petunjuk ini. Saat eksekusi kode ditangguhkan dengan debugger, Anda mungkin perlu melanjutkan eksekusi untuk terus menjalankan aplikasi. Cara langsung untuk melakukan hal ini adalah dengan menggunakan tombol Resume Program.

Untuk melanjutkan program, ikuti langkah-langkah berikut:

1. Klik Debug 'app'. Anda akan melihat tampilan seperti gambar ini setelah aplikasi diluncurkan:

Sebelum melanjutkan program ini, kami akan menjelaskan berbagai hal yang akan Anda lihat di layar ketika debugger menangguhkan eksekusi:

• Sekarang sudah banyak tombol di panel Debug yang dapat diklik.
• Panel Frame menampilkan banyak informasi, mencakup referensi yang ditandai ke baris tempat titik henti sementara ditetapkan.
• Panel Variables menampilkan sejumlah item, tetapi aplikasi ini tidak memiliki banyak variabel sehingga saat ini tidak banyak informasi yang relevan dalam cakupan codelab ini. Namun, kemampuan untuk memeriksa variabel adalah fitur penting debugger karena menghasilkan insight tentang berbagai hal yang terjadi dalam kode saat runtime. Codelab ini membahas lebih detail cara memeriksa variabel nanti.

Jika melihat aplikasi di perangkat atau emulator, Anda akan melihat bahwa layar kosong karena aplikasi ditangguhkan di baris kode. Lebih khusus lagi, eksekusi akan dihentikan pada titik henti sementara dan UI belum dirender.

Perlu diingat bahwa aplikasi tidak akan selalu langsung berhenti hanya karena titik henti sementara telah ditetapkan. Ini bergantung pada tempat Anda menempatkan titik henti sementara dalam kode. Dalam hal ini, Anda menempatkannya pada baris yang dijalankan saat aplikasi dimulai.

Hal utama yang harus diingat adalah aplikasi hanya ditangguhkan pada titik henti sementara saat upaya untuk mengeksekusi baris tempat titik henti sementara ditetapkan. Ada beberapa cara untuk memajukan debugger, tetapi untuk saat ini Anda menggunakan tombol Resume Program.

2. Klik Resume Program.

Anda akan melihat sesuatu yang terlihat seperti gambar ini:

Sebagian besar informasi akan hilang dan tombol sekali lagi tidak dapat diklik. Aplikasi juga akan muncul seperti biasa di perangkat atau emulator. Alasannya karena kode tidak lagi ditangguhkan pada titik henti sementara dan aplikasi sedang berjalan dalam status normal. Debugger telah terpasang, tetapi fungsinya terbatas hingga ada upaya untuk mengeksekusi baris kode yang memiliki titik henti sementara yang ditetapkan. Biarkan saja titik henti sementara ini karena akan berguna dalam contoh berikut.

Menggunakan tombol Step Into

Tombol Step Into debugger adalah cara praktis untuk lebih memahami kode saat runtime. Jika sebuah petunjuk membuat panggilan ke metode atau potongan kode lainnya, tombol Step Into memungkinkan Anda memasukkan kode tanpa perlu menavigasi ke sana secara manual sebelum meluncurkan debugger untuk menetapkan titik henti sementara.

Untuk menggunakan tombol Step Into, ikuti langkah-langkah berikut:

1. Buat titik henti sementara dalam isi lambda setContent di fungsi onCreate() class MainActivity tempat fungsi DiceRollerApp() dipanggil.

2. Klik Debug ‘app' untuk menjalankan kembali aplikasi dengan debugger. Eksekusi ditangguhkan di baris tempat fungsi DiceRollerApp() dipanggil.
3. Klik Step Into.

Sekarang baris 40 telah ditandai dan panel Frame di panel Debug menunjukkan bahwa kode ditangguhkan di baris 40.

Jika panel Frame diluaskan, Anda dapat melihat bahwa baris setelah baris yang ditandai dimulai dengan invoke: lalu diikuti dengan nomor baris, yaitu 32 pada gambar sebelumnya. Ini disebut sebagai stack panggilan. Pada dasarnya, stack panggilan ini menunjukkan rantai panggilan yang mengarahkan eksekusi kode ke baris saat ini. Dalam hal ini, baris 32 berisi petunjuk yang memanggil fungsi DiceRollerApp().

Saat Anda mengklik tombol Step Into ketika debugger berhenti pada titik henti sementara yang ditetapkan pada panggilan fungsi tersebut, debugger akan masuk ke fungsi tersebut sehingga akan mengarahkan eksekusi ke baris 40 tempat fungsi dideklarasikan. Baris yang ditandai menunjukkan tempat eksekusi ditangguhkan. Jika baris setelah baris yang ditandai memiliki nomor baris yang terkait dengannya, hal tersebut merupakan indikasi jalur eksekusi. Dalam kasus khusus ini, debugger akan menunjukkan bahwa instruksi pada baris 32 akan membawa Anda ke baris 40.

4. Klik Resume Program.

Tindakan ini akan mengarahkan Anda ke titik henti sementara yang telah ditetapkan. Anda mungkin telah sedikit lebih memahami apa yang Anda lihat ketika menghentikan eksekusi pada contoh pertama. Ini adalah gambar yang sama dari langkah keenam dalam bagian Resume program:

Di stack panggilan, Anda dapat melihat bahwa fungsi DiceWithButtonAndImage() ditangguhkan di baris 50 dan fungsi dipanggil dari baris 41 di fungsi DiceRollerApp() yang dipanggil di baris 32. Fitur stack panggilan dapat membantu Anda memahami jalur eksekusi. Hal ini sangat berguna ketika fungsi dipanggil dari berbagai tempat di aplikasi.

Tombol Step Into memberikan cara untuk masuk ke dalam fungsi dan menangguhkan eksekusi tanpa perlu menetapkan titik henti sementara dalam fungsi itu sendiri. Dalam hal ini, Anda telah menetapkan titik henti sementara pada panggilan ke fungsi DiceRollerApp(). Saat Anda mengklik tombol Step Into, eksekusi akan ditangguhkan dalam fungsi DiceRollerApp().

Dice Roller bisa dibilang merupakan sebuah aplikasi yang sederhana karena tidak ada banyak file, class, atau fungsi. Saat Anda bekerja dengan aplikasi yang lebih besar, fitur Step Into dari debugger menjadi lebih berguna karena memberi Anda opsi untuk melihat perincian kode tanpa perlu menavigasi kode sendiri.

Menggunakan tombol Step Over

Tombol Step Over menyediakan cara lain untuk menelusuri kode aplikasi saat runtime. Kode ini akan memindahkan eksekusi ke baris kode berikutnya dan mempercepat debugger.

Untuk menggunakan tombol Step Over, ikuti langkah-langkah berikut:

• Klik Step Over.

Sekarang Anda melihat bahwa debugger menangguhkan kode pada baris eksekusi berikutnya, yaitu baris 51. Anda dapat melanjutkan ke setiap baris secara berurutan.

Menggunakan tombol Step Out

Fungsi dari tombol Step Out adalah kebalikan dari tombol Step Into. Tombol Step Out akan mengarahkan ke stack panggilan, bukan melihat rincian stack panggilan.

Untuk menggunakan tombol Step Out, ikuti langkah-langkah berikut:

1. Klik Step Out.

Dapatkah Anda menebak baris program yang ditangguhkan?

2. Perhatikan bahwa debugger keluar dari fungsi DiceRollerApp() dan kembali ke baris yang memanggilnya.

Tombol Step Out adalah alat yang berguna ketika posisi Anda berada terlalu dalam di stack panggilan metode. Dengan bantuan tombol ini, Anda dapat meningkatkan stack panggilan tanpa perlu menelusuri semua kode untuk setiap metode yang Anda masuki.

Memeriksa variabel

Sebelumnya di codelab ini, ada deskripsi singkat tentang panel Variabel, yang memberikan penjelasan lebih mendalam mengenai cara memeriksa variabel yang ditampilkan di panel untuk membantu Anda men-debug masalah di aplikasi.

Untuk memeriksa variabel, ikuti langkah-langkah berikut:

1. Klik titik henti sementara untuk menghapusnya dari tempat fungsi DiceRollerApp() dipanggil, tetapi biarkan titik henti sementara tempat variabel imageResource ditetapkan.
2. Klik Debug 'app'. Anda akan melihat bahwa variabel result$delegate adalah MutableState dengan nilai 1. Ini karena saat variabel ditentukan, instance-nya akan dibuat dengan mutableStateOf 1. MutableState berarti bahwa variabel hasil memiliki status yang dapat diubah.

Catatan: Variabel result$delegate di panel Variables merujuk pada variabel result dalam kode. Notasi $delegate ada karena variabel result adalah delegasi remember.

3. Klik Resume Program.
4. Di aplikasi, klik Roll. Kode Anda ditangguhkan lagi di titik henti sementara dan Anda mungkin melihat nilai yang berbeda untuk variabel result$delegate.

Dalam gambar ini, status yang dapat diubah dari variabel result$delegate memiliki nilai 2. Hal ini menunjukkan cara memeriksa variabel saat runtime dengan debugger. Dalam aplikasi yang lebih lengkap, nilai variabel dapat menyebabkan error. Saat menggunakan debugger untuk memeriksa variabel, Anda dapat memperoleh lebih banyak analisis mengenai detail error sehingga Anda dapat memperbaiki bug.

6. Kesimpulan

Selamat! Anda telah menggunakan debugger di Android Studio.

Ringkasan

• Memasang debugger ke aplikasi.
• Meluncurkan aplikasi dengan debugger yang sudah terpasang.
• Mendapatkan pemahaman seputar panel debugger.
• Menetapkan titik henti sementara.
• Melanjutkan program dari debugger.
• Menggunakan tombol Step Into.
• Menggunakan tombol Step Over.
• Menggunakan tombol Step Out.
• Memeriksa variabel dengan debugger.