Wprowadzenie
Niezależnie od tego, czy używasz kontekstu 2D czy WebGL, każdy, kto pracował kiedykolwiek z elementem <canvas>, wie, że debugowanie może być bardzo trudne. Praca z płótnem zwykle wiąże się z długą i trudną do śledzenia listą wywołań:
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
}
Czasami możesz chcieć zapisać instrukcje wysłane do kontekstu kanwy i przejrzeć je po kolei. Na szczęście w Narzędziach deweloperskich w Chrome dostępna jest nowa funkcja inspekcji Canvas, która pozwala nam to robić.
Z tego artykułu dowiesz się, jak korzystać z tej funkcji, aby rozpocząć debugowanie obrazu. Inspekcja obsługuje zarówno konteksty 2D, jak i WebGL, więc niezależnie od tego, którego używasz, powinieneś od razu uzyskać przydatne informacje debugujące.
Pierwsze kroki
Aby rozpocząć, otwórz about:flags w Chrome i włącz opcję „Włącz eksperymenty w Narzędziach dla deweloperów”.
Następnie otwórz DevTools i kliknij koło zębate 
w prawym dolnym rogu. Następnie otwórz Eksperymenty i włącz Sprawdzanie kanwy:
Aby zmiany zaczęły obowiązywać, musisz zamknąć i ponownie otworzyć Narzędzia deweloperskie (są też opcją Alt+R lub Option+R).
Gdy ponownie otworzysz DevTools, przejdź do sekcji Profile, gdzie zobaczysz nową opcję Profiler kanwy.
Na początek zauważysz, że narzędzie Canvas Profiler jest wyłączone. Gdy masz już stronę zawierającą obszar roboczy, który chcesz debugować, naciśnij po prostu Włącz. Strona załaduje się ponownie, aby przechwycić wywołania <canvas>:
Musisz zdecydować, czy chcesz przechwycić pojedynczą klatkę, czy też kolejne klatki, przy czym każda z nich będzie taka sama jak ta, którą widzisz na osi czasu w DevTools.
Pojedyncza klatka przechwytuje wywołania do końca bieżącej klatki. Kolejne klatki natomiast rejestruje wszystkie klatki wszystkich elementów <canvas>, dopóki nie zdecydujesz się na zatrzymanie. Wybór trybu zależy od tego, jak używasz elementu <canvas>. W przypadku trwającej animacji możesz użyć pojedynczej klatki. W przypadku krótkiej animacji, która występuje w odpowiedzi na zdarzenie użytkownika, może być konieczne przechwycenie kolejnych klatek.
To wszystko. Możesz już zacząć nagrywać.
Przechwytywanie klatek
Aby przechwycić, wystarczy nacisnąć Start i korzystać z aplikacji w zwykły sposób. Po jakimś czasie wróć do Narzędzi deweloperskich i jeśli nagrywasz kolejno po kolei, naciśnij Stop.
Na liście po lewej stronie zobaczysz nowy profil, a wraz z nim liczba zarejestrowanych wywołań kontekstowych wszystkich elementów <canvas>. Kliknij profil, aby wyświetlić ekran podobny do tego:
W dolnym panelu zobaczysz listę wszystkich przechwyconych klatek, które możesz przejrzeć. Po kliknięciu każdej z nich zrzut ekranu u góry pokaże stan elementu <canvas> na końcu tej klatki. Jeśli masz kilka elementów <canvas>, możesz wybrać, który z nich ma być widoczny, w menu poniżej zrzutu ekranu.
W ramce widoczne są grupy wywołań funkcji rysowania. Każda grupa wywołań draw zawiera jedno wywołanie draw, które będzie ostatnim wywołaniem w grupie. Czym jest wywołanie do remisu? W kontekście 2D mogą to być funkcje takie jak clearRect(), drawImage(), fill(), stroke(), putImageData() lub dowolne funkcje renderowania tekstu, a w kontekście WebGL – clear(), drawArrays() lub drawElements(). Jest to w zasadzie wszystko, które zmienia zawartość bieżącego bufora rysunkowego. (Jeśli nie interesujesz się grafiką, możesz potraktować bufor jako bitmapę z pikselami, którymi się manipulowamy).
Teraz wystarczy, że sprawdzisz listę. Możesz to zrobić na poziomie ramki, wywołania rysunku lub wywołania. Niezależnie od tego, w jaki sposób przeglądasz listę (pod zrzutem ekranu znajdują się przyciski ułatwiające szybkie poruszanie się po niej), w danym momencie zobaczysz kontekst, co oznacza, że możesz szybko znajdować i naprawiać błędy w miarę ich pojawiania się.
Wskaż różnice
Inną przydatną funkcją jest możliwość sprawdzenia, które właściwości i zmienniki uległy zmianie między 2 wywołaniami.
Aby zobaczyć, czy wystarczy kliknąć przycisk paska bocznego (
), otworzy się nowy widok. W miarę przechodzenia przez wywołania funkcji rysowania zobaczysz zaktualizowane właściwości. Jeśli najedziesz kursorem na dowolny bufor lub tablicę, wyświetli się jego zawartość.
Bądź usłyszany.
Wiesz już, jak debugować swoje projekty w Canvas w Narzędziach programistycznych Chrome. Jeśli chcesz podzielić się opinią na temat narzędzia Canvas Profiler, zgłoś błąd lub opublikuj post w grupie Chrome DevTools. Daj nam znać, jeśli znajdziesz błędy lub jeśli jest coś, co chciałbyś zobaczyć podczas inspekcji <canvas>. To dzięki deweloperom i ich opiniom narzędzia w Chrome stają się lepsze.