Firebase Studio'da uygulamanızda hata ayıklama

Firebase Studio, uygulamanızda hata ayıklamak için doğrudan çalışma alanınızdan kullanabileceğiniz birkaç farklı yöntem sunar. Web ve Flutter uygulamaları için web konsolu ve Lighthouse doğrudan çalışma alanına entegre edilir. Flutter uygulamaları, kod yazarken uygulamanızı hızlıca kontrol edip test edebilmeniz için Android ve web önizlemeleri sunar.

Daha kapsamlı ve kesme noktasına dayalı hata ayıklama, yerleşik hata ayıklama konsolu aracılığıyla en yaygın dillerin çoğunda kullanılabilir ve OpenVSX'teki hata ayıklayıcı uzantılarıyla genişletilebilir. Ön uç web kodunuzda (ör. JavaScript) kesme noktası tabanlı hata ayıklama için tarayıcınızın yerleşik geliştirici araçlarını (ör. Chrome DevTools) kullanmaya devam edebilirsiniz.

Uygulamanızı önizleme

Firebase Studio web uygulamaları (Chrome) ve Flutter uygulamaları (Android, Chrome) için çalışma alanındaki uygulama önizlemelerini içerir. Android ve Chrome önizlemeleri, anında yeniden yükleme ve anında yenileme özelliklerini destekler ve tam emülatör işlevleri sunar.

Firebase StudioÖnizlemeler hakkında daha fazla bilgi edinmek için Uygulamanızı önizleme başlıklı makaleyi inceleyin.

Web önizlemeleri için entegre web konsolunu kullanma

Entegre web konsolu, uygulamanızdaki sorunları doğrudan web önizlemesinden teşhis etmenize yardımcı olur. Web konsoluna, alttaki çubuğu genişleterek Firebase Studio web önizleme panelinden erişebilirsiniz.

Bu özelliğin deneysel olduğunu ve varsayılan olarak etkinleştirilmediğini unutmayın. Bu özelliği etkinleştirmek için aşağıdaki adımları uygulayın ve denedikten sonra geri bildiriminizi paylaşın:

1. Web konsolunu Firebase Studio çalışma alanınıza ekleyin:

   1. simgesini tıklayarak veya Ctrl + , (Windows/Linux/ChromeOS'te) ya da Cmd + , (MacOS'te) tuşuna basarak Ayarlar'ı açın.
   2. Firebase Studio: Web Geliştirme Araçları ayarını bulup etkinleştirin. settings.json dosyanızı doğrudan düzenliyorsanız "IDX.webDevTools": true ekleyebilirsiniz.
   3. Firebase Studioçalışma alanınızı yeniden yüklemek için tarayıcı pencerenizi yenileyin.

2. Web önizlemesini Firebase Studio içinde açma: Komut paletini açın (Mac'te Cmd+Shift+P, ChromeOS, Windows veya Linux'ta Ctrl+Shift+P) ve Firebase Studio: Web Önizlemesini Göster'i seçin.

3. Web Console paneli, varsayılan olarak web önizleme panelinde küçültülür. Çubuğu tıklayın veya yukarı sürükleyerek genişletin.

Firebase Studio web önizlemesindeki web konsolu paneli, Chrome Geliştirici Araçları'nda bulunan konsol gibi diğer konsollara benzer şekilde çalışır:

• Uygulamanızı kullanırken JavaScript hataları ve console.log ifadeleri burada görünür.
  • Hata ve uyarılarla ilgili olarak, hata mesajının sağ tarafındaki Bu hatayı anla düğmesini seçerek Gemini'dan yardım alma seçeneğiniz de vardır.
• En alttaki istem çubuğunu kullanarak web önizlemeniz bağlamında rastgele JavaScript'i değerlendirebilirsiniz.

Web önizlemeleri için Lighthouse'u çalıştırma

Lighthouse, seçtiğiniz denetim kategorilerine göre uygulamanızı denetler ve bulgular ile önerileri içeren bir rapor döndürür. Lighthouse raporlarını doğrudan Firebase Studio web önizlemesinden çalıştırabilirsiniz.

