Přejít k navigační liště

Zdroják » JavaScript » Jak odladíte canvas? S Inspektorem hravě

Jak odladíte canvas? S Inspektorem hravě

Ladění canvasu v HTML5 může být pěkná dřina, pro kterou je i slušný javascriptový debugger jen neohrabaným nástrojem. Prohlížeče nám ale přispěchaly na pomoc. Přináší Canvas Inspektor, se kterým se i v pokročilejších animacích hravě vyznáte.

Tento článek je překladem textu Canvas Inspection using Chrome DevTools od Paula Lewise pod licencí CC BY 3.0 a popisuje ladění canvasu v nástrojích pro Google Chrome.

V době, kdy je vydáván tento překlad, se připravuje podobný nástroj i pro Firefox (podrobnosti najdete v Introducing the Canvas Debugger in Firefox Developer Tools) a je celkem pravděpodobné, že ho získají i další prohlížeče — jedinou otázkou je, jak moc se bude shodovat s podobou představenou v tomto článku. 

Úvod

Ať už používáte WebGL nebo 2D kontext, pokud jste kdy pracovali s canvasem, dobře víte, jak moc obtížné dovede takové ladění být. Práce s canvasem obvykle obsahuje dlouhé a obtížně sledovatelné seznamy volání:

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();

  // … a tak dále a tak dále
}

Někdy byste potřebovali zachytit instrukce právě posílané do canvasového kontextu a sledovat je pěkně krok za krokem. Naštěstí se v nástrojích pro vývojáře prohlížeče Chrome objevil nástroj, který to dokáže. (A podobný bude i ve Firefoxu – viz druhý odstavec článku – pozn. překl.)

V tomto článku vám ukážeme, jak takové ladění canvasu probíhá. Inspector podporuje jak 2D kontext tak WebGL kontext — ať používáte kterýkoliv z nich, tento nástroj vám s jeho laděním pomůže.

Začínáme

Nejprve si v Chromu zobrazte stránku about:flags a zapněte přepínač “Enable Developer Tools experiments” (v české verzi se jmenuje „Povolit experimenty v Nástrojích pro vývojáře“).

Obrázek 1 – Povolení experimentů v nástrojích pro vývojáře na stránce about:flags

 

Otevřete nástroje pro vývojáře a vyberte ozubené kolo   v pravém rohu. Dále vyberte panel Experiments a povolte Canvas inspection:

Obrázek 2 – Povolení ladění canvasu v nástrojích pro vývojáře

 

Aby se změna projevila, zavřete a znovu otevřete vývojářské nástroje (můžete také použít šikovnou klávesovou zkratku Alt+R anebo Option+R).

V nově otevřených nástrojích si zobrazte panel Profiles, ve kterém najdete nastavení nového Canvas Profileru.

Určitě si všimnete, že Profiler Canvasu je nejprve vypnutý. Jakmile máte načtenou stránku s canvasem, kterou chcete ladit (pokud vás zrovna žádná nenapadá, zkuste jednoduchou javascriptovou hru Breakout – spouští se tlačítkem run now vlevo – pozn. překl.), stiskněte Enable a stránka se znovu načte připravená zachytit volání canvasu:

Obrázek 3 – Zapnutí Profileru canvasu

 

Nyní si musíte vybrat, zda budete chtít vždy zachytit jen jeden snímek (single frame) nebo celou sérii následných snímků (consecutive frames).

Snímek zde zastupuje jeden celý průchod událostí stránky. To zahrnuje běh JavaScriptu, obsloužení události, aktualizaci DOMu, změnu stylů, změnu layoutu a vykreslení stránky. U hladkých animací by měl jeden snímek trvat méně než 1/60 vteřinu nebo 16.6 ms.

