פיתוח לנייד צריך להיות קל כמו פיתוח למחשב. עבדנו קשה על הכלים של Chrome למפתחים כדי להקל עליכם, ועכשיו הגיע הזמן לחשוף כמה תכונות חדשות שצפויות לשפר באופן משמעותי את פיתוח האינטרנט לנייד. קודם נדבר על ניפוי באגים מרחוק, ואז נציג הדמיה נכונה של מכשיר נייד.
איך מבצעים הקלטת מסך של המכשיר בשולחן העבודה
עד עכשיו, כשאתם מבצעים ניפוי באגים מרחוק, אתם צריכים להעביר את העיניים הלוך ושוב בין המכשיר לבין devtools. עכשיו, ב-Screencast מוצג מסך המכשיר לצד כלי הפיתוח. קל לראות את הנתונים, אבל קל עוד יותר לבצע איתם פעולות:
- קליקים על הקלטת המסך מתורגמים להקשות ואירועי מגע מתאימים מופעלים במכשיר.
- בודקים רכיב במכשיר באמצעות סמן העכבר במחשב
- מקלידים במקלדת במחשב – כל הקשות המקלדת נשלחות למכשיר. דרך יעילה לחסוך זמן בהשוואה להקלדה עם האגודלים.
- כדי לגלול בדף, פשוט מחליקים על משטח המגע של המחשב הנייד או גוררים את הסמן.
במסמך המלא בנושא העברת מסך מוסבר על כל זה ועוד, כמו שליחת תנועת צביטה לשינוי מרחק מתצוגה. נדרשת גרסת בטא של Chrome ל-Android (m32).
ניפוי באגים מרחוק בקלות
לפני 18 חודשים, הוספנו ל-Chrome תכונת ניפוי באגים מרחוק מתאימה לדפדפני WebKit. אבל אם ניסיתם להשתמש בה אז, הייתם צריכים להתמודד עם הורדה של Android SDK בגודל 400MB, הוספת קובץ ה-binary של adb ל-$PATH ועוד כמה לחשים קסומים בשורת הפקודה.
עכשיו אנחנו שמחים להודיע שאפשר לשכוח את כל זה. עכשיו Chrome יכול לזהות באופן מקורי את המכשירים שמחוברים ל-USB ולתקשר איתם. הטמענו את פרוטוקול adb ישירות דרך USB ב-Chrome, כך שתוכלו לעבור בקלות אל Menu > Tools > Inspect Devices ולהתחיל מיד את סשן ניפוי הבאגים מרחוק.
הפתרון הזה עובד מצוין בכל הפלטפורמות, כולל Chrome OS. עם זאת, חשוב לזכור שב-Windows צריך קודם להתקין את מנהלי ה-USB המתאימים כדי לדבר עם המכשיר. אם זו הפעם הראשונה שאתם מנסים, תצטרכו גם להפעיל את ניפוי הבאגים ב-USB במכשיר ולאשר שאתם משתמשים ב-Chrome for Android Beta. לעיון במסמכים המלאים
העברה קדימה של יציאות (port-forward) לפרויקטים מקומיים
אתם מפתחים ב-localhost:8000 אבל הטלפון לא יכול להגיע לכתובת הזו. לכן הוספנו העברה אוטומטית של יציאות ישירות לתהליך ניפוי הבאגים מרחוק. עכשיו קל לעבוד על הפרויקטים המלאים שלכם, בלי טריקים של מנהרות. ב-about:inspect לוחצים על Port Forwarding (העברת נתונים ביציאות) כדי להגדיר את היציאות שרוצים שיהיה עליהן גישה. אם היציאות מוגדרות כראוי, הן יודגשו בירוק.
אמולציה לנייד
לא תמיד יש לכם את המכשירים הנדרשים לבדיקה של תאימות, נכון? ניפוי באגים מרחוק במכשירים אמיתיים יספק לכם את התחושה הטובה ביותר לגבי הביצועים והממשק, אבל עכשיו אתם יכולים לדמות באופן ריאליסטי מאפיינים רבים של מכשירים במחשב, וכך לחסוך זמן ולזרז את מחזור החזרה.
הדמיה של גודל המסך, devicePixelRatio ו-<meta viewport> באמצעות סימולציה מלאה של אירועי מגע
אם השתמשתם בתכונה הקודמת של מדדי המכשיר, התכונה החדשה היא שדרוג משמעותי. הצוות עבד קשה כדי שההדמיה החדשה לנייד תציג ייצוג כמעט ריאליסטי של מה שרואים במכשירים אמיתיים. לדוגמה, בדפדפני WebKit יש אלגוריתם מורכב להתאמה אוטומטית של טקסט. למעשה, לכל מכשיר יש 'גורם התאמה' ספציפי להתאמה האוטומטית של הטקסט, שמשתנה כדי לשמור על הקריאוּת של הטקסט. במצב הדמיה אפשר לוודא שההתנהגות הזו חלה ולראות את התוצאות.
יחס הפיקסלים של המכשיר
עד עכשיו, כמעט לא ניתן היה לראות מה מוצג במכשיר עם רזולוציית hi-DPI במכשיר עם רזולוציית low-DPI. עכשיו, הדמיית ה-dPR ב-DevTools תתאים את התצוגה שלכם כדי שתוכלו להתקרב לתרחיש DPI מעמיק. בנוסף, הערכים של window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) וכו' ישקפו את ההגדרה שלכם, כך שתוכלו לראות איך האפליקציה מתאימה את עצמה, כולל טעינה של נכסים שונים שמותאמים ל-dpi ספציפי.
הדמיית המכשיר לא כוללת תכונות או באגים בדפדפן. כך, במהלך הדמיה של iOS, WebGL עדיין יפעל ולא תתקלו בבאג של זום כיוון ב-iOS 5. כדי להתנסות בתנודות האלה, צריך לעבור למכשיר.
אמולציה תקינה של <meta viewport> (ו-@viewport)
בעבר, בדיקת ההתנהגות של width=device-width ו-minimum-scale:1.0 הייתה משחק במכשיר בלבד. עכשיו אפשר לנסות במהירות תצוגות מפורטות שונות ולראות איך הן מוצגות.
סימולציה של אירועי מגע
ההגדרה הדמיה של מסך מגע תבטיחה שהקליקים שלכם יתפרשו כ-touchstart וכן הלאה. בנוסף, אירועים סינתטיים כמו זום, גלילה ותנועה בתמונה יפעלו. כדי להגדיל את התצוגה באמצעות תנועת צביטה, פשוט גוררים עם shift או גוללים עם shift כדי להתקרב לתוכן. תוכלו לראות בצורה ברורה איך התוכן מותאם לגודל מעבר לאזור התצוגה.
לבסוף, התכונות הסטנדרטיות של זיוף סוכן משתמש (גם בכותרת הבקשה וגם ברמה window.navigator), מיקום גיאוגרפי והדמיה של כיוון מאפשרות לכם לבדוק את הפונקציונליות המלאה של המכשיר.
הגדרות מוגדרות מראש במכשיר
ההגדרות המוגדרות מראש להדמיה מאפשרות לכם לבחור טלפון או טאבלט ולקבל את גודל המסך הנכון, את dPR ואת UA שחלים על המכשיר הזה, יחד עם אירועי מגע מלאים וכן הדמיה של אזור התצוגה. אתם יכולים לנסות הגדרות מוגדרות מראש ספציפיות או לשנות בקלות את המאפיינים האלה אחד אחרי השני.
באתר devtools.chrome.com אפשר למצוא את המסמכים המלאים בנושא הדמיה לנייד באמצעות כלי הפיתוח.
הדגמה (דמו)
כדי לראות הדגמה מלאה של כל התכונות האלה בפעולה, מומלץ לצפות בהרצאה שלי בת 23 דקות מ-Chrome Dev Summit בנושא DevTools לנייד: