ניפוי באגים באפליקציה ב-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, מרחיבים את הסרגל שבתחתית המסך.

חשוב לזכור שהתכונה הזו ניסיונית והיא לא מופעלת כברירת מחדל. כדי להפעיל את התכונה, פועלים לפי השלבים הבאים, ואז שולחים משוב אחרי שמנסים אותה:

  1. מוסיפים את מסוף האינטרנט לסביבת העבודה Firebase Studio:

    1. לוחצים על או מקישים על Ctrl + , (ב-Windows‏/Linux‏/ChromeOS) או על Cmd + , (ב-macOS) כדי לפתוח את הגדרות.
    2. מחפשים את ההגדרה Firebase Studio: Web Dev Tools ומפעילים אותה. אם עורכים את הקובץ settings.json ישירות, אפשר להוסיף את "IDX.webDevTools": true.
    3. מרעננים את חלון הדפדפן כדי לטעון מחדש את סביבת העבודה Firebase Studio.

  2. פותחים את התצוגה המקדימה באינטרנט ב-Firebase Studio: פותחים את לוח הפקודות (Cmd+Shift+P ב-Mac או Ctrl+Shift+P ב-ChromeOS, ב-Windows או ב-Linux) ובוחרים באפשרות Firebase Studio: הצגת תצוגה מקדימה באינטרנט.

  3. כברירת מחדל, חלונית מסוף האינטרנט ממוזערת בחלונית התצוגה המקדימה של האינטרנט. לוחצים על המסך או גוררים אותו למעלה כדי להרחיב אותו.

החלונית של מסוף האינטרנט בתצוגה המקדימה של Firebase Studio פועלת באופן דומה למסופים אחרים, כמו זה שזמין ב-כלי הפיתוח של Chrome:

  • שגיאות JavaScript ומשפטי console.log יופיעו שם במהלך השימוש באפליקציה.
    • אם מופיעות שגיאות ואזהרות, תוכלו גם לקבל עזרה מ-Gemini על ידי לחיצה על הלחצן הסבר על השגיאה הזו שמשמאל להודעת השגיאה.
  • אתם יכולים להריץ קוד JavaScript שרירותי בהקשר של תצוגה מקדימה של האתר באמצעות סרגל ההנחיות שבתחתית המסך.

הפעלת Lighthouse לתצוגות מקדימות באינטרנט

Lighthouse מבצע ביקורת על האפליקציה שלכם על סמך קטגוריות הביקורת הספציפיות שבחרתם, ומציג דוח עם ממצאים והצעות. אפשר להריץ דוחות של Lighthouse ישירות מתצוגת האתר המקדימה ב-Firebase Studio.

  1. פותחים את התצוגה המקדימה של האתר ב-Firebase Studio: פותחים את לוח הפקודות (Cmd+Shift+P ב-Mac או Ctrl+Shift+P ב-ChromeOS,‏ Windows או Linux) ובוחרים באפשרות Firebase Studio: הצגת תצוגה מקדימה של האתר.

  2. לוחצים על הסמל תמונה של סמל לבדיקת מהירות Run Lighthouse בסרגל הכלים של תצוגת האתר המקדימה.

  3. תמונה של חלונית Lighthouse ב-Firebase Studio בחלונית של Lighthouse, בוחרים את קטגוריות הביקורת הרצויות. תוכלו לבחור מבין דוחות ביקורת של ביצועים, נגישות, תאימות לשיטות המומלצות, SEO וביצועים של אפליקציות אינטרנט מתקדמות. לוחצים על Analyze page (ניתוח הדף) כדי ליצור את הדוחות.

    יצירת הדוחות עשויה להימשך כמה דקות.

  4. אחרי שהדוחות מופיעים בחלונית של 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 מבצע הנחות שגויות, צריך לספק דוגמאות נגדיות כדי לעזור לו להבין את ההתנהגות הנכונה.