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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

    ביטוי חי שנשמר.

    איור 3. ביטוי שנשמר ב-Live Expression

הערכים של 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>9;, () = {
  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 של ההקלטות של הביצועים.

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

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

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

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

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

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

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

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

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

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