Google I/O 2016 הסתיים. DevTools היה נוכח מאוד ב-I/O, כולל הרצאה של פול באקאוס (Paul Bakaus), פול אירי (Paul Irish) וסת' תומפסון (Seth Thompson) על העתיד של DevTools. מומלץ לצפות בסרטון הבא או להמשיך לקרוא כדי לקבל מידע נוסף על הכיוון שאליו אנחנו מתכוונים לפתח את DevTools בשנת 2016 ואילך.
כתיבת תוכן
מטרת DevTools היא להקל על כל שלב במחזור החיים של פיתוח האינטרנט. סביר להניח שאתם יודעים שכלי הפיתוח יכולים לעזור לכם לנפות באגים באתר או ליצור פרופיל של אתר, אבל יכול להיות שאתם לא יודעים איך להשתמש בהם כדי לעזור לכם ליצור אתר. המונח 'כתיבה' מתייחס לפעולה של יצירת אתר. אחד מהיעדים שלנו בעתיד הנראה לעין הוא להקל עליכם לבצע שינויים חוזרים, לבצע ניסויים ולהפעיל את האתר במספר מכשירים.
מצב המכשיר
צוות DevTools ממשיך לשפר את חוויית השימוש במצב מכשיר, שקיבל את השדרוג העיקרי הראשון שלו ב-Chrome 49. במאמר שפרסמתי במרץ (מצב מכשיר חדש לעולם שמתמקד בניידים) יש סקירה כללית של העדכונים. המטרה העיקרית היא לספק תהליך עבודה חלק לצפייה באתר ולהדמיה שלו בכל גורמי הצורה.
ריכזנו כאן סיכום קצר של כמה עדכונים במצב המכשיר שנוספו ל-Canary מאז פרסום המאמר הזה במרץ.
כשמציגים דף כמכשיר ספציפי, אפשר להציג את חומרת המכשיר מסביב לדף כדי להיכנס יותר לחוויה.
תפריט כיוון המכשיר מאפשר לכם להציג את הדף כשרכיבים שונים בממשק המשתמש של המערכת, כמו סרגל הניווט והמקלדת, פעילים.
גם הסטורי במחשב השתפר. בעזרת תכונת הזום במצב המכשיר, אפשר לדמות מסכי מחשב גדולים יותר מהמסך שבו אתם עובדים בפועל, כמו מסך 4K (3840px x 2160px).
אפשר לכוונן את קצב הנתונים של הרשת ישירות מממשק המשתמש של מצב המכשיר, במקום לעבור לחלונית 'רשת'.
הבדלים בין גרסאות של מקור
כשמשנים את העיצוב של אתר, קל לאבד את הקשר בין השינויים. כדי לפתור את הבעיה, כלי הפיתוח ישתמש בסמנים חזותיים בחלונית Sources (מקורות) ליד מספרי השורות, כדי לעזור לכם לעקוב אחרי השינויים. שורות שנמחקו מסומנות בקו אדום, שורות ששונו מודגשות בסגול ושורות חדשות מודגשות בירוק.
תוכלו גם לעקוב אחרי השינויים בכרטיסייה החדשה של המגירה 'מקורות מהירים':
בפעם הראשונה, הכרטיסייה 'קוד מקור מהיר' מאפשרת לכם להתמקד בקוד המקור של HTML או JavaScript באותו זמן שבו אתם עובדים על כללי ה-CSS. בנוסף, כשלוחצים על מאפיין CSS בחלונית הסגנונות, הכרטיסייה 'מקור מהיר' עוברת אוטומטית להגדרה במקור ומדגישה אותה.
כדי לנסות את התכונה כבר היום, מפעילים את הניסוי sources diff ב-Chrome Canary.
עריכת Sass בזמן אמת
ריכזנו כאן כמה שיפורים משמעותיים שצפויים בקרוב לתהליך העריכה של Sass. התכונות האלה נמצאות בשלב ניסיוני מאוד מוקדם. נעדכן אתכם בהמשך כשהתכונות האלה יהיו מוכנות לניסיון.
בעיקרון, DevTools יאפשר לכם להציג ולערוך משתני Sass כמו שתמיד קיוויתם. לוחצים על ערך שעבר הידור ממשתנה Sass, והכרטיסייה החדשה 'מקורות מהירים' תעביר אתכם להגדרה של המשתנה.
כשעורכים ערך שעבר הידור ממשתנה Sass, העריכה מעדכנת את משתנה ה-Sass ולא רק את המאפיין הספציפי שבחרתם.
אפליקציות Progressive Web App
אם תעיינו ברשימת ההרצאות בנושא אינטרנט ו-Chrome ב-Google I/O 2016, תראו שנושא גדול עולה בעולם פיתוח האינטרנט: אפליקציות אינטרנט מתקדמות (PWA).
ככל שהמודל של Progressive Web App מתפתח, אנחנו מעדכנים את כלי הפיתוח במהירות כדי לספק למפתחים את הכלים הנדרשים ליצירת אפליקציות Progressive Web Apps מצוינות. הבנו שלפיתוח ולניפוי באגים של האפליקציות המודרניות האלה יש לעיתים קרובות דרישות ייחודיות, ולכן הוספנו ל-DevTools חלונית שלמה לפיתוח אפליקציות אינטרנט מתקדמות (PWA). פותחים את Chrome Canary ורואים שהחלונית 'משאבים' הוחלפה בחלונית 'אפליקציות'. כל הפונקציונליות הקודמת מחלונית המשאבים עדיין זמינה. יש רק כמה חלוניות חדשות שמיועדות במיוחד לפיתוח של Progressive Web App:
בחלונית Manifest מוצג ייצוג חזותי של קובץ המניפסט של האפליקציה. מכאן אפשר להפעיל באופן ידני את תהליך העבודה 'הוספה למסך הבית'.
בחלונית Service Workers אפשר לבדוק את קובץ השירות (service worker) הרשום בדף הנוכחי ולבצע איתו פעולות.
בחלונית 'ניקוי נפח האחסון' אפשר למחוק כל מיני נתונים כדי להציג דף ללא נתונים.
JavaScript
מעבר הגבול בין הקצה הקדמי לקצה העורפי הוא חלק קשה בפיתוח אינטרנט מלא. אם גיליתם שהקצה העורפי מחזיר קוד מצב 500 בזמן ניפוי באגים באפליקציית אינטרנט, סימן שהגעתם למגבלה של התועלת של DevTools, ותצטרכו לשנות את ההקשרים ולהפעיל את סביבת הפיתוח של הקצה העורפי כדי לנפות את הבעיה.
עם זאת, כשמדובר בקצוות עורפי שנכתבים ב-Node.js, הגבולות בין הקצה הקדמי לקצה העורפי מתחילים להתערפל. מכיוון ש-Node.js פועל במנוע V8 JavaScript (אותו מנוע שמפעיל את Google Chrome), רצינו לאפשר לנפות באגים ב-Node.js מ-DevTools. בזכות V8, DevTools ו-Google Cloud Platform for Node.js, עכשיו אפשר להשתמש בכל התכונות החזקות של ניפוי הבאגים ב-DevTools כדי לבצע בדיקה פנימית של אפליקציית Node.js. הפונקציונליות כבר הגיעה לגרסאות build לילה של Node.js, אבל השילוב של DevTools עדיין נמצא בתהליך שיפור לפני שייכלל במהדורה ראשית. יום אחד נוכל לנפות באגים באפליקציות Node.js מ-DevTools בקלות רבה יותר, פשוט על ידי העברת node --inspect app.js והתחברות מ-DevTools בכל חלון של Chrome.
כלים קיימים כמו Node Inspector מספקים חוויית ניפוי באגים מבוססת ממשק משתמש גרפי, אבל השילוב החדש של Node.js DevTools יישאר מעודכן עם תכונות ניפוי הבאגים העדכניות ביותר של DevTools, כמו ניפוי באגים ב-async stack, תיבת שחורה ותמיכה ב-ES6.