בדיקה מסונכרנת למכשירים ניידים

Addy Osmani
Addy Osmani
X GitHub

מבוא

אם אתם מפתחי אתרים שמטרגטים את האינטרנט לכמה מכשירים, סביר להניח שתצטרכו לבדוק את האתרים והאפליקציות שלכם בכמה מכשירים שונים וההגדרות שלהם. בדיקה מסונכרנת יכולה לעזור כאן, והיא דרך יעילה לבצע באופן אוטומטי את אותה אינטראקציה במספר מכשירים ודפדפנים בו-זמנית.

בדיקה מסונכרנת יכולה לעזור לפתור שתי בעיות שגוזלות זמן במיוחד:

  • מוודאים שכל המכשירים מסונכרנים עם כתובת ה-URL שרוצים לבדוק. הטעינה הידנית שלהם בכל מכשיר היא כל כך אתמול, נמשכת זמן רב יותר ומקלה עליכם להחמיץ רגרסיות.
  • סנכרון האינטראקציות. היכולת לטעון דף היא אפשרות מצוינת לבדיקה חזותית, אבל בבדיקת אינטראקציה רצוי גם שתהיה לכם אפשרות לסנכרן גלילות, קליקים והתנהגויות אחרות.

למרבה המזל, אם יש לכם גישה לחלק ממכשירי היעד, קיימים מספר כלים שנועדו לשפר את המעבר מהמחשב אל המכשירים הניידים. במאמר הזה נלמד על Ghostlab, Remote Preview, Adobe Edge Inspect ו-Gran.

זה שולחן העבודה שלי. זה היה פעם השולחן שלי. מעכשיו הוא משמש רק כמוזיאון נייד.
זה שולחן העבודה הווירטואלי שלי. זה היה פעם השולחן שלי. מעכשיו הוא משמש רק כמוזיאון נייד.

כלים

GhostLab (Mac)

GhostLab עבור Mac של Vanamco
GhostLab for Mac של Vanamco

Ghostlab הוא אפליקציה מסחרית ל-Mac (49$) שנועדה לסנכרן בדיקות של אתרים ואפליקציות אינטרנט במכשירים שונים. עם מינימום הגדרה, תוכלו לסנכרן בו-זמנית:

  • קליקים
  • ניווט
  • גלילות
  • קלט הטופס (למשל, טופסי התחברות, הרשמה)

כך קל מאוד לבדוק את חוויית המשתמש מקצה לקצה באתר במכשירים מרובים. לאחר פתיחת הדף בדפדפן במכשירים, כל שינוי בניווט (כולל רענון) יגרום לרענון מיידי של כל מכשיר מחובר אחר. ב-Ghostlab יש תמיכה בצפייה בספריות מקומיות, כך שהרענון הזה קורה גם כששומרים עריכות בקבצים מקומיים כדי שהכל מסונכרן תמיד.

גיליתי שהגדרת Ghostlab תהליך פשוט. כדי להתחיל, הורידו, התקינו ומפעילים את תקופת הניסיון (או את הגרסה המלאה אם מתחשק לכם לקנות). לאחר מכן, כדאי לחבר את ה-Mac ואת המכשירים שרוצים לבדוק לאותה רשת Wi-Fi כדי שניתן יהיה לגלות אותם.

ברגע ש-Ghostlab פועל, אפשר ללחוץ על '+' כדי להוסיף כתובת URL לבדיקה או פשוט לגרור אותה מסרגל הכתובות בדפדפן. לחלופין, גוררים את התיקייה המקומית שרוצים לבדוק לחלון הראשי, ותיווצר רשומת אתר חדשה. לצורך המאמר הזה, אני בודק גרסה פעילה של http://html5rocks.com. צ'יקי, נכון? ; )

בחירת כתובת URL או ספרייה מקומית במחשב
בחירת כתובת URL או ספרייה מקומית במחשב

