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