Firebase Studio'da uygulamanızda hata ayıklama

Firebase Studio, uygulamanızda doğrudan çalışma alanınızdan hata ayıklamanın birkaç farklı yolunu 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ı spot kontrolü yapıp test etmeniz için Android ve web önizlemeleri sunar.

Daha kapsamlı ve kesme noktası tabanlı 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 (JavaScript gibi) 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ında 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

Firebase Studio web önizlemesinde küçültülmüş konsol çubuğu

Entegre web konsolu, uygulamanızdaki sorunları doğrudan web önizlemesinden teşhis etmenize yardımcı olur. Web konsoluna, Firebase Studio web önizleme panelinde alttaki çubuğu genişleterek 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çma: 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 hız kontrolü simgesi resmi Lighthouse'u çalıştır simgesini tıklayın.

  3. Firebase Studio'daki Lighthouse panelinin resmi 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'nin yerleşik hata ayıklama konsolunu içerir. Bu konsolu kullanarak uygulamanızda hata ayıklama işlemini gerçekleştirebilirsiniz. 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ı ekleyebilir ve özel başlatma yapılandırmaları 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 kodunuzda hata ayıklamak için sohbet edebilirsiniz.

Gemini sizin için kod yazabilir ancak bazen hatalar da üretebilir. Hata tespit ettiğinde düzeltmeye çalışır. Sorunun hata mesajına göre çözülemediğ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'nın 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 pointer istisnası oluşuyor olabilir?" veya "Bu yarış durumunu 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 ne sorduğunuzu anlamasına yardımcı olabilir.

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

    • Yeni bir sohbet başlatma: Gemini'ı Firebase sohbetinde kullanıyorsanız Code çalışma alanınızda 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ı düzeltmesine 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.