מבוא
לא משנה אם אתם משתמשים בהקשר של דו-ממד או 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 יש תכונה חדשה של 'בדיקת לוח הציור' שמאפשרת לנו לעשות את זה!
במאמר הזה אראה לכם איך להשתמש בתכונה הזו כדי להתחיל ניפוי באגים בעבודה על קנבס. כלי הבדיקה תומך גם בהקשרים של דו-ממד וגם בהקשרים של WebGL, כך שלא משנה באיזה מהם אתם משתמשים, תוכלו לקבל מידע שימושי על ניפוי הבאגים באופן מיידי.
תחילת העבודה
כדי להתחיל, עוברים אל about:flags ב-Chrome ומפעילים את האפשרות הפעלת ניסויים בכלים למפתחים
בשלב הבא, עוברים ל'כלי פיתוח' ולוחצים על סמל גלגל השיניים 
בפינה השמאלית התחתונה. משם אפשר לעבור אל ניסויים ולהפעיל את האפשרות בדיקת לוח הציור:
כדי שהשינויים ייכנסו לתוקף, צריך לסגור ולפתוח מחדש את כלי הפיתוח (אפשר להשתמש ב-Alt+R או ב-Option+R, חלופה שימושית).
כשכלי הפיתוח ייפתחו מחדש, עוברים לקטע 'פרופילים' ותוצג לכם אפשרות חדשה:
קודם כול תבחינו שהכלי לניתוח ביצועי קנבס מושבת. אחרי שיוצרים דף שמכיל קנבס שרוצים לנפות בו באגים, לוחצים על Enable (הפעלה) והדף נטען מחדש כדי לקלוט את הקריאות של <canvas>:
תצטרכו להחליט אם לצלם פריים יחיד, או פריימים עוקבים, שבהם פריים זהה בדיוק למה שמופיע בציר הזמן של כלי הפיתוח.
פריים יחיד: קבלת הקריאות עד שהפריים יסתיים, ואז תיפסק. מצד שני, פריימים רצופים מתעדים את כל הפריימים של כל רכיבי <canvas> עד שהורים אומרים לעצור. המצב שבוחרים תלוי באופן השימוש ברכיב <canvas>. אם מדובר באנימציה מתמשכת, כדאי לצלם פריים אחד. אם מדובר באנימציה קצרה שמתרחשת בתגובה לאירוע של משתמש, יכול להיות שתצטרכו לצלם פריימים ברצף.
זהו, אנחנו מוכנים להתחיל לצלם!
לכידת פריימים
כדי לצלם את הסרטון, לוחצים על Start ואז מבצעים אינטראקציה עם האפליקציה כרגיל. אחרי זמן מה, חוזרים לכלי הפיתוח. אם מצלמים ברצף, לוחצים על עצירה.
עכשיו יש לך פרופיל חדש ונוצץ ברשימה שמימין, שכולל את מספר קריאות ההקשר שתועדו בכל רכיבי <canvas>. לחץ על הפרופיל ותראה מסך שנראה כך:
בחלונית התחתונה תוצג רשימה של כל הפריימים שצולמו ושאפשר לעבור דרכם. בלחיצה על כל אחת מהן, צילום המסך שבחלק העליון יציג את המצב של האלמנט <canvas> בסוף המסגרת. אם יש כמה רכיבי <canvas>, אפשר לבחור איזה מהם יוצג באמצעות התפריט שמתחת לצילום המסך.
בתוך המסגרת יופיעו קבוצות של שיחות. כל קבוצת שיחות של ציור מכילה קריאה אחת לציור, שתהיה הקריאה האחרונה בקבוצה. אז מהי קריאת ציור? בהקשר דו-ממדי כמו clearRect(), drawImage(), fill(), stroke(), putImageData() או כל פונקציית עיבוד טקסט אחרת, וב-WebGL היעד יהיה clear(), drawArrays() או drawElements(). זה בעצם כל דבר שישנה את התוכן של מאגר הנתונים הזמני של שרטוט. (אם אתם לא מתמצאים בגרפיקה, אפשר לחשוב על מאגר נתונים זמני כמפת סיביות עם פיקסלים שאנחנו משנים).
עכשיו כל מה שצריך לעשות הוא לעבור דרך הרשימה. אפשר לעשות זאת במסגרת, לצייר קבוצת שיחות או ברמת השיחה. לא משנה באיזו דרך תבחרו לעבור על הרשימה (ויש לחצנים שמופיעים מתחת לצילום המסך שיעזרו לכם לנווט במהירות) יוצג לכם ההקשר בנקודה הזו. כך תוכלו למצוא ולתקן באגים במהירות כשהם יצוינו.
מזהים את ההבדלים
תכונה שימושית נוספת היא היכולת לראות אילו מאפיינים ומשתנים השתנו בין שתי קריאות.
כדי לראות שפשוט לוחצים על הלחצן של סרגל הצד (
) ומופיעה תצוגה חדשה. כאשר מתקדמים בקריאות המשיכה תראו את הנכסים שעודכנו. כל אגירת נתונים או מערכים יציגו את התוכן שלהם אם תעבירו את העכבר מעליהם.
חשוב לשמוע!
עכשיו אתם יודעים איך לנפות באגים בעבודה על קנבס באמצעות כלי הפיתוח של Chrome. אם יש לכם משוב לגבי הכלי ליצירת פרופיל קנבס, אתם יכולים לדווח על באג או לפרסם פוסט בקבוצה Chrome DevTools Group. אם מצאתם באגים או אם יש משהו נוסף שהייתם רוצים לראות במהלך בדיקת ה-<canvas>, חשוב לנו לדעת על כך שהכלים של Chrome משתפרים רק באמצעות השימוש של המפתח והמשוב.