ניפוי באגים באפליקציה ב-Project IDX

ב-Project IDX יש כמה דרכים שונות לניפוי באגים באפליקציה, ישירות מסביבת העבודה. באפליקציות לאינטרנט וב-Flutter יש את Lighthouse ואת הכלים למפתחים ב-Chrome, בתצוגה המקדימה של האינטרנט של Chrome בסביבת העבודה שלכם. האפליקציות של Flutter מאפשרות גישה ל-iOS, ל-Android ולתצוגות מקדימות מהאינטרנט, כדי לזהות ולבדוק את האפליקציה תוך כדי כתיבת הקוד. מסוף ניפוי הבאגים המובנה תומך בניפוי באגים אוטומטי ברוב השפות הנפוצות, ובניפוי באגים בהתאמה אישית שאפשר להגדיר בקובץ launch.json בסביבת העבודה.

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

IDX כולל תצוגות מקדימות של אפליקציות בסביבת העבודה לאפליקציות אינטרנט (Chrome ו-Safari לנייד) ולאפליקציות Flutter (iOS, Android, Chrome). התצוגות המקדימות של Android ו-Chrome תומכות בטעינה מחדש חמה וברענון חם, וכוללות יכולות אמולטור מלאות. הסימולטורים ב-Safari וב-iOS מציעים תצוגה מקדימה ויזואלית ואינטראקטיבית במגוון מכשירי iOS, ומדמים את חוויית השימוש ב-iOS באפליקציות לנייד ולאינטרנט.

למידע נוסף על תצוגות מקדימות של IDX, ראו תצוגה מקדימה של האפליקציה.

שימוש בכלי הפיתוח ל-Chrome לתצוגה מקדימה של אתרים (ניסיוני)

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

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

1. מוסיפים כלי פיתוח ל-Chrome לסביבת העבודה של IDX:

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

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

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

משתמשים בחלונית DevTools בתצוגה המקדימה של IDX באינטרנט, באותו אופן שבו משתמשים לנפות באגים באפליקציה בדפדפן Chrome.

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

האפליקציה Lighthouse בודקת את האפליקציה על סמך קטגוריות הביקורת הספציפיות שבחרתם, ומחזירה דוח עם ממצאים והצעות. אפשר להריץ דוחות Lighthouse ישירות מהתצוגה המקדימה באינטרנט ב-Project IDX.

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

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

3. בחלונית Lighthouse, בוחרים את קטגוריות הביקורת הרצויות. אתם יכולים לבחור מבין הדוחות הבאים: ביצועים, נגישות, תאימות לשיטות מומלצות, אופטימיזציה למנועי חיפוש (SEO) וביצועים של Progressive Web App. לוחצים על Analyze page ליצירת הדוחות.

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

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

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

Project IDX כולל את מסוף ניפוי הבאגים המובנה של Code OSS. תוכלו להשתמש במסוף הזה כדי לנפות באגים באפליקציה באמצעות כלי ניפוי באגים מוכנים לשימוש ברוב שפות התכנות הנפוצות, או להוסיף תוסף לניפוי באגים מ-VSCode Marketplace.

אם רוצים לכתוב ניפוי באגים בהתאמה אישית, צריך להוסיף את הקובץ launch.json לסביבת העבודה.