DevPad: krokování programů v prohlížeči

DevPad je online prostředí pro výuku programování. Žáci v něm píšou programy v C#, Pythonu, JavaScriptu a českém pseudokódu, krokují je příkaz po příkazu a vidí, jak se mění proměnné, pole, seznamy i objekty. Hodnoty můžou za běhu i přepsat. Všechno běží v prohlížeči, bez instalace, bez registrace, bez reklam či sledování a zdrama.

Proč DevPad

Kdo učí programování, zná to: žák napíše cyklus, program vypíše něco jiného, než čekal, a on neví proč. Na tabuli se dá „odkrokovat“ pár řádků, ale u řazení pole nebo rekurze se v tom ztratí každý. Profesionální vývojová prostředí krokovat umí, jenže začátečníka zahltí, musí se instalovat a ve školní učebně je s nimi starost.

Tohle jsem řešil už v roce 2006 v diplomové práci, ze které vznikl program Algoritmy. Pomáhal se psaním a krokováním algoritmů v pseudokódu a používal se na řadě škol. DevPad je jeho nástupce pro dnešní dobu: běží v prohlížeči, krokuje i skutečné jazyky, které se dnes učí, a sledovat v něm jde mnohem víc než jen proměnné.

Hlavní myšlenka zůstává: žák má vidět, co program dělá, nejen co vypíše.

Co DevPad umí

DevPad je zatím ve veřejné betě a vývoj jde rychle dopředu: první verze vyšla v září 2026 a od té doby přibylo přes čtyřicet aktualizací. Hledám učitele, kteří ho vyzkouší ve výuce a řeknou mi, co jim chybí nebo co nefunguje. Ozvat se můžete přímo z aplikace (menu uživatele → Nahlásit chybu nebo nápad…) nebo přes kontakt.

Krokování: program pod lupou

Tlačítkem Krok (F10) se program vykoná o jeden příkaz a zastaví se. V editoru je zvýrazněný řádek, který přijde na řadu, a panely vpravo ukazují aktuální stav. Stop-značka (F9 nebo klik vedle čísla řádku) zastaví běh na zvoleném místě, Spustit (F5) pustí program naplno až k další značce.

Pro výklad u projektoru se hodí zpomalený běh (Alt+F5): program běží sám, ale tak pomalu, že je vidět každý krok. Rychlost jde nastavit od čtyř sekund po desetinu sekundy na krok a z běhu jde kdykoli přejít do krokování a zase zpátky.

Proměnné a zásobník volání

Panel Proměnné ukazuje název, hodnotu a typ každé proměnné. Proměnná, která už skončila platnost (třeba řídicí proměnná cyklu po jeho konci), zůstane v panelu šedě s poslední hodnotou, takže žák vidí, s čím cyklus skončil.

U funkcí a rekurze ukazuje panel celý zásobník volání: každé rozběhnuté volání má vlastní skupinu s hodnotami argumentů v záhlaví, hlavní program je nahoře, a právě prováděné volání dole. Na rekurzivním quicksortu je tak vidět, že každé volání má své vlastní zacatek, konec a pivot, a pole přitom zůstává jedno a to samé.

Pole, kolekce a objekty

Panel Pole kreslí pole jako tabulku s indexy: jednorozměrné vodorovně nebo svisle, dvourozměrné jako mřížku, u trojrozměrných se vybírá „patro“. Stejně se zobrazí i seznamy (List<T>, list), slovníky jako tabulka klíč–hodnota, množiny, fronty a zásobníky. Seznam objektů se ukáže jako tabulka záznamů: řádek je objekt, sloupce jsou jeho vlastnosti.

Objekty v panelu Proměnné jsou rozbalovací strom, zanořený do libovolné hloubky. Jde ho zkopírovat jako JSON a obsah panelů jako tabulku do Excelu.

Barvy buněk na příkaz programu

Program si může buňky pole sám obarvit: jednu buňku, obdélníkovou oblast, celé pole nebo všechny buňky s danou hodnotou. U řazení je tak hned vidět seřazená část, porovnávaný prvek a dosavadní minimum, u Hry života živé buňky. Příkazy jsou ve všech jazycích stejné, mimo DevPad je program nepotřebuje (v C# je stačí obalit #if DEVPAD).

„A co kdyby…?“ Úpravy hodnot za běhu

Tohle bývá ve výuce nejsilnější chvíle. Program stojí v pauze a učitel se zeptá: co se stane, když tady bude 42? S přepínačem Úpravy hodnot (tužka v liště) stačí na hodnotu v panelu Proměnné nebo Pole dvakrát kliknout (nebo stisknout F2), přepsat ji a pokračovat. Do seznamů, slovníků a množin jde tlačítky + a − prvky přidávat a odebírat.

Úpravy fungují ve všech čtyřech jazycích, i ve vnořených vlastnostech objektů a v proměnných volajících funkcí. Upravit jde i ve chvíli, kdy program čeká na vstup od uživatele. DevPad přitom hlídá, aby úprava nerozbila rozpracovaný příkaz: hodnotu, se kterou se právě počítá, nepřepíše a řekne proč.

Žák si tak může vyzkoušet hraniční případy bez přepisování a nového spouštění programu: prázdné pole, zápornou hodnotu, prvek navíc. A hned vidí, jak na to program zareaguje.

Čtyři jazyky, jedno ovládání

DevPad krokuje C#, Python, JavaScript a český pseudokód. Panely, klávesové zkratky, úpravy hodnot i barvy v poli fungují ve všech stejně, takže přechod z pseudokódu na „opravdový“ jazyk nic nestojí. Programy jde otevřít vedle sebe, pod sebe nebo do dlaždic, třeba stejný algoritmus ve všech jazycích naráz:

• C# se překládá skutečným překladačem Roslyn (C# 14, .NET 10) přímo v prohlížeči. Kód, který žák napíše v DevPadu, jde zkopírovat do konzolové aplikace ve Visual Studiu a poběží stejně. Funguje i Console.ReadLine, barvy konzole, Thread.Sleep, třídy, záznamy, LINQ.
• Python je plnohodnotný CPython 3.14 (Pyodide) včetně standardní knihovny, krokuje se přes sys.monitoring.
• JavaScript běží v izolovaném vlákně prohlížeče, takže nekonečný cyklus nezamrzne stránku a jde přerušit.
• Pseudokód je český jazyk z programu Algoritmy (začátek, pro i od 1 do n opakuj, jestliže … pak, čti, napiš), zpětně kompatibilní s poslední verzí 1.4 včetně chybových hlášek, které učitelé i žáci znají. Funguje i anglická varianta klíčových slov.

Editor, který pomáhá

Editor je Monaco, tedy stejný jako ve Visual Studio Code: zvýraznění syntaxe a sémantiky (třídy, metody a proměnné barevně jako ve Visual Studiu), našeptávač se členy typů a proměnnými v dosahu, nápověda k parametrům, úryvky kódu, rychlý přechod na funkci a automatické formátování (i pro pseudokód podle pravidel původního programu).

Kontrola kódu vypíše chyby a varování česky, s řádkem a sloupcem. Kliknutím na hlášku se editor přesune na místo chyby, hlášku jde zkopírovat nebo jedním kliknutím vyhledat na webu.

Programy můžou číst vstup a psát barevný výstup (i ANSI sekvence jako v terminálu). Hra Hledání min v Pythonu tak vypadá jako v konzoli a v panelu Pole je přitom vidět celá hrací plocha:

Připraveno pro výuku

• Ukázkové programy pro začátek (největší ze tří, průměr, faktoriál, NSD, hádání čísla, bublinkové řazení, Eratosthenovo síto, násobení matic, Hra života, Hledání min), každý ve všech jazycích. Ukázku jde poslat odkazem, např. devpad.page/?sample=bubble-sort&pl=py.
• Sdílení odkazem bez serveru i bez registrace: celý program se zabalí do odkazu, který stačí poslat žákům do Teams, e-mailu nebo dát na web. U příjemce se otevře v nové záložce.
• Sdílený počítač: v učebně si DevPad po zavření stránky rozepsané programy zapomene, aby další skupina nenašla řešení té předchozí. Žák o práci nepřijde, když jen omylem zavře okno.
• Projektor: celá obrazovka (F11), světlé i tmavé téma, nastavitelné rozložení panelů přetažením myší.
• Soubory: otevření a uložení programu na disk, automatické ukládání rozepsané práce v prohlížeči.
• Česky i anglicky, včetně hlášek a formátu čísel podle zvolené kultury.
• Soukromí: žádné účty, žádné cookies. Kód se nikam neposílá, překládá se a běží v prohlížeči.

Jak to funguje uvnitř

Na první pohled je to editor s pár panely. Pod kapotou jde o čtyři různá běhová prostředí schované za jedním rozhraním, aby uživatelské rozhraní nemuselo vědět, s jakým jazykem pracuje.

• Celá aplikace je .NET 10 v prohlížeči (Blazor WebAssembly). Server posílá jen statické soubory, žádný kód žáka nespouští.
• C#: překladač Roslyn běží přímo v prohlížeči. Program žáka se před překladem přepíše: před každý příkaz se vloží krok, který předá řízení prostředí a pošle mu hodnoty proměnných. Program přitom zůstává opravdovým zkompilovaným C#, s přesnými čísly řádků i u běhových chyb.
• Python a JavaScript běží ve vlastním vlákně (Web Worker). Pozastavit ho, poslat mu upravenou hodnotu nebo se zeptat na rozbalený objekt jde přes sdílenou paměť, takže krokování nezdržuje stránku a nekonečný cyklus jde vždy přerušit.
• Pseudokód má vlastní lexer, parser a interpret napsaný od nuly podle specifikace původního jazyka.
• Vše se stahuje, až když je potřeba: překladač C# na pozadí po otevření stránky, Python až při prvním spuštění programu v Pythonu.
• Přes 2 300 automatických testů (xUnit) včetně „zlatých“ testů s ukázkovými algoritmy a cvičeními z původní učebnice.

DevPad vzniká od září 2026 s AI (Claude Code): já vedu projekt, rozhoduju o podobě a testuju, kód píše AI po malých krocích podle roadmapy, každý krok s testy a mou kontrolou před commitem. Za sedm týdnů tak vzniklo přes čtyřicet verzí.

Co bude dál

Vývoj pokračuje a v plánu je toho ještě hodně:

• .NET 11 a C# 15 hned po vydání.
• Web s nápovědou, návody a blogem o jednotlivých funkcích.
• Účty a ukládání programů na server, krátké odkazy na sdílený kód, složky a štítky, přihlášení přes Microsoft nebo Google. Současná funkcionalita ale zůstane i bez nich.
• Úlohy s automatickou kontrolou: učitel zadá úlohu se šablonou a testovacími vstupy, DevPad ověří výstup i hodnoty proměnných a žák hned ví, jestli má správně.