Men-debug aplikasi Anda di Firebase Studio

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Firebase Studio menawarkan beberapa cara untuk men-debug aplikasi, langsung dari ruang kerja Anda. Untuk aplikasi web dan Flutter, konsol web dan Lighthouse terintegrasi langsung ke ruang kerja. Aplikasi Flutter menawarkan pratinjau Android dan web untuk memeriksa dan menguji aplikasi Anda saat Anda membuat kode.

Proses debug yang lebih kaya dan berbasis titik henti sementara juga tersedia untuk sebagian besar bahasa umum, melalui Konsol Debug, serta dapat diperluas dengan ekstensi Debugger dari OpenVSX. Untuk proses debug berbasis titik henti sementara pada kode web frontend (seperti JavaScript), Anda dapat terus menggunakan alat developer bawaan browser, seperti DevTools Chrome.

Melihat pratinjau aplikasi Anda

Firebase Studio mencakup pratinjau aplikasi di ruang kerja untuk aplikasi web (Chrome) dan aplikasi Flutter (Android, Chrome). Pratinjau Android dan Chrome mendukung hot reload dan hot refresh, serta menawarkan kapabilitas emulator lengkap.

Untuk mempelajari lebih lanjut pratinjau Firebase Studio, lihat Mempratinjau aplikasi Anda.

Menggunakan konsol web terintegrasi untuk pratinjau web

Konsol web terintegrasi membantu Anda mendiagnosis masalah di aplikasi langsung dari pratinjau web. Anda dapat mengakses konsol web di panel pratinjau web Firebase Studio dengan meluaskan panel di bagian bawah.

Perhatikan bahwa fitur ini bersifat eksperimental dan tidak diaktifkan secara default. Untuk mengaktifkannya, ikuti langkah-langkah berikut, dan sampaikan masukan Anda setelah Anda mencobanya:

1. Tambahkan konsol web ke ruang kerja Firebase Studio Anda:

   1. Buka Settings dengan mengklik settings atau menekan Ctrl + , (di Windows/Linux/ChromeOS) atau Cmd + , (di MacOS).
   2. Temukan setelan Firebase Studio: Web Dev Tools dan aktifkan. Jika mengedit file settings.json secara langsung, Anda dapat menambahkan "IDX.webDevTools": true.
   3. Refresh jendela browser untuk memuat ulang ruang kerja Firebase Studio Anda.

2. Buka pratinjau web di Firebase Studio: Open the command palette (Cmd+Shift+P di Mac atau Ctrl+Shift+P di ChromeOS, Windows, atau Linux) dan pilih Firebase Studio: Show Web Preview.

3. Panel konsol web diperkecil dalam panel pratinjau web secara default. Klik panel atau tarik ke atas untuk meluaskannya.

Panel konsol web di pratinjau web Firebase Studio memiliki fungsi yang mirip dengan konsol lainnya, seperti yang tersedia di Chrome DevTools:

• Error JavaScript dan pernyataan console.log akan muncul di sana saat Anda menggunakan aplikasi.
  • Untuk error dan peringatan, Anda juga memiliki opsi untuk mendapatkan bantuan dari Gemini dengan memilih tombol Understand this error di sebelah kanan pesan error.
• Anda dapat mengevaluasi JavaScript arbitrer dalam konteks pratinjau web menggunakan kotak perintah di bagian bawah.

Menjalankan Lighthouse untuk pratinjau web

Lighthouse mengaudit aplikasi Anda berdasarkan kategori audit tertentu yang Anda pilih, dan menampilkan laporan dengan temuan dan saran. Anda dapat menjalankan laporan Lighthouse langsung dari pratinjau web di Firebase Studio.

1. Buka pratinjau web di Firebase Studio: Open the command palette (Cmd+Shift+P di Mac atau Ctrl+Shift+P di ChromeOS, Windows, atau Linux), pilih Firebase Studio: Show Web Preview.

2. Klik ikon Run Lighthouse dari toolbar pratinjau web.

