ב-Android Studio יש כלים לניפוי באגים בממשק המשתמש של Compose.
כלי לבדיקת פריסות
הכלי Layout Inspector מאפשר לבדוק פריסת Compose בתוך אפליקציה שפועלת באמולטור או במכשיר פיזי. אפשר להשתמש ב-Layout Inspector כדי לבדוק באיזו תדירות רכיב ניתן להרכבה מחדש או דילוג עליו, וכך לזהות בעיות באפליקציה. לדוגמה, יכול להיות שחלק משגיאות הקידוד יגרמו לממשק המשתמש שלכם להרכיב מחדש באופן מוגזם, מה שעלול לגרום לביצועים ירודים. חלק משגיאות הקידוד יכולות למנוע את ההרכבה מחדש של ממשק המשתמש, ולכן למנוע את הצגת השינויים בממשק המשתמש על המסך. אם אתם משתמשים בכלי Layout Inspector בפעם הראשונה, מומלץ לעיין בהוראות להפעלת הכלי.
קבלת נתוני רה-קומפוזיציה
כשמבצעים ניפוי באגים בפריסות של Compose, חשוב לדעת מתי מתבצעת קומפוזיציה מחדש של פונקציות Composable, כדי להבין אם ממשק המשתמש מיושם בצורה תקינה. לדוגמה, אם האפליקציה מבצעת קומפוזיציה מחדש יותר מדי פעמים, יכול להיות שהיא מבצעת יותר עבודה מהנדרש. מצד שני, רכיבים שלא מורכבים מחדש כשמצפים שהם יורכבו מחדש עלולים להוביל להתנהגויות בלתי צפויות.
הכלי Layout Inspector מראה לכם מתי רכיבי Composable נפרדים בהיררכיית הפריסה שלכם עברו קומפוזיציה מחדש או דילגו על קומפוזיציה, בזמן שאתם מבצעים אינטראקציה עם האפליקציה. ב-Android Studio, הקומפוזיציות מחדש מודגשות כדי לעזור לכם לקבוע איפה בממשק המשתמש רכיבי ה-Composable עוברים קומפוזיציה מחדש.
איור 1. הדגשה של קומפוזיציות מחדש ב-Layout Inspector.
החלק המודגש מציג שכבת-על של מעבר צבע של רכיב ה-Composable בחלק התמונה של כלי הבדיקה Layout Inspector, והוא נעלם בהדרגה כדי שתוכלו להבין איפה בממשק המשתמש נמצא רכיב ה-Composable עם מספר ההרכבות מחדש הגבוה ביותר. אם קצב ההרכבה מחדש של רכיב Composable אחד גבוה יותר מקצב ההרכבה מחדש של רכיב Composable אחר, הרכיב הראשון יקבל צבע חזק יותר של שכבת-על הדרגתית. אם לוחצים לחיצה כפולה על רכיב שאפשר להרכיב בבודק הפריסה, עוברים לקוד המתאים לניתוח.
פותחים את החלון Layout Inspector ומתחברים לתהליך של האפליקציה. בעץ הרכיבים, יש שתי עמודות שמופיעות לצד היררכיית הפריסה. בעמודה הראשונה מוצג מספר הקומפוזיציות לכל צומת, ובעמודה השנייה מוצג מספר הדילוגים לכל צומת. אם בוחרים בצומת שאפשר להרכיב, מוצגים המאפיינים והפרמטרים של הצומת, אלא אם מדובר בפונקציה מוטמעת, ובמקרה כזה אי אפשר להציג את הפרמטרים. אפשר לראות מידע דומה גם בחלונית Attributes כשבוחרים רכיב מורכב מתוך Component Tree או Layout Display.
איפוס הספירה יכול לעזור לכם להבין את ההרכבות מחדש או הדילוגים במהלך אינטראקציה ספציפית עם האפליקציה. כדי לאפס את הספירה, לוחצים על Reset (איפוס) בחלק העליון של החלונית Component Tree (עץ הרכיבים).
איור 3. הפעלת מונה הקומפוזיציה ומונה הדילוג ב-Layout Inspector.
סמנטיקה של כתיבה
ב-Compose, Semantics מתאר את ממשק המשתמש בדרך חלופית שמובנת לשירותי Accessibility ול-framework של Testing. אתם יכולים להשתמש ב-Layout Inspector כדי לבדוק מידע סמנטי בפריסות שלכם ב-Compose.
כשבוחרים בצומת Compose, משתמשים בחלונית Attributes כדי לבדוק אם הצומת מצהיר על מידע סמנטי באופן ישיר, ממזג סמנטיקה מהצומת הבן או עושה את שניהם. כדי לזהות במהירות אילו צמתים כוללים סמנטיקה, מוצהרת או ממוזגת, משתמשים בתפריט הנפתח View options (אפשרויות תצוגה) בחלונית Component Tree (עץ הרכיבים) ובוחרים באפשרות Highlight Semantics Layers (הדגשת שכבות סמנטיות). הפעולה הזו תדגיש רק את הצמתים בעץ שכוללים סמנטיקה, ותוכלו להשתמש במקלדת כדי לנווט ביניהם במהירות.
בדיקה של ממשק המשתמש של כתיבת הודעות
כדי לעזור לכם ליצור ממשקי משתמש נגישים יותר ובעלי יכולת הסתגלות טובה יותר ב-Jetpack Compose, Android Studio מספק מצב בדיקת ממשק משתמש בתצוגה המקדימה של Compose. התכונה הזו דומה לAccessibility Scanner לתצוגות.
כשמפעילים את מצב הבדיקה של ממשק המשתמש של Compose בתצוגה מקדימה של Compose, Android Studio מבצע באופן אוטומטי ביקורת על ממשק המשתמש של Compose ומציע שיפורים כדי להפוך את ממשק המשתמש לנגיש יותר וניתן להתאמה. Android Studio בודק שממשק המשתמש פועל בגדלים שונים של מסכים. בחלונית בעיות, הכלי מציג את הבעיות שהוא מזהה, כמו טקסט שנמתח במסכים גדולים או ניגודיות צבעים נמוכה.
כדי לגשת לתכונה הזו, לוחצים על סמל בדיקת ממשק המשתמש בתצוגה המקדימה של Compose:
בדיקת ממשק המשתמש מציגה אוטומטית תצוגה מקדימה של ממשק המשתמש בהגדרות שונות ומדגישה בעיות שנמצאו בהגדרות שונות. בחלונית בעיות, כשלוחצים על בעיה, אפשר לראות את פרטי הבעיה, הצעות לתיקון ותצוגות שבהן האזור הבעייתי מודגש.
תיקון בעזרת AI
אם מתגלות בעיות במצב 'בדיקת ממשק משתמש', אפשר להשתמש בסוכן ה-AI כדי להציע תיקונים בקוד וליישם אותם. לוחצים על הלחצן תיקון בעזרת AI בבעיה בחלונית בעיות. הסוכן מנתח את הבעיה ואת הקוד כדי להציע שינויים שיפתרו את בעיית הנגישות או את הבעיה שקשורה להתאמה.
