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

Kayce Basques

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

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

• ביטויים פעילים במסוף.
• הדגשת צמתי 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 באופן כללי.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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