כלים לניפוי באגים בממשק המשתמש של Compose זמינים ב-Android Studio.
כלי לבדיקת פריסות
הכלי Layout Inspector מאפשר לבדוק פריסת Compose בתוך אפליקציה שפועלת באמולטור או במכשיר פיזי. אתם יכולים להשתמש בכלי לבדיקת פריסות כדי לבדוק באיזו תדירות מתבצעת קומפוזיציה מחדש של רכיב שאפשר להרכיב או דילוג עליו, וכך לזהות בעיות באפליקציה. לדוגמה, יכול להיות שחלק משגיאות הקידוד יגרמו לממשק המשתמש לבצע קומפוזיציה מחדש באופן מוגזם, מה שעלול לגרום לביצועים ירודים. חלק משגיאות הקידוד יכולות למנוע את ההרכבה מחדש של ממשק המשתמש, ולכן למנוע את הצגת השינויים בממשק המשתמש על המסך. אם אתם משתמשים בכלי Layout inspector בפעם הראשונה, כדאי לעיין בהוראות להפעלת הכלי.
קבלת נתוני שינוי קומפוזיציה
כשמבצעים ניפוי באגים בפריסות של Compose, חשוב לדעת מתי מתבצעת קומפוזיציה מחדש של פונקציות Composable כדי להבין אם ממשק המשתמש מיושם בצורה נכונה. לדוגמה, אם האפליקציה מבצעת קומפוזיציה מחדש יותר מדי פעמים, יכול להיות שהיא מבצעת יותר עבודה מהנדרש. מצד שני, רכיבים שלא מתעדכנים כשמצפים מהם להתעדכן עלולים להוביל להתנהגויות בלתי צפויות.
כלי הבדיקה של הפריסה מראה לכם מתי רכיבים נפרדים של קומפוזיציה בהיררכיית הפריסה עברו קומפוזיציה מחדש או דילוג, בזמן שאתם מבצעים אינטראקציה עם האפליקציה. ב-Android Studio, הקומפוזיציות מחדש מודגשות כדי לעזור לכם לקבוע איפה בממשק המשתמש הרכיבים של הקומפוזיציה עוברים קומפוזיציה מחדש.
איור 1. הפריסות מחדש מודגשות ב-Layout Inspector.
החלק המודגש מציג שכבת-על של מעבר צבעים של רכיב ה-Composable בקטע התמונה של כלי הבדיקה Layout Inspector, והוא נעלם בהדרגה כדי שתוכלו להבין איפה בממשק המשתמש נמצא רכיב ה-Composable עם מספר ההרכבות מחדש הגבוה ביותר. אם קומפוזבל אחד עובר קומפוזיציה מחדש בקצב גבוה יותר מקומפוזבל אחר, הקומפוזבל הראשון יקבל צבע חזק יותר של שכבת-על הדרגתית. אם לוחצים לחיצה כפולה על רכיב שאפשר להרכיב בבודק הפריסה, מועברים לקוד המתאים לצורך ניתוח.
פותחים את החלון Layout Inspector ומתחברים לתהליך של האפליקציה. בעץ הרכיבים, יש שתי עמודות שמופיעות לצד ההיררכיה של הפריסה. בעמודה הראשונה מוצג מספר הקומפוזיציות לכל צומת, ובעמודה השנייה מוצג מספר הדילוגים לכל צומת. כשבוחרים בצומת שאפשר להרכיב, מוצגים המאפיינים והפרמטרים של הצומת, אלא אם מדובר בפונקציה מוטבעת, ובמקרה כזה אי אפשר להציג את הפרמטרים. אפשר לראות מידע דומה גם בחלונית מאפיינים כשבוחרים רכיב מורכב מעץ הרכיבים או מתצוגת הפריסה.
איפוס הספירה יכול לעזור לכם להבין את ההרכבות מחדש או את הדילוגים במהלך אינטראקציה ספציפית עם האפליקציה. כדי לאפס את הספירה, לוחצים על איפוס בחלק העליון של החלונית Component Tree.
איור 3. הפעלת מונה ההרכבה והדילוג בכלי לבדיקת פריסות.
סמנטיקה של כתיבה
ב-Compose, Semantics מתאר את ממשק המשתמש בדרך חלופית שמובנת לשירותי Accessibility ול-framework של Testing. אפשר להשתמש בכלי לבדיקת פריסות כדי לבדוק מידע סמנטי בפריסות של 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:
בדיקת ממשק המשתמש מציגה אוטומטית תצוגה מקדימה של ממשק המשתמש בהגדרות שונות ומדגישה בעיות שנמצאו בהגדרות שונות. בחלונית בעיות, כשלוחצים על בעיה, אפשר לראות את פרטי הבעיה, הצעות לתיקון ותצוגות שבהן האזור שבו הבעיה מתרחשת מודגש.
