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