3. Di panel Lighthouse, pilih kategori audit yang Anda inginkan. Anda dapat memilih dari laporan yang mengaudit performa, aksesibilitas, kesesuaian dengan praktik terbaik, SEO, dan performa Progressive Web App. Klik Analyze page untuk membuat laporan.

   Pembuatan laporan mungkin memerlukan waktu beberapa menit.

4. Setelah laporan muncul di panel Lighthouse, Anda dapat meninjau temuan untuk setiap kategori audit, atau beralih antar-kategori audit dengan mengklik skor dan nama kategori.

Menggunakan Konsol Debug

Firebase Studio menyertakan Konsol Debug bawaan dari Code OSS. Gunakan konsol ini untuk men-debug aplikasi Anda dengan debugger siap pakai untuk sebagian besar bahasa pemrograman umum, atau tambahkan ekstensi proses debug dari OpenVSX.

Untuk menyesuaikan pengalaman proses debug, Anda juga dapat menambahkan file .vscode/launch.json ke ruang kerja dan menentukan konfigurasi peluncuran kustom. Pelajari lebih lanjut cara menggunakan file konfigurasi peluncuran untuk menyesuaikan proses debug di konfigurasi debug Visual Studio Code.

Melakukan debug dengan Gemini

Anda dapat menggunakan Gemini di Firebase untuk membantu men-debug kode dengan chat di ruang kerja Code atau App Prototyping agent.

Meskipun Gemini dapat menulis kode untuk Anda, terkadang kode tersebut juga akan menghasilkan error. Setiap error yang terdeteksi akan melalui proses perbaikan. Jika menemui masalah dengan pesan error yang tidak dapat diselesaikan, Anda dapat mencoba beberapa teknik berikut:

• Jelaskan masalah tersebut: Di antarmuka chat, jelaskan masalah yang Anda alami sejelas dan sesingkat mungkin. Meskipun memiliki akses ke konteks seperti pesan error dan log, Gemini mungkin tidak memahami konteks lengkapnya. Menjelaskan perilaku beserta pesan error dapat membantu Gemini memperbaiki error lebih cepat.

• Ajukan pertanyaan spesifik: Jangan ragu untuk mengajukan pertanyaan langsung ke Gemini tentang kode Anda. Misalnya, "Apa yang dapat menyebabkan pengecualian pointer null dalam fungsi ini?" atau "Bagaimana cara mencegah kondisi race ini?"

• Uraikan masalah kompleks: Jika Anda menangani masalah yang kompleks, uraikan menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola. Minta Gemini untuk membantu Anda men-debug setiap bagian secara terpisah dan memikirkan masalah secara bertahap.

• Gunakan pembatas kode: Saat membagikan cuplikan kode, gunakan pembatas kode untuk memastikan kode diformat dengan benar. Hal ini memudahkan Gemini untuk membaca dan memahami kode Anda.

• Lakukan iterasi dan tingkatkan kualitas: Gemini mungkin tidak selalu memberikan solusi sempurna pada percobaan pertama. Tinjau respons, ajukan pertanyaan klarifikasi, dan berikan informasi tambahan sesuai kebutuhan.

• Hindari loop perintah: Jika Gemini terjebak dalam loop atau tidak dapat menjawab pertanyaan Anda, coba susun ulang perintah atau berikan konteks tambahan. Terkadang, hanya dengan mengubah kata-kata pertanyaan, Gemini dapat memahami apa yang Anda tanyakan.

  Jika menyusun ulang perintah tidak menyelesaikan loop, coba teknik berikut:

  • Mulai percakapan baru: Jika Anda menggunakan Gemini di chat Firebase di ruang kerja Code, mulai sesi percakapan baru untuk mereset konteks Gemini. Hal ini dapat membantu menghilangkan miskonsepsi atau asumsi yang mungkin dibuat oleh Gemini dalam percakapan sebelumnya.

  • Berikan contoh kontra: Jika Gemini membuat asumsi yang salah, berikan contoh kontra untuk membantunya memahami perilaku yang benar.