פיתוח לניידים צריך להיות קל באותה מידה כמו פיתוח למחשב. השקענו מאמצים רבים בכלי הפיתוח ל-Chrome כדי להקל עליכם, והגיע הזמן לחשוף כמה תכונות חדשות שיוכלו לשפר באופן משמעותי את פיתוח האתרים שלכם לנייד. תחילה, ניפוי באגים מרחוק, ולאחר מכן נשיק אמולציה מתאימה של מכשירים ניידים.
הקלטת מסך של המכשיר למחשב
עד עכשיו, בזמן ניפוי באגים מרחוק הייתם צריכים להעביר את העיניים שלכם קדימה ואחורה בין המכשיר שלכם לבין כלי הפיתוח. עכשיו Screencast מציג את מסך המכשיר ישירות לצד כלי הפיתוח. לראות את זה טוב, אבל האינטראקציה איתה עוד יותר טובה:
- קליקים על הקלטת המסך מתורגמים להקשות ואירועי מגע תקינים מופעלים במכשיר.
- בדיקת רכיב במכשיר באמצעות מצביע העכבר במחשב
- הקלד במקלדת של שולחן העבודה - כל ההקשות נשלחות אל המכשיר. קל מאוד לחסוך זמן בהקלדה עם האגודלים.
- כדי לגלול בדף, נוגעים בו עם הסמן או פשוט מחליקים על משטח המגע של המחשב הנייד.
התיעוד המלא על הקלטת מסך כולל את כל המידע הזה ועוד, כמו שליחת תנועת צביטה לשינוי מרחק התצוגה. נדרש Chrome ב-Android בטא (m32).
ניפוי באגים מרחוק בקלות
לפני 18 חודשים, הופעל ב-Chrome האפשרות לנפות באגים מרחוק בדפדפנים WebKit, אבל אם ניסית את האפשרות הזו בעבר, היה עליך לטפל בהורדה של Android SDK בנפח 400MB, ולהוסיף את הקובץ הבינארי של adb ל-$PATH ולפקודות קסומות בשורת הפקודה.
עכשיו, אנחנו שמחים להודיע שאפשר לשכוח את כל זה. מעכשיו Chrome יכול לגלות התקני USB שחיברתם אליהם ולדבר איתם במקור. יישמנו את הפרוטוקול adb ישירות דרך USB ב-Chrome, כך שניתן לעבור בקלות אל Menu > Tools > Inspect Devices ולהתחיל מיד סשן של ניפוי באגים מרחוק.
זה עובד נהדר בכל הפלטפורמות, כולל ב-Chrome OS, אבל חשוב לזכור שב-Windows, קודם צריך להתקין מנהלי התקנים מתאימים של USB כדי לדבר עם המכשיר. אם לא ניסית זאת בעבר, יהיה עליך להפעיל ניפוי באגים ב-USB במכשיר ולאשר שאתה משתמש ב-Chrome ל-Android בטא. לקריאת המסמכים המלאים
העברה קדימה לפרויקטים מקומיים
הפיתוח שלך מתבצע ב-localhost:8000, אבל הטלפון לא מצליח להגיע לשם. לכן, הוספנו את ההעברה ליציאה אחרת ישירות לתהליך העבודה לניפוי באגים מרחוק. עכשיו קל לעבוד על כל הפרויקטים ללא צורך בפריצות מנהור. ב-about:inspect, לוחצים על'העברת יציאות' כדי להגדיר את היציאות שרוצים שיהיו זמינות. היציאות יידלקו בירוק אם הן תקינות.
אמולציה לנייד
אין לך תמיד את המכשירים הדרושים לבדיקת תאימות, נכון? אמנם ניפוי באגים מרחוק מעניק לכם את הביצועים הטובים ביותר מבחינת ביצועים ומגע, אבל עכשיו תוכלו לחקות מאפיינים רבים של המכשיר במחשב, לחסוך זמן ולהפוך את לולאת האיטרציה מהר יותר.
אמולציה של גודל המסך, PixelRatio של המכשיר ו-<meta viewport> באמצעות סימולציה של אירוע מגע מלא
אם ראיתם את התכונה הקודמת של מדדי מכשירים, מה שזמין עכשיו הוא שדרוג אדיר. הצוות השקיע הרבה מאמצים כדי שהאמולציה החדשה לנייד תקבל ייצוג כמעט מציאותי של מה שאפשר לראות במכשירים אמיתיים. לדוגמה, דפדפני WebKit מפעילים אלגוריתם מורכב של שינוי אוטומטי של טקסט, ולמעשה, לכל מכשיר יש 'גורם פוג'' ספציפי להפיכת הטקסט לאוטומטי, שמשתנה כדי לשמור על טקסט קריא. במצב אמולציה, אפשר לוודא שהתנהגות זו מיושמת ולראות את התוצאות.
יחס הפיקסלים במכשיר
עד עכשיו, כמעט בלתי אפשרי לראות מה מוצג במכשיר עם DPI נמוך במכשיר עם DPI נמוך. עכשיו, אמולציית ה-dPR בכלי הפיתוח תתאים את התצוגה כדי לאפשר לך להתקרב לתרחיש 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 בנושא כלי הפיתוח לנייד: