בדיקת לוח הציור באמצעות כלי הפיתוח ל-Chrome

Paul Lewis

מבוא

לא משנה אם אתם משתמשים בהקשר של דו-ממד או WebGL, כל מי שעבד אי פעם עם הרכיב <canvas> יודע שיכול להיות קשה מאוד לנפות באגים. העבודה עם רכיב 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
}

לפעמים רוצים לתעד את ההוראות שנשלחות להקשר של רכיב canvas ולעבור עליהן אחת אחרי השנייה. למרבה המזל, יש תכונה חדשה לבדיקת רכיבי Canvas בכלים למפתחים ב-Chrome שמאפשרת לנו לעשות בדיוק את זה.

במאמר הזה אסביר איך להשתמש בתכונה הזו כדי להתחיל לנפות באגים בעבודה שלכם ב-Canvas. הכלי לבדיקה תומך גם בהקשרים של 2D וגם בהקשרים של WebGL, כך שלא משנה באיזה מהם אתם משתמשים, אתם אמורים לקבל מידע שימושי על תוצאות ניפוי הבאגים באופן מיידי.

תחילת העבודה

כדי להתחיל, עוברים אל about:flags ב-Chrome ומפעילים את האפשרות "הפעלת ניסויים בכלים למפתחים".

איור 1 – הפעלת ניסויים בכלי למפתחים ב-about:flags

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

איור 2 – הפעלת בדיקת Canvas בניסויים של כלי הפיתוח

כדי שהשינויים ייכנסו לתוקף, צריך לסגור ולפתוח מחדש את כלי הפיתוח (אפשר להשתמש ב-Alt+R או ב-Option+R, חלופה שימושית).

כשכלי הפיתוח ייפתחו מחדש, עוברים לקטע Profiles (פרופילים) ורואים אפשרות חדשה בשם Canvas Profiler (פרופילר של Canvas).

בהתחלה, תבחינו שהכלי Canvas Profiler מושבת. אחרי שפותחים דף שמכיל רכיב canvas שרוצים לנפות בו באגים, פשוט לוחצים על Enable (הפעלה) והדף נטען מחדש ומוכן לתעד את הקריאות ל-<canvas>:

איור 3 – הפעלת Canvas Profiler

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

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

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

איור 4 – בחירת מספר הפריימים לצילום

זהו, הכול מוכן ואפשר להתחיל לצלם.

צילום פריימים

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

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

איור 5 – פרופיל של רכיב canvas בכלי הפיתוח

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

איור 6 – בחירת ההקשר של ה-Canvas

בתוך המסגרת יופיעו קבוצות של בקשות להזזת פריט גרפי. כל קבוצת בקשות להזזת פריט גרפי מכילה בקשה אחת להזזת פריט גרפי, שהיא הקריאה האחרונה בקבוצה. אז מה זה draw call? בהקשר של דו-ממד, אלה יהיו דברים כמו clearRect(),‏ drawImage(),‏ fill(),‏ stroke(),‏ putImageData() או כל פונקציה של עיבוד טקסט, ובהקשר של WebGL, אלה יהיו clear(),‏ drawArrays() או drawElements(). בעצם כל דבר שישנה את התוכן של מאגר השרטוט הנוכחי. (אם אתם לא מתעניינים בגרפיקה, אתם יכולים לחשוב על מאגר נתונים זמני כמפת סיביות עם פיקסלים שאנחנו משנים).

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

איור 7 – לחצני ניווט למעבר נוח בין רשימות

מצא את ההבדלים

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

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

הקול שלך חשוב!

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