Při volbě single frame budou volání zachycena na konci aktuálního snímku a zachytávání již dále nebude pokračovat. Na druhou stranu volba connsecutive frames způsobí zachytávání všech snímků všech canvasů stránky tak dlouho, dokud zachytávání neukončíte. Který mód zvolíte, záleží na tom, jak <canvas> používáte. Pro zachycení právě nadcházející animace můžete chtít zachytit single frame. V případě krátké animace, která je vyvolána jako reakce na událost od uživatele, budete nejspíš potřebovat consecutive frames. (Pokud si nejste jistí, vyberte consecutive frames a připravte se sledování zastavit, kdyby váš procesor začal dostávat na frak – pozn. překlad.)

Obrázek 4 – Zvolte, kolik snímků chcete zachytit

 

Tím jsme připraveni, tak pojďme na to!

Odchytávání snímků

Stiskněte tlačítko Start a můžete začít interagovat s vaší aplikací. Po chvíli se vraťte do vývojářských nástrojů a stiskněte Stop (nebo kulaté červené tlačítko – pozn. překl.).

Nyní byste měli mít nalevo nový log plný zachycených kontextů volání všech <canvas> elementů. Klikněte na profil a uvidíte něco podobného následujícímu obrázku:

Obrázek 5 – Zachycený log vykreslování canvasu

 

V dolním panelu vidíte seznam všech zachycených snímků, můžete jimi krokovat, a po kliknutí na každý z nich se vám vykreslí nahoře screenshot reprezentující stav canvasu na konci každého snímku. Pokud máte více prvků  <canvas>, můžete z nich vybrat pomocí nabídky znázorněné na obrázku:

Obrázek 6 – Výběr správného canvasu

 

Uvnitř každého snímku vidíte skupiny vykreslovacích volání  (draw call groups). Každá skupina zahrnuje jednu skupinu volání. Co je to jedna skupina volání? U 2D kontextu se může jednat o sekvenci volání jako clearRect(), drawImage(), fill(), stroke(), putImageData() nebo o nějaké textové funkce, u WebGL to bude clear(), drawArrays() nebo drawElements(). Jedná se o jakékoliv volání, které změní vykreslovací buffer aktuálního kontextu. (Pokud neděláte do grafiky, představte si buffer jako bitmapu reprezentující sadu pixelů, se kterými pracujeme.)

Nyní můžete začít krokovat seznamem. Krokovat můžete na úrovni celých snímků, na úrovni draw call skupin nebo na úrovni jednotlivých volání. Ať už si vyberete kterýkoliv způsob krokování (pod screenshotem najdete tlačítka, která vám krokování urychlí), zobrazí se vám vždy kontext pro aktuální krok, tj. snadno byste měli lokalizovat chybu, kterou hledáte.

(Jako malé cvičení na dvě minuty si zobrazte zminěnou hru Breakout, zachyťe ji v módu consecutive frames a následným krokováním přes jednotlivá volání zjistěte, jak by šlo vykreslování celé hry výrazně optimalizovat – pozn. překl.)

Obrázek 7 – Navigační tlačítka pro krokování seznamem

Najděte rozdíl

Další šikovnou vlastnosti je zobrazení vlastností a proměnných, které se mezi dvěma voláními změnily.

Zobrazíte je kliknutím na tlačítko postraně  (). Nyní, jak budete krokovat přes jednotlivá volání, uvidíte, které vlastnosti byly změněny. Jakýkoliv buffers nebo pole zobrazí svůj obsah, pokud na ně najedete myší.

Hlaste nám váš feedback!

Nyní víte, jak ladění canvasu v Chromu funguje. Pokud k němu máte nějaký feedback, tak založte nový bug, anebo nám napište do skupiny Chrome DevTools Group. Dějte nám vědět, pokud najdete jakoukoliv chybu, anebo pokud tu je ještě něco dalšího, co byste chtěli při ladění canvasu sledovat. Jen díky feedbacku od vývojářů se vývojářské nástroje Chromu zlepšují.

Komentáře

Subscribe
Upozornit na
guest
1 Komentář
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
cokoliw

Díky moc, dneska mi to nesmírně pomohlo! :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.