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

לוחצים על Create Live Expression . ממשק המשתמש Live Expression ייפתח.

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

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

איור 3. Live Expressing שמור

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עכשיו אפשר להגדיר ויסות רשת (throttling) ל-3G מהיר או ל-3G איטי, דרך תפריט הפקודה.

פקודות של ויסות רשת (Network throttle) בתפריט הפקודות.

איור 6. פקודות של ויסות רשת (Network throttling) בתפריט הפקודות

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

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

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

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

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

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

תוכלו להשתמש בחלונית Event Listener Breakpoints להשהיה בשורה הראשונה של הגורם המטפל באירועים במחזור החיים של 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.

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

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

הקטע 'תזמון משתמש'.

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

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

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

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

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

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

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