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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‫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;

כלי הפיתוח מתייגים אוטומטית את המדידות של תזמון המשתמשים בקטע User Timing (תזמון המשתמשים) בהקלטות של הביצועים.

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

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

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

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

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

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

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

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

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