V posledních pár letech je moderní zaklínadlo Web 2.0, s kterým souvisí také masivní vývoj aplikací v jazyce JavaScript. Dokud jsme sem tam napsali par funkcí na kontrolu formulářů, pro vývoj nám stačilo využívat funkci alert().

...

Pokud ale vyvíjíme aplikace využívající masivně JavaScript, je tato technika nedostatečná, nehledě na to, že alert(), může být v některých případech naprosto nevhodný pro notifikaci. Alert je modální dialog a dokud je okno zobrazené, nelze se stránkou uživatelsky interagovat, nicméně neuživatelské události (onLoad, XMLHTTPREQUEST, onReadyStateChange, atd.) se spustí i když je alert okno zobrazeno! To může v jistých případech rozbít následující běh skriptu.

Pokročilé techniky

Takže otázka je jak lépe? Jaké máme možnosti?

FireFox

Venkman je mrtev, ať žije král. Jeden z nejpropracovanějších nástrojů je FireBug. FireBug je rozšíření FireFoxe, který se vyznačuje ikonkou ve stavovém řádku. Pokud na stránce není chyba, je ikonkou zelené zatržítko
. Obsahuje online editor DOMu, editace atributů, tak i editaci CSS stylů. Tím nejdůležitějším je záložka Script, kde je nahoře výběr všech skriptů na stránce. Do stránky lze zadat breakpointy kliknutím vlevo od čísla řádky. Poté lze stránku znovu načíst a kód se na prvním breakpointu zastaví a je ho možno krokovat. V okně Watch jsou vidět všechny aktuální proměnné prostředí a jejich obsah.

Další vychytané funkce, které se hodí jsou zjištění doby načtení stránky a všech jejich komponent, nebo vizuální zjištění velikosti elementu ve stránce.

Internet Explorer

Pro Explorer dlouhou dobu neexistovalo nic použitelného, chyby hlásil zmatečně, debugovat se dalo jen v Miccrosoft Script Editoru, což je prostředí pouze pro otrlé. Ale i zde se časy mění

Lepší chybové hlášení lze dosáhnout nainstalováním Companion.JS. Od stejných francouzů je možné získat i rozšíření Debug Bar. Tímto toolbarem je možné zobrazit taktéž rozměry DOM elementu jako s FireBugem, taktéž je na toolbaru velice důležitý zaměřovací kříž, kterém lze označit libovlný element na stránce. Tento element nasledně bude zobrazen ve stromové struktuře. Po vybrání elementu je možné zobrazit přiřazené styly dle pravidel, nebo všechny atributy elementu. Bohužel vše je pouze pro čtení.

To samé, ale trochu jinak umí IE Developer Toolbar. Nejen že umí výběrem myši zobrazit element v DOMu ale i editovat jeho vlastnosti. Nicméně ani ten neumí práci s JavaScriptem.

A nyní slibované debugování. Ti co mají nainstalované Visual Studio vědí, že je možné jím nechat zachytávat chyby JavaScriptu v Exploreru a následně je i ladit. Nicméně Visual Studio není zadarmo. Zadarmo ale je Express edice, která sice neumožňuje využít jako externí debugger, nicméně se dá využít. Pokud v Express edici vytvoříte nový webový projekt (může být prázdný) a pak ho spustíte zelenou šipkou, bude zobrazeno okno Internet Exploreru. Stopneme načítání stránky, zadáme stránku, kterou chceme debugovat a je to. Ve Visual Studiu se zobrazí všechny skripty a lze opět nastavit breakpointy a kód ladit. Další informace můžete nalézt na BernieCode blogu.

Safari

Se začátkem prodeje Apple iPhone, na kterém běží Safari, uvolnil Apple tento prohlížeč ve verzi 3 i pro Windows. Až na Windows nezvyklé renderování písmen se chová celkem standardně, nicméně občas je také potřeba ladit JS i v něm. JavaScriptový debugger pro Safari se jmenuje Drosera. Drosera je vyvíjena lidmi kolem WebKitu, což je jádro na kterém je provozováno Safari a Linuxový Konqueror. Ze stránek Drosery se dozvíte, že existuje verze pro Apple a jak ji nainstalovat, nicméně Drosera pro windows zatím s aktuální verzí Safari nefunguje, ale pouze s Night buildem Webkitu. I to ale stačí :-)

Takže stažením posledního nightbuildu získáme archiv obsahující binárky a dva dávkové soubory: run-drosera.cmd a run-nightly-webkit.cmd. Nejdříve spustíme Webkit a následně Droseru. Pokud se Drosera propojí s prohlížečem je v levém sloupci zobrazena aktuální session se všemi JS soubory. Pokud se tak nestane, je nutné oba programy restartovat.

Opera

Ač se Opera tváří jako standardní prohlížeč, často se chová dosti podivně a nejhorší je, že pro ni žádný pořádný debugger neexistuje. Jediná malá záchrana je možnost využití vypisování stavů při běhu programu do konzole. Konzole se vyvolá v menu Window > Special > JavaScript console. Pak můžeme místo alertu používat:

opera.postError()

Shrnutí

Nejjednodušší je využívat JS knihoven, které jsou odzkoušené a multiplatformní, nicméně někdy se stane, že i vy napíšete kód, který bude na hraně a některý z prohlížečů ho nebude chtít interpretovat. Pak nastává čas důkladného debugování.