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

Kayce Basques

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

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

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

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

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

  1. לוחצים על Create Live Expression יצירת ביטוי בזמן אמת. ממשק המשתמש של Live Expression ייפתח.

    ממשק המשתמש של Live Expression

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

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

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

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

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

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

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

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

הדגשת צומתי DOM במהלך הערכה יזומה

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

אחרי שמקלידים document.activeElement במסוף, צומת מסומן באזור התצוגה.

איור 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, שאפשר להשתמש בו כדי לעבד ולסנתז אודיו.

אירועי AudioContext בחלונית Event Listener Breakpoints.

איור 8. אירועי AudioContext בחלונית Event Listener Breakpoints

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

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

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

ממשק המשתמש של ndb.

איור 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;

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

הקטע 'תזמון משתמש'.

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

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

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

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

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

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

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

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