מה חדש בכלי הפיתוח (Chrome 70)

Kayce Basques

טוב לראות אותך שוב! עברו כ-12 שבועות מאז העדכון האחרון שלנו, שפורסם לגרסה 68 של Chrome. דילגנו על Chrome 69 כי לא היו לנו מספיק פיצ'רים חדשים או שינויים בממשק המשתמש שצדיקו פרסום פוסט.

התכונות החדשות והשינויים המשמעותיים שייכנסו ל-DevTools בגרסה 70 של Chrome כוללים:

• ביטויים בזמן אמת במסוף.
• הדגשת צמתים של DOM במהלך הערכה יזומה.
• אופטימיזציות בחלונית 'ביצועים'.
• ניפוי באגים מהימן יותר.
• הפעלת ויסות רשת מתפריט הפקודות
• השלמה אוטומטית של נקודות עצירה מותנות.
• הפסקה באירועים מסוג AudioContext.
• ניפוי באגים באפליקציות Node.js באמצעות ndb
• טיפ בונוס: מדידת אינטראקציות של משתמשים בעולם האמיתי באמצעות User Timing API

אפשר להמשיך לקרוא או לצפות בגרסה הווידאו של המסמך הזה:

ביטויים בזמן אמת במסוף

אפשר להצמיד ביטוי פעיל לחלק העליון של מסוף Google Analytics כדי לעקוב אחרי הערך שלו בזמן אמת.

1. לוחצים על Create Live Expression . ממשק המשתמש של Live Expression ייפתח.

   

   איור 1. ממשק המשתמש של Live Expression

2. מקלידים את הביטוי שרוצים לעקוב אחריו.

   

   איור 2. הקלדה של Date.now() בממשק המשתמש של הביטוי בזמן אמת

3. לוחצים מחוץ לממשק המשתמש של Live Expression כדי לשמור את הביטוי.

   

   איור 3. ביטוי בזמן אמת שנשמר

הערכים של Live Expression מתעדכנים כל 250 אלפיות שנייה.

סימון צומתי DOM במהלך הערכה יזומה

מקלידים במסוף ביטוי שמתקבל ממנו צומת DOM, והתכונה הערכה מיידית תדגיש את הצומת הזה בחלון התצוגה.

איור 4. מכיוון שהביטוי הנוכחי מקבל ערך של צומת, הצומת הזה מודגש בחלון התצוגה

ריכזנו כאן כמה ביטויים שיכולים להועיל לכם:

• document.activeElement כדי להדגיש את הצומת שבו יש כרגע מיקוד.
• document.querySelector(s) כדי להדגיש צומת שרירותי, כאשר s הוא סלקטור ב-CSS. זהו מעשה שזהה להעברת העכבר מעל צומת בעץ ה-DOM.
• $0 כדי להדגיש את הצומת שנבחר כרגע בעץ ה-DOM.
• $0.parentElement כדי להדגיש את הצומת ההורה של הצומת שנבחר.

אופטימיזציות בחלונית 'ביצועים'

בעבר, כשיצרתם פרופיל של דף גדול, היו נדרשות עשרות שניות כדי לעבד את הנתונים ולהציג אותם כתרשים בחלונית 'ביצועים'. לפעמים גם נדרשו כמה שניות כדי לטעון את הנתונים אחרי שלוחצים על אירוע כדי לקבל מידע נוסף עליו בכרטיסייה 'סיכום'. העיבוד והתצוגה החזותית מהירים יותר ב-Chrome 70.

איור 5. עיבוד וטעינה של נתוני ביצועים

ניפוי באגים מהימן יותר

ב-Chrome 70 תוקנו כמה באגים שגרמו לנקודות עצירה להיעלם או לא להופיע.

בנוסף, תוקנו באגים שקשורים למפות מקור. משתמשי TypeScript מסוימים מבקשים מ-DevTools להתעלם מקובץ TypeScript מסוים בזמן ניתוח הקוד, ובמקום זאת DevTools מתעלם מקובץ ה-JavaScript המצורף כולו. התיקונים האלה פותרים גם בעיה שגרמה לחלונית המקורות לפעול לאט באופן כללי.

הפעלת ויסות רוחב הפס בתפריט הפקודות

עכשיו אפשר להגדיר ויסות נתונים (throttle) ברשת ל-3G מהיר או ל-3G איטי מתפריט הפקודות.

