מהפכים של כלי הפיתוח ל-Chrome 2013

Arthur Evans

Tim Statler

מבוא

ככל שהמורכבות והפונקציונליות של אפליקציות אינטרנט גדלו, כך גם כלי הפיתוח של Chrome. בסיכום הזה של ההרצאה של פול אירי (Paul Irish) ב-Google I/O 2013, Chrome DevTools Revolutions 2013, נסקור את התכונות העדכניות ביותר שמחוללות מהפכה באופן שבו יוצרים ובודקים אפליקציות אינטרנט.

אם פספסתם את ההרצאה של פול, אתם יכולים לצפות בה למעלה (קדימה, אנחנו נמתין) או לדלג ישירות לסיכום התכונות:

• ב-Workspaces אפשר להשתמש ב-DevTools כעורך של קוד המקור.
• אם אתם משתמשים ב-Sass, תוכלו ליהנות מהיכולת לערוך קבצי Sass (‎.scss) בזמן אמת ב-DevTools ולראות את השינויים משתקפים בדף באופן מיידי.
• כבר הרבה זמן אפשר לנפות באגים בדפים ב-Chrome ל-Android מרחוק, אבל התוסף של ADB מאפשר לחבר מכשירי Android בצורה פשוטה יותר. העברה ליציאה הפוכה מאפשרת לכם להתחבר בקלות ל-localhost במכונה לפיתוח מהמכשיר שלכם.
• ביצועים הם תמיד נושא חשוב באפליקציות אינטרנט, ו-DevTools כולל כמה תכונות חדשות שיעזרו לכם לאתר צווארי בקבוק, כולל התצוגה החזותית החדשה של תרשים הלהבה לפרופיל של מעבדים וכמה כלים חדשים לניפוי באגים של בעיות בביצועים שקשורות לעיבוד וירטואלי ולשימוש בזיכרון.

התכונות האלה זמינות בגרסה 28 של Chrome, שזמינה עכשיו בערוץ העדכונים היציב.

סביבות עבודה

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

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

לחיצה על Control+S או על Command+S שומרת את השינויים בדיסק.

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

• שינויים ב-DOM בחלונית Elements לא נשמרים. רק שינויי סגנון בחלונית Elements נשארים.
• אפשר לשנות רק סגנונות שהוגדרו בקובץ CSS חיצוני. שינויים ב-element.style או בסגנונות בתוך השורה לא נשמרים בדיסק. אם יש לכם סגנונות מוטמעים, תוכלו לשנות אותם בחלונית 'מקורות'.
• שינויים בסגנון בחלונית Elements נשמרים באופן מיידי. אין צורך ללחוץ על Control+S או על Command+S.

הוספת תיקייה לסביבת העבודה

יש שני חלקים לשימוש במרחבי עבודה: הפיכת התוכן של תיקייה מקומית לזמין ל-DevTools, ומיפוי התיקייה הזו לכתובת URL.

כדי להוסיף תיקייה חדשה לסביבת העבודה:

1. ב-DevTools, לוחצים על הגדרות כדי לפתוח את ההגדרות של DevTools.
2. לוחצים על Workspace.
3. לוחצים על הוספת תיקייה.
4. עוברים לתיקייה שמכילה את קובצי המקור של הפרויקט ולוחצים על בחירה.
5. כשמופיעה בקשה, לוחצים על אישור כדי לתת ל-DevTools גישה מלאה לתיקייה.

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

מיפוי תיקייה לכתובת URL

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

כדי למפות תיקייה בסביבת העבודה לכתובת URL:

1. בחלונית 'מקורות', לוחצים לחיצה ימנית או מקישים על Ctrl+קליק על קובץ בתיקייה של סביבת העבודה.
2. בוחרים באפשרות מיפוי למשאב רשת.

   

3. בוחרים את משאב הרשת התואם מהדף הנטען כרגע.

   

4. טוענים מחדש את הדף ב-Chrome.

עכשיו בחלונית Sources (מקורות) אמורים להופיע רק התכנים של תיקיית סביבת העבודה המקומית של האתר, ולא מקורות ה-localhost, כפי שמוצג בהמשך.

