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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

ביטויים פעילים במסוף

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

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

    ממשק המשתמש של התכונה 'הבעה בזמן אמת'

    איור 1. ממשק המשתמש של התכונה 'הבעה בזמן אמת'

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

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

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

  3. לוחצים מחוץ לממשק המשתמש של ההבעה בזמן אמת כדי לשמור את ההבעה.

    ביטוי פעיל שנשמר.

    איור 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 מנחים את כלי הפיתוח להתעלם מקובץ TypeScript מסוים בזמן שהם מבצעים ניפוי באגים בקוד, אבל כלי הפיתוח מתעלם במקום זאת מקובץ JavaScript שלם. התיקונים האלה פותרים גם בעיה שגרמה להרצה איטית של החלונית Sources באופן כללי.

הפעלה של ויסות רשת מתפריט הפקודות

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

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

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

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

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

ממשק המשתמש של ההשלמה האוטומטית

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

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

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

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

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

אירועים של AudioContext בחלונית Event Listener Breakpoints (נקודות עצירה של event listener).

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

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

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

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

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

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

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

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

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

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

כלי DevTools מתייג אוטומטית את המדידות של תזמון המשתמשים בקטע תזמון המשתמשים בהקלטות של הביצועים.

הקטע User Timing (תזמון משתמש).

איור 10. הקטע User Timing

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

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

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

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

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

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

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