ניפוי באגים מרחוק בתוכן בשידור חי במכשיר Android ממחשב Windows , Mac או Linux. במדריך הזה תלמדו:
- מגדירים במכשיר Android לניפוי באגים מרחוק ומגלים אותו במחשב הפיתוח.
- אפשר לבדוק תוכן פעיל במכשיר Android ולנפות באגים ממכשיר ה-Android במחשב הפיתוח.
- תוכן של הקלטת מסך ממכשיר Android במופע של כלי פיתוח במחשב הפיתוח.
שלב 1: היכרות עם מכשיר Android
תהליך העבודה שבהמשך מתאים לרוב המשתמשים. תוכלו לקבל עזרה נוספת בקטע פתרון בעיות: כלי הפיתוח לא מזהים את מכשיר ה-Android.
- פותחים את המסך אפשרויות למפתחים במכשיר Android. ראו הגדרת אפשרויות למפתחים במכשיר.
- בוחרים באפשרות הפעלת ניפוי באגים ב-USB.
- פותחים את Chrome במחשב הפיתוח.
- למעבר אל
chrome://inspect#devices. צריך לוודא שהאפשרות
Discover USB מופעלת.
מחברים את מכשיר Android ישירות למחשב הפיתוח באמצעות כבל USB.
אם מחברים את המכשיר בפעם הראשונה, המכשיר יופיע במצב 'אופליין' וממתין לאימות.
במקרה כזה, מאשרים את בקשת הסשן לניפוי באגים במסך המכשיר.
אם מופיע שם הדגם של מכשיר ה-Android, סימן שכלי הפיתוח הצליח להתחבר למכשיר.
ממשיכים לשלב 2.
פתרון בעיות: כלי הפיתוח לא מזהים את מכשיר Android
מוודאים שהחומרה מוגדרת כראוי:
- אם אתם משתמשים ברכזת USB, נסו לחבר את מכשיר Android ישירות למכונת הפיתוח.
- נסו לנתק את כבל ה-USB בין מכשיר Android למחשב הפיתוח, ואז לחבר אותו שוב. ניתן לעשות זאת בזמן שהמסכים של מכשיר ה-Android ומכשיר הפיתוח לא נעולים.
- מוודאים שכבל ה-USB פועל. אתם אמורים להיות מסוגלים לבדוק קבצים במכשיר Android ממכונת הפיתוח.
צריך לוודא שהתוכנה מוגדרת בצורה נכונה:
- אם במחשב הפיתוח שלכם פועלת מערכת Windows, נסו להתקין באופן ידני את מנהלי ההתקנים של ה-USB במכשיר ה-Android. ראו התקנת מנהלי התקנים USB של OEM.
- שילובים מסוימים של מכשירי Windows ו-Android (במיוחד Samsung) מחייבים הגדרה נוספת. למידע נוסף, ראו Chrome DevTools Devices לא מזהה מכשיר כשהוא מחובר לחשמל.
אם ההודעה אפשר ניפוי באגים ב-USB לא מופיעה במכשיר Android, נסו:
- מנתקים את כבל ה-USB ומחברים אותו מחדש בזמן שכלי הפיתוח מתמקדים במכונת הפיתוח, ומוצג מסך הבית של Android. במילים אחרות, לפעמים ההודעה לא מופיעה כשהמסכים של מכשיר ה-Android או של מכונת הפיתוח נעולים.
- מעדכנים את הגדרות התצוגה של מכשיר Android ומכשיר הפיתוח כך שאף פעם לא יעברו למצב שינה.
- הגדרת מצב USB של Android ל-PTP. לפרטים, קראו את הקטע ב-Galaxy S4 לא מוצגת תיבת הדו-שיח 'אישור לניפוי באגים ב-USB'.
- כדי לאפס את המכשיר למצב חדש, בוחרים באפשרות ביטול הרשאות לניפוי באגים ב-USB במסך אפשרויות למפתחים במכשיר Android.
אם אתם מוצאים פתרון שלא מוזכר בקטע הזה או ב-Chrome DevTools Devices לא מזהה מכשיר כשהוא מחובר לחשמל, הוסיפו תשובה לשאלה הזו ב-Stack Overflow או פתחו בעיה במאגר של developer.chrome.com!
שלב 2: ניפוי באגים בתוכן שנמצא במכשיר Android ממכונת הפיתוח
- פותחים את Chrome במכשיר Android.
בקטע
chrome://inspect/#devicesבמחשב הפיתוח מוצג שם הדגם של מכשיר ה-Android ואחריו המספר הסידורי. מתחתיה מופיעה הגרסה של Chrome שפועלת במכשיר, ומספר הגרסה מופיע בסוגריים.
בתיבת הטקסט פתיחת כרטיסייה עם כתובת URL, מזינים את כתובת ה-URL ולוחצים על פתיחה. הדף נפתח בכרטיסייה חדשה במכשיר ה-Android.
כל כרטיסייה של Chrome מרוחקת מקבלת קטע משלה ב-
chrome://inspect/#devices. בקטע הזה תוכלו לקיים אינטראקציה עם הכרטיסייה הזו. אם יש אפליקציות שמשתמשות ב-WebView, יופיע גם קטע לכל אחת מהן. בדוגמה הזו יש רק כרטיסייה אחת פתוחה.לוחצים על בדיקה לצד כתובת ה-URL שפתחתם עכשיו. ייפתח מופע חדש של כלי פיתוח.
הגרסה של Chrome שפועלת במכשיר Android קובעת איזו גרסה של כלי הפיתוח תיפתח במחשב הפיתוח. לכן, אם במכשיר ה-Android פועלת גרסה ישנה מאוד של Chrome, המופע של כלי הפיתוח עשוי להיראות שונה מאוד ממה שאתם רגילים.
פעולות נוספות: השהיה, מיקוד, טעינה מחדש או סגירה של כרטיסייה
מתחת לכתובת ה-URL יופיע תפריט להשהיה, למיקוד, לטעינה מחדש או לסגירה של כרטיסייה.
בדיקת רכיבים
עוברים לחלונית Elements (רכיבים) במכונה של כלי הפיתוח, ומעבירים את העכבר מעל רכיב מסוים כדי להדגיש אותו באזור התצוגה של מכשיר Android.
אפשר גם להקיש על רכיב במסך של מכשיר Android כדי לבחור אותו בחלונית רכיבים.
לוחצים על בחירת רכיב 
במופע של כלי הפיתוח, ואז מקישים על הרכיב במסך של מכשיר Android. הערה: האפשרות בחירת רכיב מושבתת אחרי הנגיעה הראשונה, כך שצריך להפעיל אותה מחדש בכל פעם שרוצים להשתמש בתכונה הזו.
הקלטת מסך של Android אל מחשב הפיתוח
לוחצים על Toggle Screencast
כדי להציג את התוכן של מכשיר Android במכונה של כלי הפיתוח.
אפשר לבצע פעולות בהקלטת המסך בכמה דרכים:
- קליקים מתורגמים להקשות, שמופעלות אירועי מגע מתאימים במכשיר.
- ההקשות במחשב נשלחות למכשיר.
- כדי לדמות תנועת צביטה, מחזיקים את מקש Shift תוך כדי הגרירה.
- כדי לגלול, משתמשים במשטח המגע או בגלגל העכבר או מסובבים את מצביע העכבר.
כמה הערות על הקלטות מסך:
- בהקלטות המסך מוצג רק תוכן הדף. חלקים שקופים של הקלטת המסך מייצגים את ממשקי המכשיר, כמו סרגל הכתובות של Chrome, שורת הסטטוס של Android או המקלדת של Android.
- הקלטות מסך משפיעות לרעה על קצב הפריימים. מומלץ להשבית את הקלטת המסך בזמן מדידה של גלילות או אנימציות, כדי לקבל תמונה מדויקת יותר של ביצועי הדף.
- אם מכשיר ה-Android ננעל, התוכן של הקלטת המסך ייעלם. כדי להמשיך באופן אוטומטי את הקלטת המסך, עליך לבטל את נעילת המסך של מכשיר ה-Android.
ניפוי באגים באופן ידני באמצעות Android Debug Bridge (adb)
במקרים נדירים, יכולה להיות שיטה חלופית לניפוי באגים מרחוק. לדוגמה, ייתכן שתרצו להתחבר ישירות אל פרוטוקול Chrome DevTools (CDP) של Chrome ב-Android.
לשם כך, אפשר להשתמש בגשר ניפוי הבאגים של Android (adb):
- מפעילים אפשרויות למפתחים וניפוי באגים ב-USB במכשיר Android.
- פותחים את Chrome במכשיר Android.
מחברים את מכשיר Android למחשב הפיתוח באמצעות:
- כבל USB (ישיר).
- לחלופין, חיבור Wi-Fi בחיבור adb.
בשורת הפקודה של מחשב הפיתוח, מריצים את
adb devices -lובודקים אם המכשיר מופיע ברשימה.מעבירים את שקע ה-CDP במכשיר ליציאה המקומית של המחשב, למשל
9222. כדי לעשות זאת, מריצים את:adb forward tcp:9222 localabstract:chrome_devtools_remoteאחרי שמתחברים בהצלחה, אפשר לראות את הפרטים הבאים:
- ב
http://localhost:9222/jsonמפורטים היעדים שלpage. http://localhost:9222/json/versionחושף את נקודת הקצה של היעדbrowser, כפי שמצוין במסמכי התיעוד של CDP.chrome://inspect/#devicesמאוכלס, גם אם ההגדרה Discover התקני USB לא מסומנת.
- ב
לפתרון בעיות:
adbמסמכי תיעודלחלופין, אפשר לקרוא מדריכים ישנים יותר: