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

Kayce Basques

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

התכונות החדשות והשינויים העיקריים בכלי הפיתוח ב-Chrome 70 כוללים:

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• אתם מוזמנים לשלוח לנו משוב ובקשות להוספת תכונות בכתובת crbug.com.
• אפשר לדווח על בעיה בכלי פיתוח באמצעות הסמל more_vert אפשרויות נוספות > עזרה > דיווח על בעיה בכלי פיתוח בכלי הפיתוח.
• שולחים ציוץ אל ‎@ChromeDevTools.
• אפשר להוסיף תגובות לסרטונים What's new in DevTools YouTube videos או DevTools Tips YouTube videos.

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

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