ניפוי באגים באפליקציה ב-Firebase Studio

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

אפשר גם לבצע ניפוי באגים עשיר יותר, שמבוסס על נקודות עצירה, ברוב השפות הנפוצות, באמצעות מסוף ניפוי הבאגים המובנה, ולהרחיב אותו באמצעות תוספי כלי לניפוי באגים מ-OpenVSX. כדי לנפות באגים בקוד האינטרנט של ממשק המשתמש (כמו JavaScript) באמצעות נקודות עצירה, אתם יכולים להמשיך להשתמש בכלים למפתחים שמובנים בדפדפן, כמו כלי הפיתוח ל-Chrome.

תצוגה מקדימה של האפליקציה

‫Firebase Studio כולל תצוגות מקדימות של אפליקציות בסביבת העבודה לאפליקציות אינטרנט (Chrome) ולאפליקציות Flutter ‏(Android, ‏ Chrome). התצוגות המקדימות של Android ו-Chrome תומכות ב-Hot Reload וב-Hot Refresh, ומציעות יכולות אמולטור מלאות.

מידע נוסף על תצוגות מקדימות של Firebase Studio זמין במאמר תצוגה מקדימה של האפליקציה.

שימוש במסוף האינטרנט המשולב לתצוגות מקדימות באינטרנט

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

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

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

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

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

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: Show Web Preview.

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

3. ‫ בחלונית Lighthouse, בוחרים את קטגוריות הביקורת הרצויות. אתם יכולים לבחור מבין דוחות שמבצעים ביקורת על ביצועים, נגישות, תאימות לשיטות מומלצות, SEO וביצועים של Progressive Web App. לוחצים על ניתוח הדף כדי ליצור את הדוחות.

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

4. אחרי שהדוחות מופיעים בחלונית Lighthouse, אפשר לעיין בממצאים של כל קטגוריית ביקורת, או לעבור בין קטגוריות הביקורת בלחיצה על הציון ועל שם הקטגוריה.

שימוש במסוף ניפוי הבאגים

‫Firebase Studio כולל את מסוף ניפוי הבאגים המובנה של Code OSS. אתם יכולים להשתמש במסוף הזה כדי לנפות באגים באפליקציה באמצעות מנפי באגים מוכנים לשימוש בשפות התכנות הנפוצות ביותר, או להוסיף תוסף לניפוי באגים מ-OpenVSX.

כדי להתאים אישית את חוויית ניפוי הבאגים, אתם יכולים גם להוסיף קובץ .vscode/launch.json לסביבת העבודה ולציין הגדרות הפעלה בהתאמה אישית. במאמר הגדרת ניפוי באגים ב-Visual Studio Code מוסבר איך משתמשים בקובצי תצורה של הפעלה כדי להתאים אישית את ניפוי הבאגים.

ניפוי באגים באמצעות Gemini

אתם יכולים להשתמש ב-Gemini כדי לדבג את הקוד באמצעות צ'אט בסביבת העבודה של Code או ב-App Prototyping agent.

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

• תיאור הבעיה: בממשק הצ'אט, מתארים את הבעיה בצורה ברורה ותמציתית ככל האפשר. למרות של-Gemini יש גישה להקשר כמו הודעות שגיאה ויומנים, יכול להיות שהוא לא יבין את ההקשר המלא. תיאור ההתנהגות והודעת השגיאה יכולים לעזור ל-Gemini לתקן שגיאות מהר יותר.

• לשאול שאלות ספציפיות: אל תחששו לשאול שאלות ישירות על הקוד שלכם.Gemini לדוגמה, "מה יכול לגרום לחריגת מצביע null בפונקציה הזו?" או "איך אפשר למנוע את מרוץ התהליכים הזה?"

• לפרק בעיות מורכבות: אם אתם מתמודדים עם בעיה מורכבת, פרקו אותה לחלקים קטנים יותר שקל יותר לנהל. בקשו מ-Gemini לעזור לכם לנפות באגים בכל חלק בנפרד ולחשוב על הבעיות שלב אחר שלב.

• שימוש בתוחמי קוד: כשמשתפים קטעי קוד, צריך להשתמש בתוחמי קוד כדי לוודא שהקוד בפורמט הנכון. כך ל-Gemini יהיה קל יותר לקרוא ולהבין את הקוד.

• חזרה ושיפור: יכול להיות ש-Gemini לא תמיד יספק את הפתרון המושלם בניסיון הראשון. בודקים את התשובות, שואלים שאלות הבהרה ומספקים מידע נוסף לפי הצורך.

• הימנעו מלולאות של פרומפטים: אם Gemini נתקע בלולאה או לא מצליח לענות על השאלה, נסו לנסח מחדש את הפרומפט או לספק הקשר נוסף. לפעמים, ניסוח מחדש של השאלה יכול לעזור ל-Gemini להבין מה אתם שואלים.

  אם ניסוח מחדש של ההנחיה לא פותר את הלולאה, נסו את השיטות הבאות:

  • התחלת שיחה חדשה: אם אתם משתמשים בצ'אט של Gemini בסביבת העבודה ב-Code, התחילו שיחה חדשה כדי לאפס את ההקשר של Gemini. כך אפשר להשתחרר מתפיסות מוטעות או מהנחות ש-Gemini אולי הניח בשיחה הקודמת.

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