מבוא
לא משנה אם אתם משתמשים בהקשר 2D או ב-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 ומפעילים את האפשרות 'הפעלת ניסויים בכלים למפתחים'.
לאחר מכן, עוברים אל DevTools ומקישים על גלגל השיניים 
בפינה השמאלית התחתונה. משם אפשר לעבור אל ניסויים ולהפעיל את בדיקת הקנבס:
כדי שהשינויים ייכנסו לתוקף, צריך לסגור את כלי הפיתוח ולפתוח אותו מחדש (אפשר להשתמש בקיצור הדרך Alt+R או Option+R, חלופה נוחה).
כשכלי הפיתוח ייפתח מחדש, עוברים לקטע Profiles (פרופילים) ותופיע האפשרות החדשה 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.