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

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

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

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

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

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

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

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

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

    חלונית הביצועים של כלי הפיתוח ל-Chrome

    איור 1. החלונית 'ביצועים'.

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

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

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

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

תמפו בין תרשים הלהבות בתהליך העבודה הישן ובתהליך העבודה החדש.

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

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

תמפו בין התצוגה 'למטה' בתהליך העבודה הישן לבין תהליך העבודה החדש.

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

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

מיפוי בין תצוגת עץ בתהליך העבודה הישן בתהליך העבודה החדש.

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