מצב מכשיר חדש לדור שמשתמש במכשירים ניידים בראש ובראשונה
לפני קצת יותר משנה השקנו את 'מצב מכשיר', דרך לחקות מכשירים ולעבוד עם עיצובים עם תגובה דינמית. עכשיו הגיע הזמן לשדרוג העיקרי הראשון שלו, שיתחיל ב-Chrome 49. אז מה חדש?
הנייד הופך לנקודת ההתחלה בכלי הפיתוח ל-Chrome. בעבר הצגנו דרכים להדמיה של נייד, אבל ברירת המחדל לפיתוח הייתה מחשב. תמיד היה צריך להפעיל את ההדמיה לנייד. עכשיו, כשהשימוש באתרים לנייד עלה על השימוש במחשבים במקומות רבים, אנחנו משנים את העמדה שלנו גם ב-DevTools.
מה חדש?
קודם כול, ממשק המשתמש יעיל יותר ומשתמש בפחות מקום. אנחנו צופים שרוב המשתמשים יבחרו במצב המכשיר החדש בתור מצב הפיתוח הראשי, ולכן דרישת העיצוב הייתה עיצוב נקי ופשוט שמרחיב את סרגל הניווט הראשי של DevTools.
סרגל המכשירים החדש לקפיצה מהירה מעל שאילתות המדיה.
בנוסף, מיקמנו את חלון התצוגה במרכז והוספנו למעלה סרגל חדש למעבר מהיר בין מכשירים. הסרגל הזה עוזר מאוד בתכנון רספונסיבי, ומאפשר לכם לקבל מושג על הגדלים הנפוצים ביותר של מכשירים.
ולבסוף, הרבה אפשרויות אוחדו או הוסתרו מאחורי מתג, כשהדבר היה אפשרי. האפשרויות המשולבות החדשות האלה מאפשרות לעבור בקלות רבה יותר בין המצבים. כדי להפעיל או להשבית אמצעי בקרה מסוימים או להתאים אישית את חוויית השימוש בסרגל הכלים, לוחצים על סמל התפריט עם שלוש הנקודות.
רספונסיבי כברירת מחדל
סרגל הכלים הראשי של DevTools מתרחב עכשיו לצד ימין של חלון הדפדפן, וכולל את הכלים החשובים ביותר להדמיה של מגוון מכשירים ניידים ומחשבים. אתם יכולים לבחור מבין שני מצבי פיתוח:
- מודעות רספונסיבית
- מכשיר ספציפי
בשני המצבים, חלון התצוגה נמצא בחלון משלו ב-Chrome שאפשר לשנות את הגודל שלו. היתרון המשמעותי של השיטה הזו הוא שאפשר למקסם את חלון הדפדפן ואת DevTools לפי הצורך, בלי שהם יזזו כשבודקים כמה גדלים של הדף ועוברים ביניהם.
רספונסיבי הוא המצב שבו כדאי להשתמש במהלך תהליך החזרה על פעולות (iteration) כדי לוודא שהאתר יפעל בכל סוגי המכשירים, ולא רק בכמה מכשירים ספציפיים. במצב הזה, אפשר לשנות את הגודל של הלחצנים לצד אזור התצוגה באופן חופשי.
מכשיר ספציפי: מצב שבו בוחרים מכשיר ספציפי ונועלים את אזור התצוגה בגודל שלו. האפשרות הזו שימושית כשרוצים לבצע תיקונים אחרונים במכשירים פופולריים מסוימים לקראת ההשקה. לכן אנחנו לא מציגים רק רשימה ענקית של כל סוגי המכשירים בתפריט הנפתח, אלא רק את המכשירים הפופולריים ביותר כרגע. אם תבחרו מכשיר, אנחנו עושים כמיטב יכולתנו כדי שההתנהגות שלו תהיה דומה ככל האפשר להתנהגות של המכשיר האמיתי: אנחנו מעתיקים את אירועי המגע, סוכן המשתמש, אזור התצוגה, רכיבי ה-chrome והממשק המשתמש של המכשיר (אם הם זמינים).
ניפוי באגים משולב מרחוק
למרות שאפשר להשתמש בתוכנות אמולציה, גם בתוכנות הטובות ביותר, עדיין יש מגבלות. יש דברים שפשוט אי אפשר לעשות היום באמצעות הדמיות, כמו:
- בודקים אם הלחצן גדול מספיק כדי להפעיל אותו באמצעות האגודל.
- כדאי לבדוק את הביצועים של האתר בטלפון איטי יותר.
- ניפוי באגים של תכונות חריגות ומגבלות אקראיות במכשירים מסוימים.
כדי לבדוק את כל התרחישים האלה בצורה מספקת, צריך לבדוק, לעבוד ולפתור באגים באמצעות מכשירים פיזיים אמיתיים.
כבר זמן מה אפשר לעבור אל chrome://inspect, לחבר את המכשיר באמצעות USB ולפתוח סשן ניפוי באגים מרחוק דרך DevTools. עכשיו, עשינו צעד נוסף ושיפרנו את המראה וההתנהגות של ניפוי הבאגים מרחוק, והטמענו אותו בליבה של DevTools. במקום לגלוש לדף אחר, עכשיו אפשר לגשת לבדיקת מכשירים כתיבת דו-שיח ישירות בתפריט הראשי החדש. כך קל יותר לכלול תיקון באגים פיזי בתהליך העבודה – פשוט מחברים את הטלפון, בלי לצאת מ-DevTools.
הבית החדש של שאר אמצעי הבקרה הקודמים להדמיה
מאחר שהנייד הוא עכשיו ברירת המחדל בכל הכלים של DevTools, תכונות כמו הגבלת קצב התעבורה ברשת הועברו למקום המתאים להן, במקרה הזה לחלונית הרשת.
תכונות מסוימות, כמו הדמיה של חיישנים או הגדרות רינדור כמו הדמיה של מדיה מודפסת, הועברו למקום קבוע ב'מגירה'. כל התוספים נמצאים בתפריט הראשי החדש בקטע 'כלים נוספים'.
ברור לנו שזהו שינוי משמעותי שכולנו נצטרך להתרגל אליו. במסמכי התיעוד שעודכנו לאחרונה תוכלו למצוא מידע מלא על כל מה שמופיע במצב הזה. נשמח לשמוע ממך ב-Twitter. אם יש לך צורך ביותר מ-140 תווים, אפשר לכתוב לנו בכלי למעקב אחר באגים (כן, גם לבקשות להוספת תכונות).