דף זה תורגם על ידי Cloud Translation API.

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

Kayce Basques

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

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

פקודות קוליות במסוף.
הדגשת צומתי DOM במהלך הערכה Eager
אופטימיזציות של חלונית הביצועים.
ניפוי באגים אמין יותר.
מפעילים ויסות רשת (throttling) מתפריט הפקודה.
השלמה אוטומטית של נקודות עצירה מותנות.
הפסקה של AudioContext אירועים.
ניפוי באגים באפליקציות של Node.js באמצעות ndb.
טיפ בונוס: בעזרת User Timing API אפשר למדוד אינטראקציות של משתמשים בעולם האמיתי.

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

ביטויים בשידור חי במסוף

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

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

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

איור 2. הקלדה של Date.now() בממשק המשתמש של Live Express
כדי לשמור את הביטוי, לוחצים מחוץ לממשק המשתמש של Live Express.

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

הערכים של Live Express מתעדכנים כל 250 אלפיות השנייה.

הדגשת צומתי DOM במהלך הערכה Eager

מקלידים ביטוי שמעריך את הצומת של DOM במסוף, ומעכשיו Eager Evaluation מדגיש את הצומת הזה באזור התצוגה.

הערה: הצומת המודגש מתעדכן רק כשמקלידים. היא לא מתעדכנת במרווחים. לדוגמה, אם מקלידים document.activeElement, שעוקב אחרי הרכיב בפוקוס ולאחר מכן על Tab עד שמגיעים לדף, כלי הפיתוח עדיין ידגיש את הצומת שהיה פעיל כשמקלידים את הביטוי במקור.

אחרי ההקלדה של document.activeElement במסוף, הצומת מודגש באזור התצוגה.

איור 4. מכיוון שהביטוי הנוכחי מקבל ערך של צומת, הצומת מודגש באזור התצוגה.

הנה כמה ביטויים שיכולים לעזור:

document.activeElement כדי להדגיש את הצומת שהמיקוד עליו הוא כרגע.
document.querySelector(s) להדגשת צומת שרירותי, שבו s הוא סלקטור ב-CSS. הפעולה הזו מקבילה להעברת העכבר מעל לצומת בעץ DOM.
$0 כדי להדגיש את הצומת שנבחר כרגע בעץ ה-DOM.
$0.parentElement כדי להדגיש את ההורה של הצומת שנבחר כרגע.

אופטימיזציה של חלונית הביצועים

במהלך יצירת פרופיל של דף גדול, נדרשו בעבר עשרות שניות לעיבוד ולהצגה של הנתונים בחלונית הביצועים. לפעמים, גם אם לוחצים על אירוע כלשהו כדי לקבל עליו מידע נוסף בכרטיסייה 'סיכום', הטעינה נמשכת כמה שניות. העיבוד וההצגה החזותיים מהירים יותר ב-Chrome 70.

איור 5. עיבוד וטעינה של נתוני ביצועים

ניפוי באגים אמין יותר

Chrome 70 מתקן כמה באגים שגרמו לנקודות עצירה (breakpoint) להיעלם או שלא הופעלו.

הוא גם מתקן באגים שקשורים למפות המקור. חלק ממשתמשי TypeScript מורים לכלי הפיתוח להתעלם מקובץ TypeScript מסוים במהלך מעבר על הקוד, ובמקום זאת, כלי הפיתוח יתעלמו מקובץ ה-JavaScript המלא בחבילה. התיקונים האלה גם מטפלים בבעיה שגורמת לחלונית 'מקורות' לפעול בדרך כלל לאט.

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

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

פקודות של ויסות נתונים ברשת בתפריט הפקודות.

איור 6. פקודות של ויסות נתונים ברשת בתפריט הפקודות

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

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

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

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

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

הפסקות באירועי AudioContext

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

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

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

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

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

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

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

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

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

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

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

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

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

הורדת הערוצים של התצוגה המקדימה

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

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

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

אפשר לשלוח לנו הצעה או משוב דרך crbug.com.
כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות > עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח.
שליחת ציוץ אל @ChromeDevTools.
נשמח לשמוע מה חדש בסרטונים ב-YouTube של כלי הפיתוח או בסרטונים ב-YouTube שקשורים לכלי פיתוח.