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