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 Debug Console bawaan, dan 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 dalam ruang kerja untuk aplikasi web (Chrome) dan aplikasi Flutter (Android, Chrome). Pratinjau Android dan Chrome mendukung hot reload dan hot refresh, serta menawarkan kemampuan emulator penuh.
Untuk mempelajari pratinjau Firebase Studio lebih lanjut, 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 bagikan masukan Anda setelah Anda mencobanya:
Tambahkan konsol web ke ruang kerja Firebase Studio Anda:
- Buka Setelan dengan mengklik
atau menekan
Ctrl + ,(di Windows/Linux/ChromeOS) atauCmd + ,(di MacOS). - Temukan setelan Firebase Studio: Web Dev Tools dan aktifkan. Jika mengedit file
settings.jsonsecara langsung, Anda dapat menambahkan"IDX.webDevTools": true. - Muat ulang jendela browser untuk memuat ulang ruang kerja Firebase Studio.
- Buka Setelan dengan mengklik
atau menekan
Buka pratinjau web di Firebase Studio: Buka palet perintah (
Cmd+Shift+Pdi Mac atauCtrl+Shift+Pdi ChromeOS, Windows, atau Linux) dan pilih Firebase Studio: Tampilkan Pratinjau Web.Panel konsol web diciutkan dalam panel pratinjau web secara default. Klik panel atau tarik ke atas untuk meluaskannya.
Panel konsol web di pratinjau web Firebase Studio berfungsi serupa dengan konsol lainnya, seperti yang tersedia di Chrome DevTools:
- Error JavaScript dan pernyataan
console.logakan muncul di sana saat Anda menggunakan aplikasi.- Untuk error dan peringatan, Anda juga memiliki opsi untuk mendapatkan bantuan dari Gemini dengan memilih tombol Pahami error ini di sebelah kanan pesan error.
- Anda dapat mengevaluasi JavaScript arbitrer dalam konteks pratinjau web menggunakan panel 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.
Buka pratinjau web di Firebase Studio: Buka palet perintah (
Cmd+Shift+Pdi Mac atauCtrl+Shift+Pdi ChromeOS, Windows, atau Linux), pilih Firebase Studio: Tampilkan Pratinjau Web.Klik ikon
Run Lighthouse dari toolbar pratinjau web.
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 Analisis halaman untuk membuat laporan.Pembuatan laporan mungkin memerlukan waktu beberapa menit.
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.
Men-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. Saat mendeteksi error, aplikasi akan mencoba memperbaikinya. Jika Anda mendapati bahwa pesan error tersebut tidak dapat menyelesaikan masalah, Anda dapat mencoba beberapa teknik berikut:
Jelaskan masalah: Di antarmuka chat, jelaskan masalah yang Anda alami sejelas dan sesingkat mungkin. Meskipun Gemini mungkin memiliki akses ke konteks seperti pesan error dan log, Gemini mungkin tidak memahami konteks lengkapnya. Menjelaskan perilaku bersama dengan pesan error dapat membantu Gemini memperbaiki error lebih cepat.
Ajukan pertanyaan spesifik: Jangan takut untuk mengajukan Gemini pertanyaan langsung tentang kode Anda. Misalnya, "Apa yang dapat menyebabkan pengecualian pointer null dalam fungsi ini?" atau "Bagaimana cara mencegah kondisi perlombaan ini?"
Membagi masalah kompleks: Jika Anda menangani masalah yang kompleks, bagilah 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 pembatasan kode: Saat membagikan cuplikan kode, gunakan pembatasan kode untuk memastikan kode diformat dengan benar. Hal ini mempermudah 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 yang memperjelas, dan berikan informasi tambahan sesuai kebutuhan.
Hindari loop perintah: Jika Gemini terjebak dalam loop atau tidak dapat menjawab pertanyaan Anda, coba ubah susunan kata perintah atau berikan konteks tambahan. Terkadang, hanya dengan mengubah kata-kata pertanyaan, Gemini dapat memahami apa yang Anda tanyakan.
Jika mengubah rumusan perintah tidak menyelesaikan loop, coba teknik berikut:
Mulai percakapan baru: Jika Anda menggunakan Gemini di chat Firebase di ruang kerja Code, mulai sesi chat 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.