איור 6. פקודות של הגבלת רוחב פס בתפריט הפקודות

השלמה אוטומטית של נקודות עצירה מותנות

אתם יכולים להשתמש בממשק המשתמש של ההשלמה האוטומטית כדי להקליד את הביטויים של נקודות העצירה המותנות מהר יותר.

איור 7. ממשק המשתמש של ההשלמה האוטומטית

הידעתם? ממשק המשתמש של המילוי האוטומטי מתאפשר בזכות CodeMirror, שמפעיל גם את מסוף Google.

הפסקה באירועים של AudioContext

משתמשים בחלונית Event Listener Breakpoints כדי להשהות את הבדיקה בשורה הראשונה של פונקציית טיפול באירועים של מחזור החיים AudioContext.

AudioContext הוא חלק מ-Web Audio API, שאפשר להשתמש בו כדי לעבד ולסנתז אודיו.

איור 8. אירועי AudioContext בחלונית 'נקודות עצירה של Event Listener'

ניפוי באגים באפליקציות Node.js באמצעות ndb

ndb הוא מנקה באגים חדש לאפליקציות Node.js. בנוסף לתכונות הניפוי הרגילות שזמינות דרך DevTools, ndb מציע גם:

• זיהוי של תהליכי הצאצא והתחברות אליהם.
• יש להציב נקודות עצירה לפני המודולים הנדרשים.
• עריכת קבצים בממשק המשתמש של DevTools.
• כברירת מחדל, מתעלמים מכל הסקריפטים שמחוץ לספריית העבודה הנוכחית.

איור 9. ממשק המשתמש של ndb

מידע נוסף זמין בקובץ README של ndb.

טיפ בונוס: מדידת אינטראקציות של משתמשים בעולם האמיתי באמצעות User Timing API

רוצים למדוד כמה זמן לוקח למשתמשים אמיתיים להשלים תהליכים קריטיים בדפים שלכם? כדאי לשקול להוסיף לקוד את User Timing API.

לדוגמה, נניח שרצית למדוד את משך הזמן שבו משתמש מבלה בדף הבית שלך לפני שהוא לוחץ על לחצן הקריאה לפעולה (CTA). קודם כול, מסמנים את תחילת התהליך במטפל באירועים שמשויך לאירוע של טעינת דף, כמו DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

לאחר מכן, מסמנים את סיום המסע ומחשבים את משך הזמן שלו כשלוחצים על הלחצן:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

אפשר גם לחלץ את המדידות, וכך לשלוח אותן בקלות לשירות הניתוח כדי לאסוף נתונים מצרפיים (אגרגטיבים) ואנונימיים:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

כלי הפיתוח מסמנים באופן אוטומטי את המדידות של זמן האחזור של המשתמש בקטע User Timing של הקלטות הביצועים.

איור 10. הקטע 'תזמון משתמש'

האפשרות הזו שימושית גם לניפוי באגים או לאופטימיזציה של קוד. לדוגמה, אם רוצים לבצע אופטימיזציה של שלב מסוים במחזור החיים, צריך להפעיל את window.performance.mark() בתחילת הפונקציה של מחזור החיים ובסוף שלה. React עושה זאת במצב פיתוח.

הורדת הערוצים לתצוגה מקדימה

מומלץ להשתמש ב-Chrome Canary, ב-Dev או ב-Beta כדפדפן הפיתוח שמוגדר כברירת מחדל. ערוצי התצוגה המקדימה האלה מעניקים לכם גישה לתכונות העדכניות ביותר של DevTools, מאפשרים לכם לבדוק ממשקי API מתקדמים לפלטפורמות אינטרנט ולמצוא בעיות באתר לפני שהמשתמשים שלכם יעשו זאת.

יצירת קשר עם צוות כלי הפיתוח ל-Chrome

אתם יכולים להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות, בעדכונים או בכל דבר אחר שקשור ל-DevTools.

• אתם יכולים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• מדווחים על בעיה בכלי הפיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי הפיתוח ב-DevTools.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להשאיר תגובות בסרטונים של מה חדש בכלי הפיתוח ב-YouTube או בסרטונים של טיפים לכלי הפיתוח ב-YouTube.

מה חדש בכלי הפיתוח

רשימה של כל מה שנדון בסדרה מה חדש ב-DevTools.