Wprowadzenie
Niezależnie od tego, czy używasz kontekstu 2D czy WebGL, każdy, kto kiedykolwiek pracował z elementem <canvas>, wie, że debugowanie może być niezwykle trudne. Praca z elementem canvas zwykle wiąże się z długą i trudną do prześ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 chcesz przechwycić instrukcje wysłane do kontekstu canvas i przejść przez nie krok po kroku. Na szczęście w Narzędziach deweloperskich w Chrome jest nowa funkcja sprawdzania Canvas, która nam to umożliwia.
W tym artykule pokażę, jak używać tej funkcji, aby rozpocząć debugowanie pracy nad obszarem roboczym. Inspektor obsługuje zarówno konteksty 2D, jak i WebGL, więc niezależnie od tego, którego używasz, od razu uzyskasz przydatne informacje na potrzeby debugowania.
Pierwsze kroki
Aby rozpocząć, otwórz about:flags w Chrome i włącz „Enable Developer Tools experiments” (Włącz eksperymenty w Narzędziach dla programistów).
Następnie przejdź do Narzędzi deweloperskich i kliknij ikonę koła zębatego 
w prawym dolnym rogu. Następnie możesz przejść do sekcji Eksperymenty i włączyć Inspekcję obszaru roboczego:
Aby zmiany zaczęły obowiązywać, musisz zamknąć i ponownie otworzyć Narzędzia deweloperskie (możesz użyć skrótu Alt+R lub Option+R).
Po ponownym otwarciu Narzędzi dla programistów przejdź do sekcji Profile, gdzie zobaczysz nową opcję Profiler Canvas.
Na początek zauważysz, że Profiler Canvas jest wyłączony. Gdy masz stronę zawierającą element canvas, który chcesz debugować, kliknij Włącz. Strona zostanie ponownie załadowana i będzie gotowa do przechwytywania wywołań <canvas>:
Musisz zdecydować, czy chcesz przechwycić pojedynczą klatkę czy kolejne klatki, przy czym klatka jest dokładnie taka sama jak ta, którą widzisz na osi czasu Narzędzi deweloperskich.
Pojedyncza klatka rejestruje wywołania do końca bieżącej klatki, a następnie zatrzymuje się. Z kolei opcja Kolejne klatki rejestruje wszystkie klatki wszystkich elementów <canvas>, dopóki nie zatrzymasz tego procesu. Wybór trybu zależy od sposobu użycia elementu <canvas>. W przypadku trwającej animacji możesz chcieć przechwycić pojedynczą klatkę. W przypadku krótkiej animacji, która pojawia się w odpowiedzi na zdarzenie użytkownika, może być konieczne przechwycenie kolejnych klatek.
Wszystko jest już skonfigurowane i możemy zacząć rejestrować dane.
Przechwytywanie klatek
Aby rozpocząć nagrywanie, kliknij Rozpocznij, a następnie korzystaj z aplikacji w taki sam sposób jak zwykle. Po pewnym czasie wróć do Narzędzi deweloperskich i jeśli rejestrujesz dane w trybie ciągłym, kliknij Zatrzymaj.
Na liście po lewej stronie pojawi się nowy profil z liczbą przechwyconych wywołań kontekstu we wszystkich elementach <canvas>. Kliknij profil, aby wyświetlić ekran podobny do tego:
W dolnym panelu zobaczysz listę wszystkich przechwyconych klatek, które możesz przeglądać. Gdy klikniesz każdą 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ć wyświetlany, korzystając z menu pod zrzutem ekranu.
W ramce zobaczysz grupy wywołań rysowania. Każda grupa wywołań rysowania zawiera jedno wywołanie rysowania, które będzie ostatnim wywołaniem w grupie. Czym jest wywołanie rysowania? W przypadku kontekstu 2D będą to np. clearRect(), drawImage(), fill(), stroke(), putImageData() lub dowolne funkcje renderowania tekstu, a w przypadku WebGL – clear(), drawArrays() lub drawElements(). Zasadniczo jest to wszystko, co może zmienić zawartość bieżącego bufora rysowania. (Jeśli nie interesujesz się grafiką, możesz wyobrazić sobie bufor jako bitmapę z pikselami, którymi manipulujemy).
Teraz wystarczy przejść przez listę. Możesz to zrobić na poziomie klatki, grupy wywołań rysowania lub wywołania. Niezależnie od tego, jak będziesz przechodzić przez listę (tuż pod zrzutem ekranu znajdują się przyciski, które ułatwiają szybką nawigację), zobaczysz kontekst w danym momencie, co oznacza, że możesz szybko znajdować i naprawiać błędy, gdy tylko się pojawią.
Znajdź różnice
Inną przydatną funkcją jest możliwość sprawdzenia, które właściwości i zmienne zmieniły się między 2 wywołaniami.
Aby go zobaczyć, kliknij przycisk paska bocznego (
). Pojawi się nowy widok. Podczas przechodzenia przez wywołania rysowania zobaczysz zaktualizowane właściwości. Jeśli najedziesz kursorem na bufory lub tablice, wyświetli się ich zawartość.
Zabierz głos!
Wiesz już, jak debugować pracę z elementem canvas w Narzędziach deweloperskich w Chrome. Jeśli masz opinię na temat narzędzia Canvas Profiler, zgłoś błąd lub opublikuj post w grupie Narzędzia deweloperskie w Chrome. Daj nam znać, jeśli znajdziesz jakieś błędy lub jeśli jest coś jeszcze, co chcesz zobaczyć podczas sprawdzania <canvas>. Narzędzia Chrome stają się lepsze tylko dzięki temu, że deweloperzy z nich korzystają i przesyłają opinie.