הערה: אם מקורות ה-localhost עדיין מופיעים, מרעננים את הדף ב-Chrome.

יש עוד שתי דרכים לקשר תיקיית רשת לתיקייה בסביבת העבודה:

• לוחצים לחיצה ימנית (או מקישים על Ctrl+קליק) על משאב רשת ובוחרים באפשרות מיפוי למשאב של מערכת קבצים.
• מוסיפים את המיפויים באופן ידני בכרטיסייה Workspace בתיבת הדו-שיח של הגדרות DevTools.

ניפוי באגים של מפות מקור של Sass/CSS

ניפוי באגים של Sass (מפת מקור של CSS) מאפשר לערוך קבצי Sass‏ (‎.scss) בזמן אמת בחלונית Sources (מקורות) ולראות את התוצאות בלי לצאת מ-DevTools או לרענן את הדף. כשבודקים רכיב שהסגנונות שלו מסופקים על ידי קובץ CSS שנוצר באמצעות Sass, בחלונית Elements מוצג קישור לקובץ ה-‎ .scss ולא לקובץ ה-‎ .css שנוצר.

לחיצה על הקישור תפתח את קובץ ה-SCSS (שאפשר לערוך אותו) בחלונית המקורות. אפשר לבצע בקובץ הזה את כל השינויים שרוצים.

כששומרים שינויים בקובץ SCSS (ב-DevTools או במקום אחר), המהדר של Sass יוצר מחדש את קובצי ה-CSS. לאחר מכן, DevTools יטען מחדש את קובץ ה-CSS החדש שנוצר.

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

שימוש בניפוי באגים של Sass

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

gem install sass -v '>=3.3.0alpha' --pre

בנוסף, צריך להפעיל את התכונה לניפוי באגים של Sass בניסויים של כלי הפיתוח:

1. פותחים את הדף about:flags ב-Chrome.
2. מפעילים את האפשרות הפעלת ניסויים בכלים למפתחים.
3. מפעילים מחדש את Chrome.
4. פותחים את ההגדרות של DevTools ולוחצים על ניסויים.
5. מפעילים את התמיכה ב-Sass (או את ניפוי הבאגים של סגנונות ה-Sass, בהתאם לגרסה של הדפדפן שבו אתם משתמשים).

אחרי שמתקינים את Sass, מפעילים את המהדר של Sass כדי לבדוק אם יש שינויים בקובצי המקור של Sass וליצור קובצי מפות מקור לכל קובץ CSS שנוצר, לדוגמה:

sass --watch **--sourcemap** sass/styles.scss:styles.css

אם אתם משתמשים ב-Compass, חשוב לדעת ש-Compass עדיין לא תומך בגרסה של Sass שעדיין לא יצאה לאור, ולכן אי אפשר להשתמש בניפוי באגים של Sass באמצעות Compass.

איך זה עובד

לכל קובץ מקור של SCSS שהוא מעבד, המהדר של Sass יוצר קובץ מפת מקור (קובץ ‎.map) בנוסף ל-CSS המהדר. קובץ מפת המקור הוא קובץ JSON שמגדיר את המיפויים בין קובץ ה-‎ .scss לבין קובצי ה-‎ .css. כל קובץ CSS מכיל הערה שמציינת את כתובת ה-URL של קובץ מפת המקור שלו, שמוטמעת בתגובה מיוחדת:

/*# sourceMappingURL=<url>; */

לדוגמה, בהתאם לקובץ SCSS הבא:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass יוצר קובץ CSS כזה, עם ההערה sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

בהמשך מופיעה דוגמה לקובץ של מפת מקור:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

ניפוי באגים מרחוק קל יותר ב-Chrome ל-Android

יש כמה תכונות חדשות בכלי הפיתוח שבעזרתן קל יותר להגדיר ניפוי באגים מרחוק ב-Chrome ל-Android: תוסף ADB והעברת יציאות הפוכה.

