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

Kayce Basques

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

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

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

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

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

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

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

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

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

    הקלדה של Date.now() בממשק המשתמש של Live Express.

    איור 2. הקלדה של Date.now() בממשק המשתמש של Live Express

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

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

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

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

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

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

אחרי שמקלידים 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). קודם כול מסמנים את תחילת התהליך ב-handler של אירועים שמשויך לאירוע של טעינת דף, למשל 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() בתחילת הפונקציה של מחזור החיים ובסוף שלה. התגובה עושה את זה במצב פיתוח.

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

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

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

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

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

רשימה של כל מה שדיברנו עליו בסדרה מה חדש בכלי הפיתוח.