Wstęp
Nie ma znaczenia, czy używasz kontekstu 2D czy WebGL – każdy, kto kiedykolwiek korzystał z elementu <canvas>, wie, że debugowanie może być bardzo trudne. Praca z odbitką na płótnie obejmuje zwykle długą i trudną do realizacji listę połączeń:
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 chcesz przechwycić instrukcje wysyłane do kontekstu obszaru roboczego i przejrzeć je pojedynczo. Na szczęście w Narzędziach deweloperskich w Chrome dostępna jest nowa funkcja Canvas Inspection, która pozwala nam to robić.
Z tego artykułu dowiesz się, jak używać tej funkcji do debugowania pracy na płótnie. Inspektor obsługuje zarówno konteksty 2D, jak i WebGL, więc bez względu na to, którego używasz, od razu uzyskasz przydatne informacje na temat debugowania.
Pierwsze kroki
Aby rozpocząć, otwórz about:flags w Chrome i włącz „Włącz eksperymenty w Narzędziach dla deweloperów”.
Następnie przejdź do Narzędzi deweloperskich i kliknij ikonę koła zębatego 
w prawym dolnym rogu. Następnie wybierz Eksperymenty i włącz Inspekcję Canvas:
Aby zmiany zaczęły obowiązywać, musisz zamknąć i ponownie otworzyć Narzędzia deweloperskie (możesz użyć Alt+R lub Option+R).
Po ponownym otwarciu Narzędzi deweloperskich przejdź do sekcji Profile (Profile) i zobaczysz nową opcję Canvas Profiler.
Przede wszystkim zauważysz, że program Canvas Profiler jest wyłączony. Gdy masz stronę zawierającą obiekt canvas, który chcesz debugować, po prostu naciśnij Włącz. Strona załaduje się ponownie gotowa do przechwycenia wywołań <canvas>:
Musisz zdecydować, czy chcesz zarejestrować pojedynczą klatkę, czy też kolejne klatki, gdzie jest ona dokładnie taka sama jak na osi czasu w Narzędziach deweloperskich.
Pojedyncza klatka przechwytuje wywołania do końca bieżącej klatki, a następnie się zatrzymuje. Kolejne klatki przechwytują wszystkie klatki ze wszystkich elementów <canvas>, dopóki nie każesz mu się zatrzymać. Wybór trybu zależy od tego, jak używasz elementu <canvas>. W przypadku trwającej animacji możesz przechwycić pojedynczą klatkę. W przypadku krótkich animacji pojawiających się w reakcji na zdarzenie użytkownika konieczne może być zarejestrowanie kolejnych klatek.
Gdy wszystko jest gotowe, możemy zacząć nagrywać.
Przechwytywanie klatek
Aby to zrobić, po prostu naciśnij Start i korzystaj z aplikacji w zwykły sposób. Po chwili wróć do Narzędzi deweloperskich i jeśli nagrywasz po kolei, naciśnij Zatrzymaj.
Teraz na liście po lewej stronie masz nowy profil, w tym liczbę przechwyconych wywołań kontekstu we wszystkich elementach <canvas>. Kliknij profil, aby wyświetlić ekran podobny do tego:
W panelu dolnym zobaczysz listę wszystkich przechwyconych klatek, przez które możesz przejść. Zrzut ekranu u góry będzie pokazywać stan elementu <canvas> na końcu każdej z nich. Jeśli masz kilka elementów <canvas>, w menu poniżej zrzutu ekranu możesz wybrać, który z nich ma być widoczny.
Wewnątrz ramki zobaczysz rysowane grupy połączeń. Każda grupa wywołań rysowania zawiera jedno wywołanie rysowania, które jest ostatnim wywołaniem w tej grupie. Czym jest remis? W przypadku kontekstu 2D – clearRect(), drawImage(), fill(), stroke(), putImageData() lub dowolnej funkcji renderowania tekstu, a w przypadku WebGL – clear(), drawArrays() lub drawElements(). Zasadniczo chodzi o dowolne działanie, które zmieni zawartość bieżącego bufora rysowania. (Jeżeli nie przepadasz za grafiką, możesz potraktować bufor jako bitmapę z pikselami, którymi się zajmujemy).
Teraz wystarczy przejrzeć listę. Możesz to zrobić w ramce, na poziomie grupy połączeń lub połączenia. Bez względu na to, w jaki sposób wybierzesz opcję przeglądania listy (pod zrzutem ekranu znajdują się przyciski, które ułatwiają szybką nawigację), od razu widzisz kontekst i możesz szybko znaleźć i naprawić błędy.
Wskaż różnice
Inną przydatną funkcją jest możliwość sprawdzenia, które właściwości i zmienne zmieniły się między dwoma wywołaniami.
Aby to zrobić, kliknij przycisk na pasku bocznym (
), a otworzy się nowy widok. Podczas wykonywania wywołań rysowania zobaczysz zaktualizowane właściwości. Wszystkie bufory i tablice zostaną wyświetlone po najechaniu na nie kursorem.
Daj się usłyszeć!
Teraz już wiesz, jak debugować obszar roboczy w Narzędziach deweloperskich w Chrome. Jeśli chcesz podzielić się opinią na temat narzędzia Canvas Profiler, zgłoś błąd lub napisz na grupie dyskusyjnej Chrome dla programistów. Daj nam znać, jeśli znajdziesz jakieś błędy lub zauważyli coś innego, co według Ciebie powinniśmy sprawdzić podczas sprawdzania urządzenia <canvas> – wszystko po to, aby korzystać z nich wyłącznie przez programistów. Informują też o opiniach, że narzędzia Chrome stają się coraz lepsze.