تصحيح أخطاء تطبيقك في Firebase Studio
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
توفّر Firebase Studio عدة طرق مختلفة لتصحيح أخطاء تطبيقك مباشرةً من مساحة العمل. بالنسبة إلى تطبيقات الويب وتطبيقات Flutter، يتم دمج وحدة تحكّم على الويب وأداة Lighthouse مباشرةً في مساحة العمل. توفّر تطبيقات Flutter معاينات على Android والويب
لإجراء اختبارات سريعة على تطبيقك أثناء كتابة الرمز.
تتوفّر أيضًا إمكانية تصحيح الأخطاء بشكل أكثر تفصيلاً استنادًا إلى نقاط التوقّف في معظم اللغات الشائعة، وذلك من خلال "وحدة تصحيح الأخطاء" المضمَّنة، ويمكن توسيع نطاقها باستخدام إضافات "وحدة تصحيح الأخطاء" من OpenVSX. لتصحيح أخطاء رمز الويب الخاص بالواجهة الأمامية استنادًا إلى نقاط التوقف (مثل JavaScript)، يمكنك مواصلة استخدام أدوات المطوّرين المضمّنة في المتصفّح، مثل أدوات مطوّري البرامج في Chrome.
معاينة تطبيقك
يتضمّن Firebase Studio
معاينات التطبيقات داخل مساحة العمل لتطبيقات الويب (Chrome)
وتطبيقات Flutter (Android وChrome). تتيح معاينات Android وChrome إعادة التحميل السريع وإعادة التحديث السريع، كما توفّر إمكانات المحاكي الكاملة.
لمزيد من المعلومات عن معاينات Firebase Studio، يمكنك الاطّلاع على مقالة
معاينة تطبيقك.
استخدام وحدة تحكّم مدمجة على الويب لمعاينة الويب
تساعدك وحدة تحكّم الويب المدمجة في تشخيص المشاكل في تطبيقك مباشرةً من معاينة الويب. يمكنك الوصول إلى وحدة تحكّم الويب في لوحة معاينة الويب Firebase Studio من خلال توسيع الشريط في أسفل الصفحة.
يُرجى العِلم أنّ هذه الميزة تجريبية وغير مفعّلة تلقائيًا. لتفعيلها، اتّبِع الخطوات التالية، ثم شارِك ملاحظاتك بعد تجربتها:
أضِف وحدة تحكّم الويب إلى مساحة عمل Firebase Studio باتّباع الخطوات التالية:
- افتح الإعدادات من خلال النقر على
settings أو الضغط على
Ctrl + , (في نظام التشغيل Windows أو Linux أو ChromeOS) أو Cmd + , (في نظام التشغيل MacOS).
- ابحث عن الإعداد Firebase Studio: أدوات تطوير الويب وفعِّله. إذا كنت تعدّل ملف
settings.json مباشرةً، يمكنك إضافة "IDX.webDevTools": true.
- أعِد تحميل نافذة المتصفّح لإعادة تحميل Firebase Studioمساحة العمل.
فتح معاينة الويب في Firebase Studio: افتح لوحة الأوامر
(Cmd+Shift+P على جهاز Mac أو Ctrl+Shift+P على جهاز ChromeOS أو Windows أو Linux)
واختر Firebase Studio: عرض معاينة الويب.
يتم تصغير لوحة وحدة تحكّم المتصفّح ضِمن لوحة معاينة الويب تلقائيًا.
انقر على الشريط أو اسحبه للأعلى لتوسيعه.
تعمل لوحة وحدة تحكّم الويب في Firebase Studio معاينة الويب
بطريقة مشابهة لوحدات التحكّم الأخرى، مثل تلك المتوفّرة في
أدوات مطوّري البرامج في Chrome:
- ستظهر أخطاء JavaScript وعبارات
console.log هناك أثناء استخدامك للتطبيق.
- بالنسبة إلى الأخطاء والتحذيرات، يمكنك أيضًا الحصول على مساعدة من Gemini من خلال النقر على الزر فهم هذا الخطأ على يسار رسالة الخطأ.
- يمكنك تقييم JavaScript عشوائي في سياق معاينة الويب باستخدام شريط الطلبات في أسفل الصفحة.
تشغيل Lighthouse لمعاينات الويب
تُجري أداة Lighthouse تدقيقًا على تطبيقك استنادًا إلى فئات التدقيق المحدّدة التي تختارها، وتعرض تقريرًا يتضمّن النتائج والاقتراحات. يمكنك إنشاء تقارير Lighthouse مباشرةً من معاينة الويب في Firebase Studio.
فتح معاينة الويب في Firebase Studio: افتح لوحة الأوامر (Cmd+Shift+P على جهاز Mac أو Ctrl+Shift+P على جهاز ChromeOS أو Windows أو Linux)، ثم اختَر Firebase Studio: عرض معاينة الويب.
انقر على رمز 
تشغيل Lighthouse من شريط أدوات معاينة الويب.
في لوحة Lighthouse، اختَر فئات التدقيق التي تريدها. يمكنك الاختيار من بين التقارير التي تدقّق في الأداء وإمكانية الوصول والتوافق مع أفضل الممارسات وتحسين محركات البحث وأداء تطبيقات الويب التقدّمية. انقر على تحليل الصفحة لإنشاء التقارير.
قد يستغرق إنشاء التقارير بضع دقائق.
بعد ظهور التقارير في لوحة Lighthouse، يمكنك مراجعة النتائج لكل فئة تدقيق، أو التبديل بين فئات التدقيق من خلال النقر على النتيجة واسم الفئة.
استخدام "وحدة تحكّم تصحيح الأخطاء"
يتضمّن Firebase Studio "وحدة تصحيح الأخطاء" المضمّنة من Code OSS. يمكنك استخدام وحدة التحكّم هذه لتصحيح أخطاء تطبيقك باستخدام أدوات تصحيح الأخطاء الجاهزة لمعظم لغات البرمجة الشائعة، أو إضافة إضافة لتصحيح الأخطاء من OpenVSX.
لتخصيص تجربة تصحيح الأخطاء، يمكنك أيضًا إضافة ملف .vscode/launch.json
إلى مساحة العمل وتحديد إعدادات تشغيل مخصّصة. يمكنك الاطّلاع على مزيد من المعلومات
حول استخدام ملفات إعداد التشغيل لتخصيص تصحيح الأخطاء في
إعداد تصحيح الأخطاء في Visual Studio Code.
تصحيح الأخطاء باستخدام "Gemini"
يمكنك استخدام "Gemini في Firebase" للمساعدة في تصحيح الأخطاء في الرمز البرمجي من خلال
المحادثة في مساحة عمل Code
أو App Prototyping agent.
مع أنّ Gemini يمكنه كتابة الرمز البرمجي نيابةً عنك، قد يرتكب أحيانًا أخطاء. وعند رصد خطأ، سيحاول تصحيحه. إذا تبيّن لك أنّها لا تستطيع حل المشكلة المحدّدة في رسالة الخطأ، يمكنك تجربة بعض الأساليب التالية:
وصف المشكلة: في واجهة المحادثة، قدِّم وصفًا واضحًا وموجزًا قدر الإمكان للمشكلة التي تواجهها.
مع أنّ Gemini قد يتمكّن من الوصول إلى سياق مثل رسائل الخطأ والسجلات، قد لا يفهم السياق الكامل. يمكن أن يساعد وصف السلوك
إلى جانب رسالة الخطأ فريق Gemini في حل الأخطاء
بشكل أسرع.
طرح أسئلة محدّدة: لا تتردد في طرح Gemini
أسئلة مباشرة حول الرمز البرمجي. على سبيل المثال، "ما هي الأسباب المحتملة لحدوث خطأ
null pointer exception في هذه الدالة؟" أو "كيف يمكنني منع
هذه الحالة المتسارعة؟"
تقسيم المشاكل المعقّدة: إذا كنت تواجه مشكلة معقّدة، قسِّمها إلى أجزاء أصغر يسهل التعامل معها. اطلب من
Gemini مساعدتك في تصحيح الأخطاء في كل جزء على حدة، وفكِّر في المشاكل خطوة بخطوة.
استخدام حواجز الرموز: عند مشاركة مقتطفات الرموز، استخدِم حواجز الرموز
لضمان تنسيق الرمز بشكل صحيح. ويسهّل ذلك على Gemini قراءة وفهم التعليمات البرمجية.
التكرار والتحسين: قد لا يقدّم Gemini الحل الأمثل دائمًا من المحاولة الأولى. راجِع الردود واطرح أسئلة توضيحية وقدِّم معلومات إضافية حسب الحاجة.
تجنُّب حلقات الطلبات: إذا علق Gemini في حلقة أو تعذّر عليه الإجابة عن سؤالك، حاوِل إعادة صياغة طلبك أو تقديم سياق إضافي. في بعض الأحيان، يمكن أن يساعدك تغيير صياغة سؤالك في أن يفهم Gemini ما تسأل عنه.
إذا لم يؤدِّ تغيير صياغة طلبك إلى حلّ مشكلة التكرار، جرِّب التقنيات التالية:
بدء محادثة جديدة: إذا كنت تستخدم Gemini في Firebase
ضمن مساحة عملك Code
، ابدأ جلسة محادثة جديدة لإعادة ضبط سياق Gemini. يمكن أن يساعد ذلك في التخلّص من أي مفاهيم خاطئة أو افتراضات قد يكون Gemini قد وضعها في المحادثة السابقة.
تقديم أمثلة مضادة: إذا كان Gemini يضع افتراضات غير صحيحة، قدِّم أمثلة مضادة لمساعدته في فهم السلوك الصحيح.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
