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

ארתור אוונס
Twitter GitHub
טים סטאטלר
Twitter

מבוא

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

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

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

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

סביבות עבודה

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

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

החלונית 'מקורות'.

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

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

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

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

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

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

  1. בכלי הפיתוח, לוחצים על Settings (הגדרות) סמל ההגדרות כדי לפתוח את ההגדרות של כלי הפיתוח.
  2. לוחצים על סביבת עבודה.
  3. לוחצים על הוספת תיקייה.
  4. עוברים אל התיקייה שמכילה את קובצי המקור של הפרויקט ולוחצים על Select.
  5. כשמופיעה בקשה, לוחצים על אישור כדי להעניק לכלי הפיתוח גישה מלאה לתיקייה.

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

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

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

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

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

  1. בחלונית 'מקורות', לוחצים לחיצה ימנית או לוחצים על Control+לחיצה על קובץ בתיקיית סביבת העבודה.
  2. בוחרים באפשרות מיפוי למשאבי רשת.
    תפריט הקשר שמציג את האפשרות 'מפה למשאבי רשת'
  3. בוחרים את משאב הרשת המתאים מהדף שנטען כרגע.
    תיבת דו-שיח לבחירת משאב.
  4. טוענים מחדש את הדף ב-Chrome.

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

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

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

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

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

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

חלונית הרכיבים מציגה גיליון סגנונות של .scss

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

שלנו בחלונית שלנו שבה מוצג קובץ .scss

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

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

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

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

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

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

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

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

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

איך זה עובד

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

/*# 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

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

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

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

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

שימוש בתוסף ADB

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

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

תפריט התוספים של ADB.

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

תפריט התוסף של ADB שמוצגים בו מכשירים מחוברים.

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

דף &#39;מידע על:בדיקת&#39; שמציג קישורים לכרטיסיות במכשיר

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

העברה הפוכה ליציאה (ניסיוני)

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

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

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

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

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

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

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

  1. לוחצים שוב על הקישור 'בדיקה' כדי לפתוח את כלי הפיתוח ולפתוח שוב את ההגדרות של כלי הפיתוח.
  2. לוחצים על הכרטיסייה העברה ליציאה אחרת.
  3. בשדה יציאת מכשיר, מזינים את מספר היציאה ש-Chrome צריך להתחבר אליה במכשיר Android (ברירת המחדל היא 8080).
  4. בשדה Target (יעד), מוסיפים את מספר היציאה שבה פועלת אפליקציית האינטרנט במחשב הפיתוח.
    הכרטיסייה &#39;העברה ליציאה אחרת&#39; בהגדרות של כלי הפיתוח
  5. ב-Chrome ל-Android, פותחים את localhost:, כאשר הוא הערך שהזנת בשדה יציאת מכשיר (ברירת המחדל היא 8080).

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

הצגה חזותית של תרשים אש לפרופילים ב-JavaScript

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

תרשים להבה.

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

בוצעה הגדלה של תרשים הלהבות.

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

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

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

הגדרת הפונקציה בחלונית &#39;מקורות&#39;.

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

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

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

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

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

מצב ציור רציף

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

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

תצוגת &#39;שימו לב&#39; של תזמון הצבע.

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

כדי להפעיל מצב כאב מתמשך:

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

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

הצגה של מלבני צבע וגבולות של שכבות

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

אתר אינטרנט שמציג מלבן צבע.

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

אתר שמציג צביעה מחדש במסך מלא.

מד FPS

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

מד FPS

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

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

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

חיפוש פריסות סינכרוניות מאולצות (פריסה של thrashing)

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

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

חלון קופץ לפריסה סינכרונית מאולצת בתצוגת ציר הזמן.

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

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

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

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

תצוגת פרופיל של הקצאת ערימה (heap allocation)

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

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

יצירת פרופיל בד ציור (ניסיוני)

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

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

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