התוסף של ADB ל-Chrome מפשט את תהליך ההגדרה של ניפוי באגים מרחוק. היתרונות של השימוש ב-Cloud CDN:

• ה-bundle כולל את Android Debug Bridge‏ (ADB), כך שאין צורך להתקין אותו.
• אין צורך באינטראקציה עם שורת הפקודה.
• ממשק משתמש להפעלה ולעצירה של הדימון ADB ולצפייה במכשירים המחוברים בקלות.

העברה חוזרת של יציאות מאפשרת לחבר בקלות את Chrome ב-Android לשרת אינטרנט שפועל ב-localhost. סביבות רשת מסוימות מקשות על כך, בלי כמה טריקים של DNS.

שימוש בתוסף ADB

קודם כול, מתקינים את תוסף Chrome של ADB מחנות האינטרנט של Chrome. לוחצים על הוספה ל-Chrome כדי להתקין את התוסף.

הערה: אי אפשר להתקין תוספים מחנות האינטרנט של Chrome ב-Windows 8. אם תיתקלו בבעיות בהתקנה מחנות האינטרנט של Chrome, תוכלו לעיין במאמר ניפוי באגים מרחוק ב-Android כדי לקבל הוראות התקנה חלופיות.

בסיום ההתקנה, יופיע ב-Chrome סמל תפריט אפרסה של Android. כדי להפעיל את ADB, לוחצים על הסמל ואז על Start ADB.

אחרי ש-ADB מתחיל לפעול, סמל התפריט הופך לירוק ומוצג בו מספר המכשירים שמחוברים כרגע, אם יש כאלה.

לוחצים על הצגת המכשירים כדי לפתוח את הדף about:inspect שבו מוצגים כל המכשירים המחוברים והכרטיסיות שלהם. כדי לבדוק כרטיסייה בכלי הפיתוח, לוחצים על הקישור 'בדיקה' לצד כתובת ה-URL שלה.

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

העברה ליציאה אחרת (ניסיונית)

בדרך כלל, יש לכם שרת אינטרנט שפועל במכונה המקומית לפיתוח, ואתם רוצים להתחבר לאתר הזה מהמכשיר שלכם. אם מכונת הפיתוח והמכשיר מחוברים לאותה רשת, זה פשוט. אבל במקרים מסוימים, כמו ברשתות ארגוניות מוגבלות, יכול להיות שאי אפשר יהיה לעשות זאת בלי כמה טריקים חכמים של DNS. אפשר לעשות זאת בקלות באמצעות תכונה חדשה ב-Chrome ל-Android שנקראת העברה ליציאה אחרת (reverse port forwarding). התכונה הזו יוצרת יציאת TCP להאזנה במכשיר, שמעבירה את התנועה דרך USB ליציאת TCP מסוימת במכונה לפיתוח.

כדי להשתמש בתכונה הזו, צריך:

• Chrome 28 ואילך מותקן במכונה לפיתוח
• גרסת הבטא של Chrome ל-Android מותקנת במכשיר
• Android Debug Bridge (התוסף של ADB ל-Chrome או Android SDK מלא) מותקן במכונה לצורכי פיתוח

כדי להשתמש בהעברה ליציאה אחרת (reverse port forwarding), המכשיר צריך להיות מחובר לצורך ניפוי באגים מרחוק, כפי שמתואר במאמר 'שימוש בתוסף ADB'. לאחר מכן צריך להפעיל העברה ליציאה אחרת (reverse port forwarding) ולהוסיף כלל העברה ליציאה אחרת לאפליקציה.

קודם כול, מפעילים העברה ליציאה אחרת (reverse port forwarding):

1. פותחים את Chrome במכונה לפתחים.
2. בדף about:flags, מפעילים את האפשרות Enable Developer Tools experiments ומפעילים מחדש את Chrome.
3. פותחים את הדף about:inspect. המכשיר הנייד שלכם אמור להופיע עם רשימה של הכרטיסיות הפתוחות בו.
4. לוחצים על הקישור 'בדיקה' לצד אחד מהאתרים שמפורטים.
5. בחלון DevTools שנפתח, פותחים את חלונית ההגדרות.
6. בקטע 'ניסויים', מפעילים את האפשרות הפעלת העברה חוזרת של יציאות.
7. סוגרים את חלון כלי הפיתוח וחוזרים לכתובת about:inspect.

