Firebase Studio'da uygulamanızda hata ayıklama

Firebase Studio, doğrudan çalışma alanınızdan uygulamanızda 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 edip test etmeniz için Android ve web önizlemeleri sunar.

Yerleşik Hata Ayıklama Konsolu aracılığıyla en yaygın diller için kesme noktası tabanlı daha zengin hata ayıklama da kullanılabilir ve OpenVSX'ten Hata Ayıklayıcı uzantıları ile genişletilebilir. Ön uç web kodunuzun (JavaScript gibi) kesme noktası tabanlı hata ayıklaması için tarayıcınızın yerleşik geliştirici araçlarını (ör. Chrome'un Geliştirici Araçları) kullanmaya devam edebilirsiniz.

Uygulamanızı önizleme

Firebase Studio, web uygulamaları (Chrome) ve Flutter uygulamaları (Android, Chrome) için Workspace içi uygulama önizlemeleri içerir. Android ve Chrome önizlemeleri, dinamik yeniden yükleme ve dinamik yenilemeyi destekler ve tam emülatör özellikleri 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

Entegre web konsolu, uygulamanızdaki sorunları doğrudan web önizlemesinden teşhis etmenize yardımcı olur. Firebase Studio web önizleme panelinde, alttaki çubuğu genişleterek web konsoluna 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şlarına basarak Ayarlar'ı açın.
   2. Firebase Studio: Web Geliştirme Araçları ayarını bulun ve 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çın: Komut paletini açın (Mac'te Cmd+Shift+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Shift+P) ve Firebase Studio: Web Önizlemesini Göster'i seçin.

3. Web konsolu paneli, web önizleme panelinde varsayılan olarak küçültülmüş durumdadı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ı'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ı anlayın düğmesini seçerek Gemini'dan yardım alma seçeneğiniz de vardır.
• 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 belirli 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 uygulamasındaki web önizlemesinden çalıştırabilirsiniz.

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

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

3. Lighthouse panelinde, istediğiniz denetim kategorilerini seçin. Performans, erişilebilirlik, en iyi uygulamalara uygunluk, SEO ve Progresif Web Uygulaması performansını denetleyen 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 kategorisiyle ilgili bulguları 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'nin yerleşik hata ayıklama konsolunu içerir. En yaygın programlama dilleri için hazır hata ayıklayıcılarla uygulamanızda hata ayıklamak üzere bu konsolu kullanın veya OpenVSX'ten bir hata ayıklama uzantısı ekleyin.

Hata ayıklama deneyiminizi özelleştirmek için çalışma alanınıza bir .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ıkla

Code çalışma alanınızda veya App Prototyping agent panelinde sohbet ederek kodunuzda hata ayıklamak için Gemini kullanabilirsiniz.

Gemini sizin için kod yazabilir ancak bazen hata da yapabilir. Bir hata tespit ettiğinde bu hatayı düzeltmeye çalışır. Hata mesajı nedeniyle 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 mümkün olduğunca 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ı anlayamayabilir. Hata mesajıyla birlikte davranışın açıklanması, Gemini ekibinin hataları daha hızlı düzeltmesine yardımcı olabilir.

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

• Karmaşık sorunları parçalara ayırın: Karmaşık bir sorunla uğraşıyorsanız sorunu daha küçük ve daha yönetilebilir parçalara ayırın. Gemini'dan her bir parçada ayrı ayrı hata ayıklama yapmanıza ve sorunları adım adım düşünmenize yardımcı olmasını isteyin.

• Kod blokları kullanın: Kod snippet'lerini paylaşırken kodun doğru şekilde biçimlendirildiğinden emin olmak için kod blokları 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 bilgi verin.

• İstem döngülerinden kaçının: Gemini bir döngüye girerse veya sorunuzu yanıtlayamazsa isteminizi yeniden ifade etmeyi veya ek bağlam sağlamayı deneyin. Bazen sorunuzu farklı bir şekilde ifade etmek, Gemini uygulamasının ne sorduğunuzu anlamasına yardımcı olabilir.

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

  • Yeni bir sohbet başlatın: Code çalışma alanınızda Gemini sohbetini kullanıyorsanız Gemini bağlamını sıfırlamak için yeni bir sohbet oturumu başlatın. Bu sayede, Gemini önceki sohbette yapmış olabileceği yanlış anlamalardan veya varsayımlardan kurtulabilir.

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