לאחר מכן תוכלו להתחיל לעבוד עם שרת חדש של Ghostlab על ידי לחיצה על לחצן ההפעלה ">" לצד שם האתר שלכם. הפעולה הזו מפעילה שרת חדש, שזמין בכתובת IP ספציפית לרשת שלכם (למשל http://192.168.21.43:8080).

שרת Ghostlab שולח באופן מקומי תוכן דרך שרת ה-proxy מכתובת ה-URL שלנו
שרת Ghostlab שולח תוכן בשרת proxy מקומי מכתובת ה-URL שלנו

כאן חיברתי את Nexus 4 והפניתי את Chrome עבור Android לכתובת ה-IP שקיבלתי מ-Ghostlab. זה כל מה שאני צריך לעשות. Ghostlab לא מחייב להתקין לקוח ייעודי לכל מכשיר כמו פתרונות אחרים, והמשמעות היא שתוכלו להתחיל לבדוק עוד יותר מהר.

כל מכשיר שתקשרו לכתובת ה-URL של Ghostlab יתווסף לרשימת הלקוחות המחוברים בסרגל הצד שמשמאל לחלון הראשי של Ghostlab. כשלוחצים לחיצה כפולה על שם המכשיר, מופיעים פרטים נוספים כמו גודל המסך, מערכת ההפעלה וכו'. עכשיו אמורה להיות לכם אפשרות לבדוק ניווט וסנכרון קליקים! יש.

ב-Ghostlab אפשר גם להציג נתונים סטטיסטיים על מכשירים מחוברים, כמו מחרוזת UA, הרוחב והגובה של אזור התצוגה, דחיסות הפיקסלים של המכשיר, יחס הגובה-רוחב ועוד. תמיד אפשר לשנות באופן ידני את כתובת ה-URL הבסיסית שבודקים בלחיצה על סמל גלגל השיניים של ההגדרות שלצד הרשומה. נפתח חלון תצורה שנראה כך:

הגדר קבצים לצפייה, כותרות HTTP, מערכות תווים ועוד.
הגדר קבצים לצפייה, כותרות HTTP, מערכות תווים ועוד.

עכשיו אני יכול לבחור אחד מהמכשירים המחוברים האחרים שלי וללחוץ על קישורים שונים ב-HTML5Rocks, והניווט מסונכרן גם ב-Chrome במחשב שלי (שהזנתי באותה כתובת URL של Ghostlab) וגם בכל המכשירים שלי.

מה שעוד יותר טוב זה שיש ל-Ghostlab יש אפשרות להשתמש בשרת proxy לכל הקישורים העוברים ברשת, כך שבמקום לחיצה על http://192.168.21.43:8080/www.html5rocks.comhttp://192.168.21.43/www.htm5rocks.com/en/performance

כדי להפעיל, סמן את האפשרות 'Load all content דרך Ghostlab' (טעינת כל התוכן באמצעות Ghostlab) בכרטיסייה 'Content Upload (טעינת תוכן).

Ghostlab יכול לשכתב כתובות URL כך שכל המשאבים ייטענו דרך שרת ה-proxy של Ghostlab. שימושי לסנכרון הניווטים במספר דפים
Ghostlab יכול לשכתב כתובות URL כך שכל המשאבים ייטענו דרך שרת ה-proxy של Ghostlab. שימושי לסנכרון של ניווטים במספר דפים

כדי לראות איך זה עובד:

בדיקה מסונכרנת של טלפון Android, Windows 8 ו-Firefox עם מערכת הפעלה Ghostlab
בדיקה מסונכרנת של טלפון Android, Windows 8 ו-Firefox עם מערכת הפעלה Ghostlab

Ghostlab יכול לטעון כל מספר של אתרים או חלונות בכל דפדפן נתמך. לא רק צריך לבדוק את האתר ברזולוציות שונות, אלא גם איך הקוד פועל בדפדפנים שונים ובפלטפורמות שונות. יש!

סנכרון של גלילה, קליקים וניווט בין כל המכשירים לבדיקה
סנכרון גלילה, קליקים וניווט בין כל מכשירי הבדיקה

בעזרת Ghostlab תוכלו להגדיר את סביבת העבודה של הפרויקט בתצוגה מקדימה, ותוכלו לקבוע אם אתם רוצים לבצע שינויים בספרייה כשהמערכת תזהה אותם ותרענן אותם. המשמעות היא שהשינויים גורמים לרענון של כל הלקוחות המקושרים. אין יותר רענון ידני!

אולי מעניין אותך למה עוד עזרה של Ghostlab. זו אמנם לא סכין שוויצרית, אבל היא תומכת גם בבדיקת קוד מרחוק במכשירים מחוברים. בממשק הראשי, לחיצה כפולה על שם של מכשיר אמורה ליצור אפשרות לניפוי באגים שתפעיל גרסה של כלי הפיתוח ל-Chrome שתוכלו לשחק בה.

בעזרת Ghostlab, אפשר לעשות את זה דרך החבילה שכלולה בחבילה של Weinre לבדיקת האינטרנט, שמאפשרת לנפות באגים בסקריפטים ולשנות סגנונות במכשירים מחוברים. בדומה לחוויה של ניפוי באגים מרחוק שזמינה ב-Chrome ל-Android, ניתן לבחור רכיבים, להריץ פרופיי ביצועים מסוימים וסקריפטים של ניפוי באגים.

בסך הכול, התרשמתי מהמהירות שבה הצלחתי להשתמש ב-Ghostlab לבדיקות יומיומיות במכשירים שונים. אם אתם פרילנסרים, יכול להיות שהעלות של הרישיון המסחרי תהיה קצת גבוהה (ראו אפשרויות נוספות בהמשך). עם זאת, אשמח להמליץ על Ghostlab.

Adobe Edge Inspect CC (Mac, Windows)

המינוי ל-Creative Cloud של Adobe כולל את Edge Inspect
המינוי ל-Creative Cloud של Adobe כולל את Edge Inspect

Adobe Edge Inspect היא חלק מחבילת המינויים של Adobe Creative Cloud, אבל היא זמינה גם כתקופת ניסיון בחינם. הוא מאפשר להפעיל מספר מכשירי iOS ו-Android באמצעות Chrome (באמצעות התוסף Edge Inspector ל-Chrome), כך שאם תעיינו בכתובת URL מסוימת, כל המכשירים המחוברים יישארו מסונכרנים.

כדי להגדיר את התכונה, צריך קודם להירשם לחשבון Adobe Creative Cloud או להתחבר לחשבון קיים, אם כבר יש לכם חשבון. לאחר מכן, מורידים ומתקינים את Edge ישירות מ-Adobe.com (זמין ל-Mac ול-Windows נכון לעכשיו, אבל לא ל-Linux – מצטערים!). שימו לב: כדאי לשמור בdocs של Edge Inspect.

אחרי ההתקנה, כדאי להשיג את התוסף Edge intest של Chrome, כדי שתוכלו לסנכרן את הגלישה בין המכשירים המחוברים.

התוסף של Edge Inspect CC ל-Chrome
התוסף Edge Inspect CC ל-Chrome

צריך גם להתקין לקוח Edge Inspect בכל מכשיר שאיתו רוצים לסנכרן את הפעולות. למרבה המזל, הלקוחות שלנו זמינים למכשירי iOS, Android ו-Kindle.

מאחר שתהליך ההתקנה עומד מאחורינו, אנו יכולים להתחיל לבדוק את הדפים שלנו. כדי שזה יעבוד, צריך לוודא שכל המכשירים שלכם מחוברים לאותה רשת.

הפעילו את Edge Inspect במחשב, את התוסף Edge Inspect ב-Chrome ולאחר מכן את האפליקציה במכשירים שלכם (ראו בהמשך):

חיבור מכשיר לתוסף Edge Inspect
חיבור מכשיר אל התוסף Edge Inspect

עכשיו אנחנו יכולים לנווט לאתר כמו HTML5Rocks.com במחשב, והנייד שלנו יעבור אוטומטית לאותו הדף.

שיפור הניווט של כתובת URL במספר מכשירים מחוברים
עידוד הניווט בכתובת URL בכמה מכשירים מחוברים

בתוסף, תוכל לראות עכשיו את המכשיר רשום עם הסמל <> לצידו, כמו בצילום המסך למטה. לחיצה על האפשרות הזו תפעיל מופע של Weinre שיאפשר לך לבדוק את הדף שלך ולנפות באגים.

לצד האפשרויות, שיכול לשמש להפעלת הכלי לניפוי באגים של Weinre"
-800"height="549">
מכשירים מחוברים מופיעים עם הסמל <> לידם, שאפשר להשתמש בו כדי להפעיל את הכלי לניפוי באגים של Weinre

Weinre היא כלי צפייה ומסוף של DOM, ואין בה תכונות מכלי הפיתוח ל-Chrome כמו ניפוי באגים ב-JavaScript, יצירת פרופילים ו-Waterfall של רשת. מדובר במינימום של כלים למפתחים, אבל הוא שימושי לבדיקת רמת השפיות ב-DOM ובמצב JavaScript.

ניפוי באגים עם Weinre
ניפוי באגים ב-Weinre

התוסף Edge Inspect תומך גם ביצירת צילומי מסך ממכשירים מחוברים בקלות. זה שימושי לבדיקת פריסה או לקבלת תיעוד של הדף כדי לשתף אותו עם אחרים.

יצירת צילומי מסך באמצעות בדיקת Edge
יצירת צילומי מסך באמצעות Edge Inspect

Edge Inspect הוא פתרון מצוין למפתחים שכבר משלמים על CC. עם זאת, יש כמה אזהרות, כמו כל מכשיר שבו צריך להתקין לקוח ייעודי וקצת עבודת הגדרה נוספת שלא תמצאו בחלופה כמו Ghostlab.

תצוגה מקדימה מרחוק (Mac, Windows, Linux)

תצוגה מקדימה מרחוק הוא כלי בקוד פתוח שבו מארחים דפי HTML ותוכן שניתן להציג במספר מכשירים.

התצוגה המקדימה מרחוק מבצעת קריאת XHR במרווחי זמן של 1,100 אלפיות השנייה, כדי לבדוק אם כתובת URL בקובץ התצורה השתנתה. אם הוא מגלה שהוא מכיל אותה, הסקריפט מעדכן את המאפיין src של iframe שנטען לדף של כל מכשיר, וטוען אליו את הדף. אם לא זוהו שינויים, הסקריפט ימשיך בבדיקה עד שיתבצע שינוי.

בדיקה של כתובות URL מסונכרנות ב-27 מכשירים ומעלה
בדיקה מסונכרנות של כתובות URL ביותר מ-27 מכשירים

זה מעולה לשרשור מכשירים יחד ולשינוי קל של כתובת URL בכולם. כדי להתחיל:

  1. מורידים 'תצוגה מקדימה מרחוק' ומעבירים את כל הקבצים שמשויכים אליה לשרת שנגיש באופן מקומי. זה יכול להיות Dropbox, שרת פיתוח או משהו אחר.
  2. טען את "index.html" מההורדה הזו בכל מכשירי היעד שלך. הדף הזה ישמש בתור מנהל התקן ויטען את הדף שרוצים לבדוק באמצעות iframe.
  3. עורכים את "url.txt" (כלול בהורדה ומוצג עכשיו בשרת שלכם) עם כתובת ה-URL שרוצים להציג בתצוגה מקדימה. שומרים את הקובץ.
  4. בתצוגה המקדימה המרוחקת ניתן לראות שהקובץ url.txt השתנה, וכל המכשירים המחוברים ירועננו כדי לטעון את כתובת ה-URL שלך.

התכונה 'תצוגה מקדימה מרחוק' היא פתרון ברמת דיוק נמוכה, אבל היא פועלת בחינם ופועלת באופן תקין.

גראנט + טעינה מחדש בזמן אמת (Mac, Windows, Linux)

Grunt (ו-Yeoman) הם כלי שורת הפקודה שמשמשים לפיגומים ולבניית פרויקטים בממשק הקצה. אם אתם כבר משתמשים בכלים האלה ויש לכם הגדרה של טעינה מחדש בזמן אמת, קל לעדכן את תהליך העבודה כדי לאפשר בדיקה במכשירים שונים, כשכל שינוי שמבצעים בעורך גורם לטעינה מחדש בכל אחד מהמכשירים שבהם פתחתם את האפליקציה המקומית.

סביר להניח שהתרגלת להשתמש ב-grunt server. כשמפעילים אותו מספריית השורש של הפרויקט, המערכת עוקבת אחר השינויים בקובצי המקור ומעדכנת באופן אוטומטי את חלון הדפדפן. זה בזכות משימת שעון ה-grunt-contrib שאותה אנחנו מריצים כחלק מהשרת.

אם השתמשתם ב-Yeoman כדי לגבש את הפרויקט, נוצר קובץ גראנט עם כל מה שצריך כדי לבצע טעינה מחדש בזמן אמת במחשב הנייח שלכם. כדי שהוא יפעל במכשירים שונים, צריך רק לשנות מאפיין אחד, שהוא hostname (בשולחן העבודה). הוא אמור להיות רשום בקטע connect. אם hostname מוגדר לערך localhost, פשוט שנו אותו ל-0.0.0.0. מפעילים את grunt server וכמו כרגיל, אמור להיפתח חלון חדש שמציג תצוגה מקדימה של הדף. סביר להניח שכתובת ה-URL תיראה כך: http://localhost:9000 (היציאה היא 9000).

מפעילים כרטיסייה או טרמינל חדשים ומשתמשים ב-ipconfig | grep inet כדי לגלות את כתובת ה-IP הפנימית של המערכת. הוא עשוי להיראות כך: 192.168.32.20. השלב האחרון הוא לפתוח דפדפן כמו Chrome במכשיר שרוצים לסנכרן אליו טעינות חוזרות, ולהקליד את כתובת ה-IP הזו ולאחר מכן את מספר היציאה מקודם, כלומר 192.169.32.20:9000.

זהו! טעינה מחדש בזמן אמת אמורה לגרום עכשיו לכל שינוי שמבצעים בקובצי המקור במחשב, ולהפעיל טעינות מחדש גם בדפדפן במחשב וגם בדפדפן בנייד. נפלא!

עריכות שנשמרו במחשב גורמות עכשיו לטעינה מחדש בזמן אמת בדפדפן המחשב ובדפדפנים לנייד במכשירים עם אותה כתובת URL
עריכות שנשמרו במחשב גורמות עכשיו לטעינה מחדש בזמן אמת בדפדפן המחשב וגם בדפדפנים לנייד במכשירים עם אותה כתובת URL
טעינה מחדש של שידור חי במכשירים שונים בפעולה. כל עריכה/שמירה מספקת זמן אמת עבור הדף הנוכחי. זהו כלי מעולה לבדיקת עיצוב רספונסיבי.
פעולת טעינה מחדש של שידור חי במכשירים שונים. כל עריכה/שמירה מספקת זמן אמת עבור הדף הנוכחי. זהו כלי מעולה לבדיקת עיצוב רספונסיבי.

ב-Yeoman יש גם מחולל לנייד, שמאפשר להגדיר את תהליך העבודה בקלי קלות.

Emmet LiveStyle

Emmet LiveStyle הוא פלאגין לדפדפן ולעריכה שמאפשר לערוך CSS בזמן אמת בתהליך הפיתוח. בשלב הזה, היא זמינה ל-Chrome, Safari ו-Sublime Text, והיא תומכת בעריכה דו-כיוונית (עריכה לדפדפן ולהיפך).

כשמבצעים שינויים, הכלי Emmet LiveStyle לא מאלץ רענון מלא של הדפדפן, אלא מעביר עריכות CSS דרך הפרוטוקול לניפוי באגים מרחוק של DevTools. המשמעות היא שתוכל לראות שינויים שבוצעו בעורך שולחן העבודה בכל גרסה מחוברת של Chrome, ב-Chrome למחשב או ב-Chrome ל-Android.

LiveStyle כולל גם את מה שמכונה 'מצב צפייה בכמה משחקים בו-זמנית' – אידיאלי לבדיקה ולהתאמה של עיצובים רספונסיביים בחלונות ובמכשירים שונים. במצב 'צפייה בכמה משחקים בו-זמנית', כל עדכוני העריכה חלים על כל החלונות וגם על עדכוני כלי הפיתוח באותו הדף.

אחרי ההתקנה של חבילת LiveStyle, תוכלו להתחיל לעבוד עם עריכת CSS בזמן אמת:

  1. הפעלת Sublime Text ופתיחת קובץ CSS בפרויקט
  2. מפעילים את Chrome ועוברים לדף שבו נמצא ה-CSS שרוצים לערוך.
  3. פותחים את כלי הפיתוח ועוברים לחלונית LiveStyle. סמנו את האפשרות "Enable LiveStyle" . הערה: כדי להחיל עדכוני סגנון, כלי הפיתוח צריכים להיות פתוחים במהלך סשן העריכה בזמן אמת עבור כל חלון.
  4. כאשר האפשרות הזו מופעלת, תוצג רשימה של גיליונות סגנונות בצד שמאל, ורשימה של קובצי העורך שלכם בצד שמאל. בוחרים את קובץ העורך שרוצים לשייך לדפדפן. זהו! בום.

עכשיו רשימת קובצי העורך תתעדכן אוטומטית כשאתם עורכים, יוצרים, פותחים או סוגרים קבצים.

שינויים ב-CSS ב-Sublime מתוקנים באופן מיידי בחלונות דפדפן שונים ובאמולטור.
שינויים ב-CSS ב-Sublime מתוקנים באופן מיידי בחלונות שונים של הדפדפן ובאמולטור.

מסקנות

בדיקה במכשירים שונים היא עדיין תחום חדש שזז במהירות, עם הרבה מתחרים חדשים בפיתוח. למרבה המזל, יש כמה כלים חינמיים ומסחריים שנועדו להבטיח את התאימות והבדיקה שלכם במספר רחב של קבוצות מכשירים.

עם זאת, יש עדיין פוטנציאל רב לשיפור בתחום הזה, ואנחנו ממליצים לחשוב איך אפשר לשפר עוד יותר את הכלים לבדיקת מכשירים שונים. כל דבר שמקצר את זמן ההגדרה ומשפר את תהליך העבודה במכשירים שונים הוא מנצח.

בעיות

אולי הבעיות הכי גדולות שנתקלתי בהן במהלך הבדיקה עם הכלים האלה היו מכשירים שהולכים לישון באופן קבוע. לא מדובר בהפסקת עסקאות, אבל אחרי זמן מה זה קצת מעצבן. כשאפשר, מומלץ להגדיר את המכשירים כך שלא יעברו למצב שינה כפתרון עקיף, אבל חשוב לזכור שמצב זה עלול לרוקן את הסוללה אלא אם המכשיר מחובר לחשמל תמיד.

לא נתקלתי באופן אישי בבעיות רציניות עם GhostLab. ב-49 $המחיר עשוי להיות קצת תלול. עם זאת, חשוב לזכור שאם משתמשים בו באופן קבוע, המחיר שלו גבוה או נמוך יותר. אחד הדברים הנחמדים ביותר בהגדרה היה שאין צורך לדאוג להתקנה ולניהול של לקוח לכל מכשיר יעד. אותה כתובת URL עבדה בכל מקום.

בעזרת Adobe Edge Inspect, גיליתי שהצורך להתקין לקוחות ספציפיים ולהשתמש בהם בכל מכשיר הוא קצת מעייף. בנוסף, גיליתי שהממשק לא מרענן בעקביות את כל הלקוחות המחוברים, ולכן נאלצתי לעשות זאת בעצמי מהתוסף ל-Chrome. נדרש גם מינוי ל-Creative Cloud, ומוגבל לטעינת אתרים בלקוח ולא בדפדפן נבחר במכשירים. זה עלול להגביל את היכולת שלכם לבצע בדיקה מדויקת.

התצוגה המקדימה מרחוק פעלה כפי שפורסמה, אבל היא קלה מאוד. כלומר, לא רק רענון האתר בכל סוגי המכשירים. כלומר, תצטרכו אפשרות כלים מתקדמת יותר. לדוגמה, היא לא תסנכרן קליקים או גלילות.

המלצות

אם אתם מחפשים פתרון חינמי בפלטפורמות שונות, מומלץ להשתמש ב'תצוגה מקדימה מרחוק'. לעובדים בחברה שמחפשים פתרון בתשלום, GhostLab היה מצוין באופן עקבי מניסיוני, אבל זמין רק עבור Mac. עבור משתמשי Windows, Adobe Edge Inspect הוא בדרך כלל הקריאה הטובה ביותר, ופחות כמה בעיות יקרות.

גראנט ו-LiveStyle הם גם כלים מצוינים להרחבת איטרציה בשידור חי במהלך הפיתוח.