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

1. שימוש בכלי הפיתוח של כרום לצורך צפייה בעמוד בגדלי מסך שונים

כלי הפיתוח של כרום מאפשרים לדמות גלישה מכל מכשיר מובייל. האמולציה מכסה את ההיבטים הבאים:

1. גודל מסך
2. מחרוזת User Agent
3. האטת מהירות רשת
4. אירועי Touch במקום עכבר

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

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

2. הצגת תמונות מסך על כל מכשיר באמצעות Brwoser Stack

האתר BrowserStack מציע שירות חינמי מעולה למפתחי אתרים מותאמים: הם יפעילו אמולטורים לכל הדפדפנים, מערכות ההפעלה וגדלי המסך האפשריים, יצלמו את התוצאות וישלחו לכם את הצילומים וכל זה תוך מספר דקות. רוצים לראות? פשוט הכנסו לקישור ורשמו בתיבה את כתובת האתר שלכם:
https://www.browserstack.com/screenshots

3. איתור שגיאות מרוחק על כל מכשיר באמצעות Weinre

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

תחילה עליכם להתקין את Node.JS אם עדיין לא מותקן מהקישור כאן:
https://nodejs.org/

לאחר מכן יש להכנס לשורת הפקודה (cmd) ולהפעיל:

npm install -g weinre

לאחר התקנת הכלי עליכם לברר מהי כתובת ה IP של המחשב שלכם ולהפעיל את הפקודה weinre עם כתובת IP זו. למשל, אם כתובת ה IP שלי ברשת הפנימית הינה 10.0.1.3 עליי לכתוב את הפקודה:

weinre --boundHost 10.0.1.3

בתגובה תקבלו על המסך הודעה שהשרת התחיל שנראית כך:

2014-04-04T16:44:28.723Z weinre: starting server at http://10.0.1.3:8080

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

4. קישורים נוספים

הוראות מפורטות לחיבור מכשיר סמארטפון למחשב והצגת כלי הפיתוח של הדפדפן על המכשיר (למכשירי אייפון ואנדרואיד):
http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

בדיקת התאמת אתר למכשירים ניידים של גוגל:
https://www.google.com/webmasters/tools/mobile-friendly/