Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
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
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:
Web konsolunu Firebase Studio çalışma alanınıza ekleyin:
settings simgesini tıklayarak veya Ctrl + , (Windows/Linux/ChromeOS'te) ya da Cmd + , (MacOS'te) tuşuna basarak Ayarlar'ı açın.
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.
Firebase Studioçalışma alanınızı yeniden yüklemek için tarayıcı pencerenizi yenileyin.
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.
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.
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.
Web önizleme araç çubuğunda Lighthouse'u çalıştır simgesini tıklayın.
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.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-07-25 UTC."],[],[],null,["Firebase Studio offers a few different ways to debug your app, directly\nfrom your workspace. For web and Flutter apps, a web console and\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\nare directly integrated into the workspace. Flutter apps offer Android and web\npreviews to spot-check and test your app while you code.\n\nRicher, breakpoint-based debugging is also available for most common languages,\nthrough the built-in Debug Console, and extensible with [Debugger extensions\nfrom OpenVSX](https://open-vsx.org/?category=Debuggers). For\nbreakpoint-based debugging of your frontend web code (like JavaScript), you can\ncontinue using your browser's built-in developer tools, like\n[Chrome's DevTools](https://developer.chrome.com/docs/devtools).\n\nPreview your app\n\nFirebase Studio includes\n[in-workspace app previews](/docs/studio/preview-apps) for web apps (Chrome)\nand Flutter apps (Android, Chrome). The\nAndroid and Chrome previews support hot reload and hot refresh, and offer full\nemulator capabilities.\n\nTo learn more about Firebase Studio previews, see\n[Preview your app](/docs/studio/preview-apps).\n\nUse the integrated web console for web previews\n\nThe integrated web console helps you diagnose issues in your app directly\nfrom the web preview. You can access the web console in the\nFirebase Studio web preview panel by expanding the bar at the bottom.\n\nNote that this feature is experimental and isn't enabled by default. To\nturn it on, follow these steps, and [share your\nfeedback](/support/troubleshooter/studio) after\nyou've tried it out:\n\n1. Add the web console to your Firebase Studio workspace:\n\n 1. Open **Settings** by clicking settings or pressing `Ctrl + ,` (on Windows/Linux/ChromeOS) or `Cmd + ,` (on MacOS).\n 2. Find the **Firebase Studio: Web Dev Tools** setting and enable it. If you're editing your `settings.json` file directly, you can add `\"IDX.webDevTools\": true`.\n 3. Refresh your browser window to reload your Firebase Studio workspace.\n2. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or Linux)\n and select **Firebase Studio: Show Web Preview**.\n\n3. The web console panel is minimized within the web preview panel by default.\n Click the bar or drag it up to expand it.\n\nThe web console panel in the Firebase Studio web preview works\nsimilarly to other consoles, such as the one available in\n[Chrome DevTools](https://developer.chrome.com/docs/devtools):\n\n- JavaScript errors and `console.log` statements will appear there as you use your app.\n - For errors and warnings, you also have the option to get assistance from Gemini by selecting the **Understand this error** button at the right of the error message.\n- You can evaluate arbitrary JavaScript in the context of your web preview by using the prompt bar at the bottom.\n\nRun Lighthouse for web previews\n\n[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\naudits your app based on the specific audit categories you select, and returns\na report with findings and suggestions. You can run Lighthouse reports directly\nfrom the web preview in Firebase Studio.\n\n1. Open the web preview in Firebase Studio: Open the command palette\n (`Cmd+Shift+P` on Mac or `Ctrl+Shift+P` on ChromeOS, Windows, or\n Linux) select **Firebase Studio: Show Web Preview**.\n\n2. Click the\n **Run Lighthouse** icon from the web preview toolbar.\n\n3. In\n the Lighthouse panel, select the audit categories you want. You can\n choose from reports auditing [performance](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring), [accessibility](https://developer.chrome.com/docs/lighthouse/accessibility/scoring),\n [conformance with best practices](https://developer.chrome.com/docs/lighthouse/best-practices/doctype), [SEO](https://developer.chrome.com/docs/lighthouse/seo/meta-description), and [Progressive Web\n App performance](https://developer.chrome.com/docs/lighthouse/pwa/load-fast-enough-for-pwa). Click **Analyze page** to generate the reports.\n\n The reports might take a few minutes to generate.\n4. After the reports appear in the Lighthouse panel, you can review the\n findings for each audit category, or switch between audit categories by\n clicking the score and category name.\n\nUse the Debug Console\n\nFirebase Studio includes the built-in Debug Console from Code OSS. Use this\nconsole to debug your app with out-of-the-box debuggers for most common\nprogramming languages, or add a debugging extension from\n[OpenVSX](https://open-vsx.org/?category=Debuggers).\n\nTo customize your debugging experience, you can also add a `.vscode/launch.json`\nfile to your workspace and specify custom launch configurations. Learn more\nabout using launch configuration files to customize debugging at\n[Visual Studio Code debug\nconfiguration](https://github.com/microsoft/vscode-docs/blob/main/docs/debugtest/debugging-configuration.md).\n\nDebug with Gemini\n\nYou can use Gemini in Firebase to help you debug your code with\nchat in your **Code** workspace\nor the App Prototyping agent.\n\nWhile Gemini can write code for you, it might sometimes also\nproduce errors. When it detects an error, it will attempt\nto fix it. If you find that it isn't able to resolve the issue given\nthe error message, you can try some of the following techniques:\n\n- **Describe the issue:** In the chat interface, describe the\n problem you're encountering as clearly and concisely as possible.\n While Gemini might have access to context like error messages\n and logs, it might not understand the full context. Describing the behavior\n along with the error message can help Gemini fix errors\n faster.\n\n- **Ask specific questions:** Don't be afraid to ask Gemini\n direct questions about your code. For example, \"What could be causing a\n null pointer exception in this function?\" or \"How can I prevent\n this race condition?\"\n\n- **Break down complex problems:** If you're dealing with a complex\n issue, break it down into smaller, more manageable parts. Ask\n Gemini to help you debug each part separately and think\n through problems step-by-step.\n\n- **Use code fences:** When sharing code snippets, use code fences\n to ensure that the code is properly formatted. This makes it easier\n for Gemini to read and understand your code.\n\n- **Iterate and refine:** Gemini may not always provide the perfect\n solution on the first try. Review the responses, ask clarifying\n questions, and provide additional information as needed.\n\n- **Avoid prompting loops:** If Gemini gets stuck in a loop or is\n unable to answer your question, try rephrasing your prompt or\n providing additional context. Sometimes, just rewording your\n question can help Gemini understand what you're asking.\n\n If rephrasing your prompt doesn't resolve the loop, try\n the following techniques:\n - **Start a new chat:** If you're using Gemini in Firebase\n chat in your Code\n workspace, start a new chat session to reset\n Gemini's context. This can help break free from any\n misconceptions or assumptions that Gemini may have made\n in the previous conversation.\n\n - **Provide counter-examples:** If Gemini is making incorrect\n assumptions, provide counter-examples to help it understand\n the correct behavior."]]
Lighthouse'u çalıştır simgesini tıklayın.
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.