לאחר מכן מוסיפים כלל העברה ליציאה אחרת:

1. לוחצים שוב על הקישור 'בדיקה' כדי לפתוח את כלי הפיתוח, ופותחים שוב את ההגדרות של כלי הפיתוח.
2. לוחצים על הכרטיסייה Port Forwarding.
3. בשדה Device port (יציאת המכשיר), מזינים את מספר היציאה שאליה Chrome אמור להתחבר במכשיר Android (ברירת המחדל היא 8080).
4. בשדה Target, מוסיפים את מספר היציאה שבו אפליקציית האינטרנט פועלת במחשב הפיתוח.

   

5. ב-Chrome ל-Android, פותחים את localhost:, כאשר הוא הערך שהזנתם בשדה Device port (ברירת המחדל היא 8080).

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

תצוגה חזותית של תרשים להבות (flame chart) לפרופילים של JavaScript

בתצוגה החדשה של תרשים הלהבה מוצג ייצוג חזותי של עיבוד JavaScript לאורך זמן, בדומה לתצוגות שבחלוניות 'ציר הזמן' ו'רשת'.

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

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

• Name – שם הפונקציה.
• Self time – משך הזמן שלקח להשלים את ההפעלה הנוכחית של הפונקציה, כולל רק את ההצהרות בפונקציה עצמה, לא כולל פונקציות שהיא הפעילה.
• זמן כולל – הזמן שנדרש כדי להשלים את ההפעלה הנוכחית של הפונקציה הזו ואת כל הפונקציות שהיא הפעילה.
• זמן עצמי מצטבר – הזמן המצטבר של כל ההפעלות של הפונקציה במהלך ההקלטה, לא כולל פונקציות שהפונקציה הזו מפעילה.
• משך זמן כולל מצטבר – משך הזמן הכולל המצטבר של כל ההפעלות של הפונקציה, כולל פונקציות שהפונקציה הזו הפעילה.

לחיצה על בלוק פונקציה פותחת את קובץ ה-JavaScript שמכיל אותו בחלונית המקורות, בשורה שבה מוגדרת הפונקציה.

כדי להשתמש בתרשים הלהבות:

1. בכלי הפיתוח, לוחצים על הכרטיסייה Profiles.
2. בוחרים באפשרות הקלטת פרופיל יחידת העיבוד המרכזית (CPU) ב-JavaScript ולוחצים על התחלה.
3. כשמסיימים לאסוף נתונים, לוחצים על Stop.
4. בתצוגת הפרופיל, בוחרים בתצוגה החזותית תרשים אש.

   

חמש תכונות מרכזיות למדידת ביצועים

לסיום הסקר על השיפורים המהפכניים בכלי הפיתוח, צירפנו כמה תכונות חדשות לבדיקה של בעיות בביצועים:

• מצב ציור רציף
• הצגת מלבנים של כלי הצביעה וגבולות של שכבות
• מד FPS
• איתור פריסות סינכרוניות מאולצות (layout thrashing)
• מעקב אחר הקצאת אובייקטים

מצב ציור רציף

מצב צביעה רציף הוא אפשרות בהגדרות של כלי הפיתוח (עיבוד > הפעלת צביעה מחדש רציפה של דפים) שבעזרתו אפשר לזהות את עלות העיבוד של רכיבים ספציפיים או סגנונות CSS.

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

היתרון של השימוש באפשרות הזו הוא שאפשר לעבור על עץ ה-DOM בחלונית 'רכיבים' ולהסתיר רכיבים ספציפיים (מקישים על המקש H כדי להסתיר את הרכיב שנבחר כרגע), או להשבית את סגנונות ה-CSS של רכיב. כדי לראות כמה זמן רכיב או סגנון מסוימים מוסיפים ל'משקל' של הדף ברינדור, אם בכלל, אפשר לשים לב לשינויים בזמן הצביעה של הדף. אם הסתרת רכיב יחיד מקצרת משמעותית את זמני הצביעה, כדאי להתמקד בסגנון או בבנייה של הרכיב הזה.

