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