ניפוי באגים מרחוק בתוכן בשידור חי במכשיר Android ממחשב עם Windows, Mac או Linux. במדריך הזה תלמדו איך:
- איך מגדירים את מכשיר Android לניפוי באגים מרחוק ומאתרים אותו במכונה לפיתוח.
- בדיקה ותיקון באגים בתוכן בשידור חי במכשיר Android מהמחשב לצורכי פיתוח.
- איך מצלמים את המסך של מכשיר Android ומעבירים את הסרטון למכונה לצורכי פיתוח, שם הוא מוצג ב-DevTools.
שלב 1: איתור מכשיר Android
תהליך העבודה הבא מתאים לרוב המשתמשים. מידע נוסף זמין במאמר פתרון בעיות: DevTools לא מזהה את מכשיר Android.
- פותחים את המסך אפשרויות למפתחים ב-Android. הגדרת האפשרויות למפתחים במכשיר
- בוחרים באפשרות הפעלת ניפוי באגים ב-USB.
- פותחים את Chrome במכונה לפתחים.
- לעבור אל
chrome://inspect#devices. מוודאים שהאפשרות
גילוי התקני USB מופעלת.
מחברים את מכשיר Android ישירות למכונת הפיתוח באמצעות כבל USB.
אם אתם מחברים את המכשיר בפעם הראשונה, הוא יופיע כ'לא מחובר' ובתהליך אימות.
במקרה כזה, מאשרים את ההנחיה לפתיחת סשן ניפוי הבאגים במסך המכשיר.
אם שם הדגם של מכשיר Android מופיע, המשמעות היא ש-DevTools יצר חיבור למכשיר.
ממשיכים אל שלב 2.
פתרון בעיות: DevTools לא מזהה את מכשיר Android
מוודאים שהחומרה מוגדרת בצורה נכונה:
- אם אתם משתמשים במפצל USB, נסו לחבר את מכשיר Android ישירות למכונת הפיתוח במקום זאת.
- נסו לנתק את כבל ה-USB שמחבר את מכשיר Android למכונה לפיתוח, ואז לחבר אותו שוב. צריך לעשות זאת כשמסכי Android ומכונת הפיתוח לא נעולים.
- מוודאים שכבל ה-USB פועל. אמורה להיות לכם אפשרות לבדוק קבצים במכשיר Android ממכונה לפיתוח.
מוודאים שהתוכנה מוגדרת בצורה נכונה:
- אם במחשב הפיתוח מותקנת מערכת Windows, נסו להתקין באופן ידני את מנהלי ה-USB של מכשיר Android. התקנה של מנהלי USB של יצרן ציוד מקורי
- בשילובים מסוימים של מכשירים עם Windows ו-Android (במיוחד Samsung), נדרשת הגדרה נוספת. כלי הפיתוח ל-Chrome לא מזהה את המכשיר כשמחברים אותו
אם ההודעה לאפשר ניפוי באגים ב-USB לא מופיעה במכשיר Android, אפשר לנסות:
- ניתוק של כבל ה-USB וחיבור מחדש שלו כשהתצוגה של DevTools במכונה לפיתוח מוגדרת כמרכזית, ומסך הבית של Android מוצג. במילים אחרות, לפעמים ההנחיה לא מופיעה כשמסכי Android או מכונות הפיתוח נעולים.
- עדכון הגדרות התצוגה של מכשיר Android ומכונת הפיתוח, כך שהן אף פעם לא ייכנסו למצב שינה.
- הגדרת מצב ה-USB של Android ל-PTP. עיינו במאמר לא מוצגת תיבת הדו-שיח 'אישור ניפוי באגים ב-USB' ב-Galaxy S4.
- בוחרים באפשרות ביטול ההרשאות לניפוי באגים ב-USB במסך אפשרויות הפיתוח במכשיר Android כדי לאפס אותו למצב חדש.
אם מצאתם פתרון שלא מוזכר בקטע הזה או במאמר Chrome DevTools Devices does not detect device when plugged in, תוכלו להוסיף תשובה לשאלה הזו ב-Stack Overflow או לפתוח בעיה במאגר developer.chrome.com.
שלב 2: ניפוי באגים בתוכן במכשיר Android מהמכונה לפיתוח
- פותחים את Chrome במכשיר Android.
ב-
chrome://inspect/#devicesבמכונת הפיתוח, יופיע שם הדגם של מכשיר Android ואחריו המספר הסידורי שלו. מתחת לזה תוצג גרסת Chrome שפועלת במכשיר, עם מספר הגרסה בסוגריים.
בתיבת הטקסט Open tab with url (פתיחת כרטיסייה עם כתובת URL), מזינים כתובת URL ולוחצים על Open (פתיחה). הדף נפתח בכרטיסייה חדשה במכשיר Android.
לכל כרטיסייה מרוחקת ב-Chrome יש קטע משלה ב-
chrome://inspect/#devices. בקטע הזה אפשר לבצע פעולות בכרטיסייה הזו. אם יש אפליקציות שמשתמשות ב-WebView, יופיע גם קטע לכל אחת מהן. בדוגמה הזו, יש רק כרטיסייה אחת פתוחה.לוחצים על בדיקה לצד כתובת ה-URL שפתחתם. ייפתח מכונה חדשה של DevTools.
גרסת Chrome שפועלת במכשיר Android קובעת את גרסת DevTools שתפתח במכונה לפיתוח. לכן, אם במכשיר Android שלכם מותקנת גרסה ישנה מאוד של Chrome, ייתכן שהממשק של כלי הפיתוח יהיה שונה מאוד ממה שאתם רגילים אליו.
פעולות נוספות: השהיה, התמקדות, טעינת מחדש או סגירה של כרטיסייה
מתחת לכתובת ה-URL מופיע תפריט להשהיית כרטיסייה, להצגת המיקוד בה, לטעינה מחדש או לסגירה שלה.
בדיקת רכיבים
עוברים לחלונית Elements במכונה של DevTools ומעבירים את העכבר מעל רכיב כדי להדגיש אותו בחלון התצוגה של מכשיר Android.
אפשר גם להקיש על רכיב במסך של מכשיר Android כדי לבחור אותו בחלונית רכיבים.
לוחצים על בחירת רכיב 
במכונה של DevTools, ואז מקישים על הרכיב במסך של מכשיר Android. שימו לב שהאפשרות בחירת רכיב מושבתת אחרי המגע הראשון, כך שצריך להפעיל אותה מחדש בכל פעם שרוצים להשתמש בתכונה הזו.
איך מבצעים הקלטת מסך של מכשיר Android במכונה לפיתוח
לוחצים על Toggle Screencast
כדי להציג את התוכן של מכשיר Android במכונה של DevTools.
יש כמה דרכים ליצור אינטראקציה עם סרטון הסרטון:
- קליקים מתורגמים להקשות, שמפעילות אירועי מגע מתאימים במכשיר.
- הקשות במחשב נשלחות למכשיר.
- כדי לדמות תנועת צביטה, לוחצים לחיצה ארוכה על Shift בזמן הגרירה.
- כדי לגלול, משתמשים במשטח המגע או בגלגל העכבר, או מבצעים תנועת זריקה עם סמן העכבר.
כמה הערות לגבי סרטוני מסך:
- בהקלטות מסך מוצג רק תוכן הדף. חלקים שקופים בסרטון המסך מייצגים ממשקי מכשיר, כמו סרגל הכתובות של Chrome, שורת הסטטוס של Android או המקלדת של Android.
- סרטוני סקריןקאסט משפיעים לרעה על קצב הפריימים. כדי לקבל תמונה מדויקת יותר של ביצועי הדף, כדאי להשבית את ההקלטה של המסך בזמן המדידה של גלילות או אנימציות.
- אם מסך מכשיר Android נעול, התוכן של הסטרימינג של המסך נעלם. מבטלים את נעילת המסך של מכשיר Android כדי להמשיך את הסטרימינג של המסך באופן אוטומטי.
ניפוי באגים באופן ידני באמצעות Android Debug Bridge (adb)
במקרים נדירים, שימוש בשיטה חלופית לניפוי באגים מרחוק עשוי להיות שימושי. לדוגמה, יכול להיות שתרצו להתחבר ישירות לפרוטוקול של כלי הפיתוח של Chrome (CDP) ב-Chrome ל-Android.
כדי לעשות זאת, אפשר להשתמש בממשק הגישור של Android (adb):
- חשוב להפעיל את האפשרויות למפתחים ואת ניפוי הבאגים ב-USB במכשיר Android.
- פותחים את Chrome במכשיר Android.
מחברים את מכשיר Android למכונה לפיתוח באמצעות:
- כבל USB (פשוט).
- לחלופין, adb Wi-Fi connection.
בשורת הפקודה של מכונת הפיתוח, מריצים את הפקודה
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מאוכלס, גם אם לא מסמנים את ההגדרה זיהוי התקני USB.
לפתרון בעיות, אפשר לעיין במאמרים הבאים:
- מסמכי התיעוד של
adb לחלופין, אפשר לקרוא מדריכים ישנים יותר: