כלי פיתוח ל-Chrome – יצירת פרופילים של מעבד (CPU) ב-JavaScript ב-Chrome 58

ב-Chrome 58, שהוא כרגע Canary, השם של חלונית ציר הזמן השתנה לחלונית Performance (ביצועים), השם של חלונית הפרופילים שונה לחלונית הזיכרון והתכונה Record JavaScript CPU Profile בחלונית פרופילים הועברה למיקום מוסתר יותר.

היעד לטווח הארוך הוא להסיר את הכלי הישן של הכלי לניתוח ביצועי המעבד (CPU) ב-JavaScript, ולגרום לכולם לעבוד עם תהליך העבודה החדש.

במדריך ההעברה הקטן הזה מוסבר איך לתעד פרופיל JS בחלונית הביצועים, ואיך ממשק המשתמש של חלונית הביצועים ממופה לתהליך העבודה הישן שאתם רגילים אליו.

גישה לכלי לניתוח ביצועי המעבד (CPU) הישן של JavaScript

אם אתם מעדיפים את תהליך העבודה הישן "Record JavaScript CPU Profile" שהיה זמין בחלונית "פרופילים", עדיין אפשר לגשת אליו כך:

  1. פותחים את התפריט הראשי של כלי הפיתוח.
  2. בוחרים באפשרות כלים נוספים > JavaScript Profiler. הכלי הישן ליצירת פרופילים נפתח בחלונית חדשה שנקראת JavaScript Profiler.

איך להקליט פרופיל JS

  1. פותחים את כלי הפיתוח.
  2. לוחצים על הכרטיסייה ביצועים.

    חלונית הביצועים של כלי הפיתוח ל-Chrome.
    איור 1. בחלונית 'ביצועים'.

  3. מקליטים באחת מהדרכים הבאות:

    • כדי ליצור פרופיל לטעינת דף, לוחצים על הקלטת טעינת דף. כלי הפיתוח מתחילים את ההקלטה באופן אוטומטי ומפסיקים אוטומטית כשהם מזהים שהדף הסתיים.
    • כדי ליצור פרופיל לדף פועל, לוחצים על Record (הקלטה), מבצעים את הפעולות שרוצים ליצור פרופיל ולוחצים על Stop כשמסיימים.

איך תהליך העבודה הישן ממופה אל החדש

מתצוגת Chart של תהליך העבודה הישן, צילום המסך שלמטה מראה את המיקום של התרשים 'סקירה כללית על השימוש במעבד' (החץ העליון) ושל תרשים הלהבות (חץ תחתון) בתהליך העבודה החדש.

תמפו בין תרשים הלהבות בתהליך העבודה הישן ובתהליך העבודה החדש.
איור 2. מיפוי בין תרשים להבה בתהליך העבודה הישן (בצד שמאל) לבין תהליך העבודה החדש (בצד ימין).

התצוגה גבוהה (למטה) זמינה בכרטיסייה למטה:

תמפו בין התצוגה 'למטה' בתהליך העבודה הישן לבין תהליך העבודה החדש.
איור 3. מיפוי בין התצוגה 'מלמטה למעלה' בתהליך העבודה הישן (בצד שמאל) לבין תהליך העבודה החדש (בצד ימין).

התצוגה עץ (למעלה למטה) זמינה בכרטיסייה עץ השיחות:

מיפוי בין תצוגת עץ בתהליך העבודה הישן בתהליך העבודה החדש.
איור 4. מיפוי בין תצוגת העץ בתהליך העבודה הישן (בצד שמאל) לבין תהליך העבודה החדש (בצד ימין).

שולחים הודעה ל-@ChromeDevTools ב-Twitter או פותחים בעיה ב-GitHub במאגר המסמכים שלנו אם פספסנו תכונות, או אם יש לכם שאלות נוספות לגבי המאמר הזה.