1. Web önizlemesini Firebase Studio içinde açın: Komut paletini açın (Mac'te Cmd+Shift+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Shift+P) Firebase Studio: Web Önizlemesini Göster'i seçin.

2. Web önizleme araç çubuğunda Lighthouse'u çalıştır simgesini tıklayın.

3. Lighthouse panelinde istediğiniz denetleme kategorilerini seçin. Performans, erişilebilirlik, en iyi uygulamalara uygunluk, SEO ve Progresif Web Uygulaması performansı ile ilgili denetim raporları arasından seçim yapabilirsiniz. Raporları oluşturmak için Sayfayı analiz et'i tıklayın.

   Raporların oluşturulması birkaç dakika sürebilir.

4. Raporlar Lighthouse panelinde göründükten sonra her denetleme kategorisiyle ilgili bulguları inceleyebilir veya puanı ve kategori adını tıklayarak denetleme kategorileri arasında geçiş yapabilirsiniz.

Hata Ayıklama Konsolu'nu kullanma

Firebase Studio, Code OSS'deki yerleşik hata ayıklama konsolunu içerir. Bu konsolu kullanarak uygulamanızda hata ayıklama işlemini gerçekleştirebilirsiniz. Konsolda, en yaygın programlama dilleri için kullanıma hazır hata ayıklayıcılar bulunur. Ayrıca OpenVSX'ten bir hata ayıklama uzantısı da ekleyebilirsiniz.

Hata ayıklama deneyiminizi özelleştirmek için çalışma alanınıza .vscode/launch.json dosyası ekleyip özel başlatma yapılandırmaları da belirtebilirsiniz. Hata ayıklamayı özelleştirmek için başlatma yapılandırma dosyalarını kullanma hakkında daha fazla bilgiyi Visual Studio Code hata ayıklama yapılandırması sayfasında bulabilirsiniz.

Gemini ile hata ayıklama

Firebase'da Gemini'ı kullanarak Code çalışma alanınızda veya App Prototyping agent'da sohbet yoluyla kodunuzda hata ayıklayabilirsiniz.

Gemini sizin için kod yazabilir ancak bazen hatalar da üretebilir. Hata tespit ettiğinde düzeltmeye çalışır. Hata mesajı göz önüne alındığında sorunu çözemediğini fark ederseniz aşağıdaki tekniklerden bazılarını deneyebilirsiniz:

• Sorunu açıklayın: Sohbet arayüzünde, karşılaştığınız sorunu olabildiğince net ve kısa bir şekilde açıklayın. Gemini, hata mesajları ve günlükler gibi bağlamlara erişebilse de bağlamın tamamını anlamayabilir. Davranışı hata mesajıyla birlikte açıklamak, Gemini hataları daha hızlı düzeltmesine yardımcı olabilir.

• Ayrıntılı sorular sorun: Kodunuzla ilgili Gemini doğrudan sorular sormaktan çekinmeyin. Örneğin, "Bu işlevde neden null işaretçi istisnası oluşuyor olabilir?" veya "Bu yarış koşulunu nasıl önleyebilirim?"

• Karmaşık sorunları parçalara ayırın: Karmaşık bir sorunla karşı karşıyaysanız sorunu daha küçük ve yönetilebilir parçalara ayırın. Gemini'dan her bölümün hata ayıklamasına ayrı ayrı yardımcı olmasını ve sorunları adım adım düşünmesini isteyin.

• Kod blokları kullanın: Kod snippet'lerini paylaşırken kodun düzgün şekilde biçimlendirilmesi için kod blokları kullanın. Bu sayede Gemini, kodunuzu daha kolay okuyup anlayabilir.

• Tekrar edin ve iyileştirin: Gemini ilk denemede her zaman mükemmel çözümü sunmayabilir. Yanıtları inceleyin, açıklama isteyen sorular sorun ve gerektiğinde ek bilgi verin.

• İstem döngülerinden kaçının: Gemini bir döngüye takılırsa veya sorunuzu yanıtlayamazsa isteminizi yeniden ifade etmeyi ya da ek bağlam bilgisi sağlamayı deneyin. Bazen sorunuzu yeniden ifade etmeniz Gemini'nın ne sorduğunuzu anlamasına yardımcı olabilir.

  İsteminizin yeniden ifade edilmesi döngüyü çözmüyorsa aşağıdaki teknikleri deneyin:

  • Yeni bir sohbet başlatma: Gemini'ı Firebase sohbetinde Code çalışma alanınızda kullanıyorsanız Gemini'ın bağlamını sıfırlamak için yeni bir sohbet oturumu başlatın. Bu, Gemini'nın önceki sohbette yaptığı yanlış anlamaları veya varsayımları ortadan kaldırmaya yardımcı olabilir.

  • Karşıt örnekler verin: Gemini yanlış varsayımlarda bulunuyorsa doğru davranışı anlamasına yardımcı olmak için karşıt örnekler verin.