כדי להפעיל את מצב הציור הרציף:

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

הערה: אם האפשרות הזו לא מופיעה בהגדרות, פותחים את about:flags, מפעילים את האפשרות GPU compositing on all pages ומפעילים מחדש את Chrome.

מידע נוסף זמין במאמר יצירת פרופיל של זמני צביעה ארוכים באמצעות מצב צביעה רציף של DevTools.

הצגת מלבנים של הדגשה לצורך הצגת תוכן וגבולות של שכבות

אפשרות נוספת ב-DevTools היא להציג אילו אזורים מלבניים במסך עוברים צביעה. (הגדרות > רינדור > הצגת מלבנים של צבע). לדוגמה, בצילום המסך הבא מרובע צביעה מצויר מעל האזור שבו הוחל אפקט CSS להעברת העכבר על הגרפיקה הסגולה. זה טוב, כי זהו חלק קטן יחסית מהמסך.

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

מד FPS

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

כדי להציג את מד ה-FPS:

1. פותחים את ההגדרות של DevTools.
2. לוחצים על כללי.
3. בקטע רינדור, מפעילים את האפשרויות איך מפעילים עיבוד תמונה משופר והצגת מד FPS.

כדי לאלץ את מד ה-FPS להופיע תמיד, פותחים את הדף about:flags, מפעילים את האפשרות מספר FPS ומפעילים מחדש את Chrome.

איתור פריסות סינכרוניות מאולצות (layout thrashing)

כדי למקסם את ביצועי העיבוד, בדרך כלל Chrome מקבצת שינויים בפריסה שהאפליקציה מבקשת ומתזמנת סבב פריסה כדי לחשב את השינויים המבוקשים ולעבד אותם באופן אסינכררוני. עם זאת, אם אפליקציה מבקשת את הערך של מאפיין שמבוסס על פריסה (כמו offsetHeight או offsetWidth), Chrome נאלץ לבצע באופן מיידי וסינכררוני פריסה של הדף. פריסות סינכרוניות מאולצות כאלה יכולות להפחית באופן משמעותי את ביצועי הרינדור, במיוחד כשהן מתבצעות שוב ושוב בעצים גדולים של DOM. התרחיש הזה נקרא גם 'טראשינג של פריסה'.

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

בחלון הקופץ הזה מוצגים גם מספר הצמתים שדרושה להם פריסה, גודל העץ של הפריסה מחדש, היקף הפריסה והשורש של הפריסה.

מידע נוסף זמין בהדגמה של ציר הזמן: אבחון פריסות סינכרוניות מאולצות.

מעקב אחר הקצאת אובייקטים

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

כדי לעקוב אחרי הקצאות של אובייקטים:

1. בכלי הפיתוח, לוחצים על הכרטיסייה Profiles.
2. בוחרים באפשרות Record heap allocations ולוחצים על Start.
3. כשמסיימים לאסוף נתונים, לוחצים על Stop recording heap profile (העיגול האדום בפינה הימנית התחתונה של חלונית הפרופיל).

פרופיילינג של קנבס (ניסיוני)

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

כדי להשתמש בפרופיל לקנבס:

1. מפעילים את התכונה בדיקת לוח הציור בכרטיסייה ניסויים בהגדרות של כלי הפיתוח. (אם הכרטיסייה הזו לא מופיעה, פותחים את about:flags, מפעילים את האפשרות Enable Developer Tools experiments ומפעילים מחדש את Chrome).
2. לוחצים על הכרטיסייה פרופילים.
3. בוחרים באפשרות צילום מסגרת קנבס ולוחצים על צילום תמונת מצב.
4. עכשיו אפשר לבדוק את הקריאות ששימשו ליצירת מסגרת ההדפסה על קנבס.