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 bir web konsolu ve Lighthouse doğrudan çalışma alanına entegre edilmiştir. Flutter uygulamaları, kod yazarken uygulamanızı kontrol etmek ve test etmek için Android ve web önizlemeleri sunar.

Yerleşik Hata Ayıklama Konsolu aracılığıyla yaygın olarak kullanılan çoğu dil için daha zengin, hata noktası tabanlı hata ayıklama da kullanılabilir ve OpenVSX'ten gelen hata ayıklayıcı uzantılarıyla genişletilebilir. Ön uç web kodunuzda (ör. JavaScript) hata ayıklama için Chrome DevTools gibi tarayıcınızın yerleşik geliştirici araçlarını kullanmaya devam edebilirsiniz.

Uygulamanızı önizleme

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

Firebase Studio önizlemeleri 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. Alt kısımdaki çubuğu genişleterek Firebase Studio web önizleme panelinde web konsoluna erişebilirsiniz.

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

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

    1. simgesini tıklayarak veya Ctrl + , (Windows/Linux/ChromeOS) ya da Cmd + , (MacOS) tuşuna basarak Ayarlar'ı açın.
    2. Firebase Studio: Web Geliştirici 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'te açma: Komut paletini (Mac'te Cmd+Shift+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Shift+P) açıp Firebase Studio: Web Önizlemesini Göster'i seçin.

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

Firebase Studio web önizlemesindeki web konsolu paneli, Chrome Geliştirici Araçları'ndaki 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ılar için hata mesajının sağındaki Bu hatayı anlama düğmesini seçerek Gemini'den yardım alma seçeneğiniz de vardır.
  • Alttaki istem çubuğunu kullanarak istediğiniz JavaScript'i web önizlemeniz bağlamında değerlendirebilirsiniz.

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

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

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

  2. Web önizleme araç çubuğundan 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 denetim kategorisinin bulgularını inceleyebilir veya puanı ve kategori adını tıklayarak denetim kategorileri arasında geçiş yapabilirsiniz.

Hata Ayıklama Konsolu'nu kullanma

Firebase Studio, Code OSS'den yerleşik Hata Ayıklama Konsolu'nu içerir. En yaygın programlama dilleri için hazır hata ayıklayıcılarla uygulamanızda hata ayıklama yapmak veya OpenVSX'ten hata ayıklama uzantısı eklemek için bu konsolu kullanın.

Hata ayıklama deneyiminizi özelleştirmek için çalışma alanınıza bir .vscode/launch.json dosyası da 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ı başlıklı makalede bulabilirsiniz.

Gemini ile hata ayıklama

Code çalışma alanınızdaki veya App Prototyping agent'daki sohbet özelliğiyle kodunuzda hata ayıklamanıza yardımcı olması için Firebase'te Gemini'yi kullanabilirsiniz.

Gemini sizin için kod yazabilir ancak bazen hata da oluşturabilir. Bir hata tespit ettiğinde hatayı düzeltmeye çalışır. Hata mesajı verilen sorunun çözülmediğ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 açık ve kısa bir şekilde açıklayın. Gemini, hata mesajları ve günlükler gibi bağlama erişebilse de bağlamın tamamını anlayamayabilir. Hata mesajıyla birlikte davranışı açıklamak, Gemini hataların daha hızlı düzeltilmesine yardımcı olabilir.

  • Belirli sorular sorun: Kodunuzla ilgili doğrudan sorular Gemini sormaktan çekinmeyin. Örneğin, "Bu işlevde boş işaretçi istisnasına ne sebep olabilir?" veya "Bu yarış koşulunu nasıl önleyebilirim?"

  • Karmaşık sorunları küçük parçalara ayırın: Karmaşık bir sorunla karşı karşıya kalırsanız sorunu daha küçük ve yönetilebilir parçalara ayırın. Her bir bölümde ayrı ayrı hata ayıklamanıza ve sorunları adım adım düşünmenize yardımcı olması için Gemini'den yardım isteyin.

  • Kod çitleri kullanın: Kod snippet'lerini paylaşırken kodun düzgün biçimlendirildiğinden emin olmak için kod çitleri kullanın. Bu sayede Gemini, kodunuzu daha kolay okuyup anlayabilir.

  • Tekrarlayın ve hassaslaştırın: Gemini her zaman ilk denemede mükemmel çözümü sunmayabilir. Yanıtları inceleyin, açıklayıcı sorular sorun ve gerektiğinde ek bilgiler sağlayın.

  • Sürekli istem döngülerinden kaçının: Gemini bir döngüye takılırsa veya sorunuzu yanıtlayamazsa isteminizi başka şekilde ifade etmeyi veya ek bağlam bilgisi sağlamayı deneyin. Bazen Gemini'nin ne sorduğunuzu anlamasına yardımcı olmak için sorunuzu yeniden ifade etmeniz yeterlidir.

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

    • Yeni bir sohbet başlatın: Gemini'yi Code Workspace'inizdeki Firebase sohbetinde kullanıyorsanız Gemini bağlamını sıfırlamak için yeni bir sohbet oturumu başlatın. Bu, Gemini'nin önceki sohbette yapmış olabileceği yanlış anlamalardan veya varsayımlardan kurtulmanıza yardımcı olabilir.

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