מבוא
זה לא משנה אם משתמשים בהקשר דו-ממדי או ב-WebGL, כל מי שעבד אי פעם עם הרכיב <canvas> יודע שיכול להיות קשה מאוד לנפות באגים. עבודה עם קנבס בדרך כלל כוללת רשימה ארוכה של קריאות שקשה לעקוב אחריהן:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
לפעמים רוצים לתעד את ההוראות שנשלחות להקשר של לוח ציור ולעבור עליהן אחת אחרי השנייה. למרבה המזל, יש תכונה חדשה של בדיקת משטח ציור בכלים למפתחים של Chrome שמאפשרת לנו לעשות בדיוק את זה.
במאמר הזה אראה לכם איך להשתמש בתכונה הזו כדי להתחיל לנפות באגים בעבודה שלכם על קנבס. בכלי אפשר לבדוק גם הקשרים 2D וגם הקשרים WebGL, כך שלא משנה באיזה הקשר אתם משתמשים, תוכלו לקבל מידע שימושי על ניפוי באגים באופן מיידי.
תחילת העבודה
כדי להתחיל, עוברים אל about:flags ב-Chrome ומפעילים את האפשרות 'הפעלת ניסויים בכלים למפתחים'.
בשלב הבא, עוברים לכלי הפיתוח ולוחצים על גלגל השיניים 
בפינה השמאלית התחתונה. משם אפשר לעבור אל ניסויים ולהפעיל את בדיקה של לוח הציור:
כדי שהשינויים ייכנסו לתוקף, צריך לסגור ולפתוח מחדש את כלי הפיתוח (אפשר להשתמש ב-Alt+R או ב-Option+R, חלופה שימושית).
כשכלי פיתוח ייפתחו מחדש, תוכלו לעבור לקטע 'פרופילים' > אפשרות חדשה של Canvas Profiler.
בשלב הראשון, תבחינו שהכלי Canvas Profiler מושבת. אחרי שיוצרים דף שמכיל לוח קנבס שרוצים לנפות באגים בו, פשוט לוחצים על Enable (הפעלה) והדף נטען מחדש ומאפשר לתעד את הקריאות ל-<canvas>:
צריך להחליט אם רוצים לצלם פריים יחיד או פריים רצוף, כאשר הפריים זהה לחלוטין לזה שיוצג בציר הזמן של DevTools.
פריים יחיד מתעד את הקריאות עד לסוף הפריים הנוכחי, ואז מופסק. לעומת זאת, פריימים עוקבים מצלמים את כל הפריימים של כל רכיבי <canvas> עד שאתם מגדירים לו להפסיק. הבחירה במצב תלויה באופן שבו משתמשים ברכיב <canvas>. כדי ליצור אנימציה מתמשכת, כדאי לצלם פריים אחד. כדי ליצור אנימציה קצרה שמתרחשת בתגובה לאירוע של משתמש, יכול להיות שתצטרכו לצלם פריימים רצופים.
עכשיו הכול מוכן ואפשר להתחיל לצלם.
צילום פריימים
כדי לצלם, פשוט לוחצים על התחלה ולאחר מכן מבצעים פעולות באפליקציה כרגיל. אחרי זמן מה, חוזרים אל כלי הפיתוח. אם מבצעים הקלטה רציפה, לוחצים על עצירה.
עכשיו יש לכם פרופיל חדש ברשימה שבצד ימין, עם מספר הקריאות להקשר שתועדו בכל הרכיבים של <canvas>. לוחצים על הפרופיל ומוצג מסך שנראה בערך כך:
בחלונית התחתונה תופיע רשימה של כל הפריימים שאפשר לצלם. אחרי שתלחצו על כל אחד מהפריימים, צילום המסך שלמעלה יראה את המצב של הרכיב <canvas> בסוף הפריים. אם יש כמה רכיבי <canvas>, אפשר לבחור איזה מהם יוצג באמצעות התפריט שמתחת לצילום המסך.
בתוך המסגרת יופיעו קבוצות של שיחות מצוירות. כל קבוצת קריאות לציור מכילה קריאה אחת לציור, שתהיה הקריאה האחרונה בקבוצה. אז מהי קריאה לציור? בהקשר דו-מימדי, אלה יכולים להיות clearRect(), drawImage(), fill(), stroke(), putImageData() או כל פונקציית עיבוד טקסט, וב-WebGL אלה יכולים להיות clear(), drawArrays() או drawElements(). בעיקרון, כל דבר שיכול לשנות את התוכן הנוכחי של מאגר הציור. (אם אתם לא מתמצאים בגרפיקה, אפשר לחשוב על מאגר כקובץ BMP עם פיקסלים שאנחנו מבצעים בהם מניפולציה).
עכשיו כל מה שצריך לעשות הוא לעבור על הרשימה. אפשר לעשות זאת ברמת המסגרת, ברמת קבוצת השיחות או ברמת השיחה. בכל דרך שבה תבחרו לעבור ברשימה (יש לחצנים מתחת לצילום המסך שיעזרו לכם לנווט במהירות), תוכלו לראות את ההקשר באותו שלב. כך תוכלו למצוא ולתקן באגים במהירות כשהם מופיעים.
איך מזהים את ההבדלים
תכונה שימושית נוספת היא היכולת לראות אילו מאפיינים ומשתנים השתנו בין שתי קריאות.
כדי לראות שפשוט לוחצים על הלחצן של סרגל הצד (
), תיפתח תצוגה חדשה. כשתסיימו את תהליך המשיכה, תראו את המאפיינים שעודכנו. תוכלו לראות את התוכן של מאגרים או מערכי נתונים אם תעבירו את העכבר מעליהם.
תהיו שומעים!
עכשיו אתם יודעים איך לנפות באגים בקוד שלכם ללוח הציור באמצעות כלי הפיתוח של Chrome. אם יש לכם משוב על הכלי Canvas Profiler, אתם יכולים לדווח על באג או לפרסם פוסט בקבוצת Chrome DevTools. אם מצאתם באגים או אם יש לכם הצעות נוספות לתכונות שתרצו לראות בבדיקה של <canvas>, נשמח לשמוע מכם. רק באמצעות השימוש של המפתחים והמשוב שלהם אנחנו יכולים לשפר את הכלים של Chrome.