Principy a možnosti ladění pomocí technologie ASP.NET AJAX

Scott Cate

Schopnost ladit kód je dovednost, kterou by měl mít každý vývojář ve svém arzenálu bez ohledu na technologii, kterou používá. I když je mnoho vývojářů zvyklých k ladění ASP.NET aplikací používajících kód VB.NET nebo jazyka C# pomocí sady Visual Studio .NET nebo Web Developer Express, někteří z nich nevědí, že je to také velmi užitečné pro ladění kódu na straně klienta, jako je JavaScript. Stejný typ technik používaných k ladění aplikací .NET lze použít také u aplikací s podporou AJAX a konkrétněji ASP.NET aplikací AJAX.

Ladění ASP.NET aplikací AJAX

Dan Wahlin

Schopnost ladit kód je dovednost, kterou by měl mít každý vývojář ve svém arzenálu bez ohledu na technologii, kterou používá. Je samozřejmé, že pochopení různých možností ladění, které jsou k dispozici, může ušetřit obrovské množství času na projektu a možná i několik bolestí hlavy. I když je mnoho vývojářů zvyklých k ladění ASP.NET aplikací používajících kód VB.NET nebo jazyka C# pomocí sady Visual Studio .NET nebo Web Developer Express, někteří z nich nevědí, že je to také velmi užitečné pro ladění kódu na straně klienta, jako je JavaScript. Stejný typ technik používaných k ladění aplikací .NET lze použít také u aplikací s podporou AJAX a konkrétněji ASP.NET aplikací AJAX.

V tomto článku se dozvíte, jak lze sadu Visual Studio 2008 a několik dalších nástrojů použít k ladění aplikací ASP.NET AJAX k rychlému vyhledání chyb a dalších problémů. Tato diskuze bude obsahovat informace o povolení internet exploreru 6 nebo novějšího pro ladění, použití sady Visual Studio 2008 a Průzkumníka skriptů k procházení kódu a použití dalších bezplatných nástrojů, jako je pomocník pro vývoj webu. Dozvíte se také, jak ladit ASP.NET aplikací AJAX ve Firefoxu pomocí rozšíření s názvem Firebug, které vám umožní krokovat javascriptový kód přímo v prohlížeči bez jakýchkoli jiných nástrojů. Nakonec se seznámíte s třídami v knihovně ASP.NET AJAX, které vám můžou pomoct s různými úlohami ladění, jako jsou příkazy trasování a kontrolní výrazy kódu.

Než se pokusíte ladit stránky zobrazené v Internet Exploreru, musíte provést několik základních kroků, abyste je povolili pro ladění. Pojďme se podívat na některé základní požadavky na nastavení, které je potřeba provést, abychom mohli začít.

Konfigurace Internet Exploreru pro ladění

Většina lidí nemá zájem o zobrazení problémů s JavaScriptem na webu zobrazeném v Internet Exploreru. Ve skutečnosti by průměrný uživatel ani nevěděl, co dělat, pokud by se mu zobrazila chybová zpráva. V důsledku toho jsou možnosti ladění ve výchozím nastavení v prohlížeči vypnuté. Je ale velmi jednoduché zapnout ladění a použít ho při vývoji nových aplikací AJAX.

Pokud chcete povolit funkci ladění, přejděte v nabídce Internet Exploreru na Nástroje Možnosti internetu a vyberte kartu Upřesnit. V části Procházení se ujistěte, že nejsou zaškrtnuté následující položky:

• Zakázání ladění skriptů (Internet Explorer)
• Zakázání ladění skriptů (jiné)

I když to není potřeba, pokud se pokoušíte ladit aplikaci, budete pravděpodobně chtít, aby všechny chyby JavaScriptu na stránce byly okamžitě viditelné a zřejmé. Zaškrtnutím políčka Zobrazit oznámení o každé chybě skriptu můžete vynutit zobrazení všech chyb se zprávou. I když je to skvělá možnost, kterou můžete zapnout při vývoji aplikace, může se rychle stát otravným, pokud jen prohlíhlíte jiné weby, protože vaše šance, že narazíte na chyby JavaScriptu, jsou docela dobré.

Obrázek 1 ukazuje, co by mělo rozšířené dialogové okno Internet Exploreru vypadat, když je správně nakonfigurované pro ladění.

Obrázek 1: Konfigurace Internet Exploreru pro ladění (Kliknutím zobrazíte obrázek v plné velikosti.)

Po zapnutí ladění se v nabídce Zobrazení zobrazí nová položka nabídky s názvem Script Debugger. K dispozici jsou dvě možnosti, včetně možnosti Otevřít a Break at Next Statement. Pokud je vybrána možnost Otevřít, budete vyzváni k ladění stránky v sadě Visual Studio 2008 (všimněte si, že visual Web Developer Express lze také použít k ladění). Pokud je aktuálně spuštěná sada Visual Studio .NET, můžete zvolit použití této instance nebo vytvoření nové instance. Když je vybraná možnost Break at Next Statement ,budete při spuštění kódu JavaScriptu vyzváni k ladění stránky. Pokud se kód JavaScriptu spustí v události onLoad stránky, můžete stránku aktualizovat a aktivovat relaci ladění. Pokud se javascriptový kód spustí po kliknutí na tlačítko, spustí se ladicí program ihned po kliknutí na tlačítko.

Poznámka

Pokud používáte systém Windows Vista s povolenou funkcí User Access Control (UAC) a máte sadu Visual Studio 2008 nastavenou tak, aby běžela jako správce, sada Visual Studio se po zobrazení výzvy k připojení k procesu nepřipojí. Chcete-li tento problém vyřešit, spusťte nejprve sadu Visual Studio a použijte tuto instanci k ladění.

I když následující část ukazuje, jak ladit ASP.NET stránku AJAX přímo ze sady Visual Studio 2008, použití možnosti Ladění skriptů aplikace Internet Explorer je užitečné, pokud je stránka již otevřená a chcete ji podrobněji zkontrolovat.

Ladění pomocí sady Visual Studio 2008

Visual Studio 2008 poskytuje funkce ladění, na které vývojáři po celém světě spoléhají každý den při ladění aplikací .NET. Integrovaný ladicí program umožňuje krokovat kód, zobrazit data objektů watch pro konkrétní proměnné, monitorovat zásobník volání a mnoho dalšího. Kromě ladění kódu VB.NET nebo C# je ladicí program také užitečný pro ladění ASP.NET aplikací AJAX a umožňuje krokovat kód JavaScriptu řádek po řádku. Podrobnosti, které následují, se zaměřují na techniky, které lze použít k ladění souborů skriptů na straně klienta, místo aby poskytovaly diskuzi o celém procesu ladění aplikací pomocí sady Visual Studio 2008.

Proces ladění stránky v sadě Visual Studio 2008 lze spustit několika různými způsoby. Nejprve můžete použít možnost ladicího programu skriptů aplikace Internet Explorer uvedenou v předchozí části. To funguje dobře, když už je stránka načtená v prohlížeči a chcete ji začít ladit. Případně můžete kliknout pravým tlačítkem na stránku .aspx v Průzkumník řešení a z nabídky vybrat Nastavit jako úvodní stránku. Pokud jste zvyklí na ladění ASP.NET stránek, pravděpodobně jste to udělali už dříve. Po stisknutí klávesy F5 lze stránku ladit. Obecně ale můžete zarážku nastavit kdekoli v kódu VB.NET nebo C#, u JavaScriptu to ale neplatí, jak uvidíte dál.

Vložené a externí skripty

Ladicí program sady Visual Studio 2008 zpracovává JavaScript vložený na jiné stránce než externí soubory JavaScriptu. S externími soubory skriptů můžete soubor otevřít a nastavit zarážku na libovolném řádku, který zvolíte. Zarážky můžete nastavit kliknutím na oblast šedého panelu nalevo od okna editoru kódu. Pokud je JavaScript vložený přímo na stránku pomocí <script> značky, nastavení zarážky kliknutím do šedé oblasti na hlavním panelu není možné. Při pokusu o nastavení zarážky na řádku vloženého skriptu se zobrazí upozornění, že se nejedná o platné umístění pro zarážku.

Tento problém můžete obejít přesunutím kódu do externího souboru .js a odkazováním na něj pomocí atributu <src značky skriptu> :

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Co když přesun kódu do externího souboru není možnost nebo vyžaduje víc práce, než stojí za to? I když nemůžete nastavit zarážku pomocí editoru, můžete přidat příkaz ladicího programu přímo do kódu, kde chcete spustit ladění. K vynucení spuštění ladění můžete také použít třídu Sys.Debug dostupnou v knihovně ASP.NET AJAX. Další informace o třídě Sys.Debug najdete dále v tomto článku.

Příklad použití klíčového slova je uvedený ve výpisu debugger 1. Tento příklad vynutí přerušení ladicího programu těsně před voláním funkce aktualizace.

Výpis 1. Použití klíčového slova ladicího programu k vynucení přerušení ladicího programu sady Visual Studio .NET

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Jakmile dojde k zadání příkazu ladicího programu, zobrazí se výzva k ladění stránky pomocí sady Visual Studio .NET a můžete začít krokovat kódem. Při tom můžete narazit na problém s přístupem k souborům skriptů knihovny ASP.NET AJAX, které se používají na stránce, takže se podívejme na použití sady Visual Studio . Průzkumník skriptů v NET.

Ladění pomocí sady Visual Studio .NET Windows

Jakmile se spustí ladicí relace a začnete procházet kód pomocí výchozí klávesy F11, může se zobrazit dialogové okno chyby zobrazené na obrázku 2, pokud nejsou otevřené a dostupné pro ladění všechny soubory skriptů použité na stránce.

Obrázek 2: Dialogové okno chyby, které se zobrazí, když není k dispozici žádný zdrojový kód pro ladění (Kliknutím zobrazíte obrázek v plné velikosti.)

Toto dialogové okno se zobrazí, protože Visual Studio .NET si není jistá, jak se dostat ke zdrojovému kódu některých skriptů, na které stránka odkazuje. I když to může být zpočátku docela frustrující, existuje jednoduchá oprava. Jakmile spustíte ladicí relaci a dosáhnete zarážky, přejděte do okna Ladit Průzkumník skriptů windows v nabídce sady Visual Studio 2008 nebo použijte klávesovou zkratku Ctrl+Alt+N.

Poznámka

Pokud se nabídka Průzkumníka skriptů nezobrazuje, přejděte v nabídce Visual Studio .NET na Nástroje>přizpůsobení>příkazů . Vyhledejte položku Ladění v části Kategorie a kliknutím na ni zobrazte všechny dostupné položky nabídky. V seznamu Příkazy se posuňte dolů do Průzkumníka skriptů a přetáhněte ho nahoru do nabídky Ladění windows v předchozí části. Tím se položka nabídky Průzkumníka skriptů zpřístupní při každém spuštění sady Visual Studio .NET.

Pomocí Průzkumníka skriptů můžete zobrazit všechny skripty použité na stránce a otevřít je v editoru kódu. Po otevření Průzkumníka skriptů poklikejte na stránku .aspx, která se právě ladí, a otevřete ji v okně editoru kódu. Proveďte stejnou akci pro všechny ostatní skripty zobrazené v Průzkumníku skriptů. Jakmile jsou všechny skripty otevřené v okně kódu, můžete kód procházet stisknutím klávesy F11 (a pomocí dalších klávesových zkratek pro ladění). Obrázek 3 ukazuje příklad Průzkumníka skriptů. Uvádí aktuální soubor, který se ladí (Demo.aspx), a také dva vlastní skripty a dva skripty dynamicky vložené do stránky ASP.NET AJAX ScriptManager.

Obrázek 3 Průzkumník skriptů poskytuje snadný přístup ke skriptům používaným na stránce. (Kliknutím zobrazíte obrázek v plné velikosti.)

Několik dalších oken můžete také použít k poskytování užitečných informací při procházení kódu na stránce. Pomocí okna Místní hodnoty můžete například zobrazit hodnoty různých proměnných použitých na stránce, okno Okamžité k vyhodnocení konkrétních proměnných nebo podmínek a zobrazení výstupu. Pomocí okna Výstup můžete také zobrazit příkazy trasování zapsané pomocí funkce Sys.Debug.trace (která bude popsána dále v tomto článku) nebo funkce Debug.writeln aplikace Internet Explorer.

Při procházení kódu pomocí ladicího programu můžete na proměnné v kódu najeďte myší a zobrazí se jim přiřazená hodnota. Ladicí program skriptů ale občas nic nezobrazí, když najedete myší na danou proměnnou JavaScriptu. Pokud chcete hodnotu zobrazit, zvýrazněte příkaz nebo proměnnou, kterou se pokoušíte zobrazit v okně editoru kódu, a pak na ni najeďte myší. I když tato technika nefunguje ve všech situacích, v mnoha případech budete moct hodnotu zobrazit, aniž byste se museli dívat do jiného okna ladění, jako je například okno Místní hodnoty.

Videokurz znázorňující některé funkce, které jsou zde popsány, si můžete prohlédnout na adrese http://www.xmlforasp.net.

Ladění pomocí pomocníka pro vývoj pro web

Přestože visual Studio 2008 (a Visual Web Developer Express 2008) jsou velmi schopné ladicí nástroje, existují další možnosti, které se dají použít také a které jsou odlehčené. Jedním z nejnovějších nástrojů, které budou vydány, je Pomocník pro vývoj webu. Nikhil Kothari z Microsoftu (jeden z klíčových ASP.NET architektů AJAX v Microsoftu) napsal tento vynikající nástroj, který může provádět mnoho různých úloh od jednoduchého ladění až po zobrazení požadavků HTTP a zpráv odpovědí.

Pomocník pro vývoj webu lze použít přímo v aplikaci Internet Explorer, což usnadňuje jeho používání. Spustí se výběrem nástroje Pomocník pro vývoj webu z nabídky Internet Exploreru. Nástroj se otevře v dolní části prohlížeče, což je fajn, protože nemusíte prohlížeč opustit, abyste mohli provádět několik úloh, jako jsou požadavky HTTP a protokolování zpráv odpovědí. Obrázek 4 ukazuje, jak pomocník pro vývoj webu vypadá v akci.

Obrázek 4: Pomocník pro vývoj webu (kliknutím zobrazíte obrázek v plné velikosti)

Pomocník pro vývoj webu není nástroj, který byste použili k procházení kódu řádek po řádku jako v sadě Visual Studio 2008. Dá se ale použít k zobrazení výstupu trasování, snadnému vyhodnocení proměnných ve skriptu nebo prozkoumání dat uvnitř objektu JSON. Je také velmi užitečné pro zobrazení dat, která se předávají do a z ASP.NET stránky AJAX a serveru.

Jakmile je pomocník pro vývoj webu otevřený v aplikaci Internet Explorer, musí být povoleno ladění skriptů výběrem možnosti Povolit skript ladění z nabídky pomocníka pro vývoj webu, jak je znázorněno dříve na obrázku 4. To nástroji umožňuje zachytit chyby, ke kterým dochází při spuštění stránky. Umožňuje také snadný přístup k trasování zpráv, které jsou výstupem na stránce. Pokud chcete zobrazit informace o trasování nebo spustit skriptové příkazy k otestování různých funkcí na stránce, vyberte Skript Zobrazit konzolu skriptu z nabídky Pomocník pro vývoj webu. Tím získáte přístup k příkazovému okně a jednoduchému bezprostřednímu okně.

Zobrazení trasovacích zpráv a dat objektů JSON

V bezprostředním okně můžete spouštět příkazy skriptu nebo dokonce načítat nebo ukládat skripty, které se používají k testování různých funkcí na stránce. V příkazovém okně se zobrazí zprávy trasování nebo ladění zapsané zobrazenou stránkou. Výpis 2 ukazuje, jak napsat trasovací zprávu pomocí funkce Debug.writeln aplikace Internet Explorer.

Výpis 2. Zápis zprávy trasování na straně klienta pomocí třídy Debug.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Pokud vlastnost LastName obsahuje hodnotu Doe, Pomocník pro vývoj webu zobrazí zprávu "Jméno osoby: Doe" v příkazovém okně konzoly skriptu (za předpokladu, že bylo povoleno ladění). Pomocník pro vývoj webu také přidá objekt debugService nejvyšší úrovně na stránky, které lze použít k zápisu informací o trasování nebo zobrazení obsahu objektů JSON. Výpis 3 ukazuje příklad použití funkce trasování třídy debugService.

Výpis 3. Použití třídy debugService pomocníka pro vývoj webu k zápisu zprávy trasování.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Příjemnou funkcí třídy debugService je, že bude fungovat i v případě, že v Internet Exploreru není povolené ladění, což usnadňuje přístup k datům trasování vždy, když je spuštěna pomocná rutina pro vývoj webu. Pokud se nástroj nepoužívá k ladění stránky, budou příkazy trasování ignorovány, protože volání window.debugService vrátí hodnotu false.

Třída debugService také umožňuje zobrazit data objektů JSON pomocí okna inspektoru pomocníka pro vývoj webu. Výpis 4 vytvoří jednoduchý objekt JSON obsahující data osob. Po vytvoření objektu se provede volání funkce inspect třídy debugService, která umožní vizuální kontrolu objektu JSON.

Výpis 4. Použití funkce debugService.inspect k zobrazení dat objektu JSON

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Voláním funkce GetPerson() na stránce nebo v bezprostředním okně se zobrazí dialogové okno Inspektoru objektů, jak je znázorněno na obrázku 5. Vlastnosti v objektu lze dynamicky měnit jejich zvýrazněním, změnou hodnoty zobrazené v textovém poli Hodnota a následným kliknutím na odkaz Aktualizovat. Pomocí Inspektoru objektů můžete jednoduše zobrazit data objektů JSON a experimentovat s aplikováním různých hodnot na vlastnosti.

Chyby ladění

Kromě toho, že umožňuje zobrazení dat trasování a objektů JSON, může pomocník pro vývoj webu také pomoct při ladění chyb na stránce. Pokud dojde k chybě, zobrazí se výzva k pokračování na další řádek kódu nebo k ladění skriptu (viz Obrázek 6). Dialogové okno Chyba skriptu zobrazuje kompletní zásobník volání i čísla řádků, abyste mohli snadno zjistit, kde ve skriptu dochází k problémům.

Obrázek 5: Zobrazení objektu JSON pomocí okna Inspektoru objektů (Kliknutím zobrazíte obrázek v plné velikosti.)

Výběr možnosti ladění vám umožní spouštět příkazy skriptu přímo v bezprostředním okně Pomocníka pro vývoj webu, kde můžete zobrazit hodnotu proměnných, zapsat objekty JSON a další možnosti. Pokud se znovu provede stejná akce, která chybu aktivovala, a visual Studio 2008 je na počítači k dispozici, zobrazí se výzva k zahájení ladicí relace, abyste mohli krokovat řádek po řádku kódu, jak je popsáno v předchozí části.

Obrázek 6: Dialogové okno chyby skriptu pomocníka pro vývoj webu (kliknutím zobrazíte obrázek v plné velikosti)

Kontrola zpráv požadavků a odpovědí

Při ladění ASP.NET stránkách AJAX je často užitečné zobrazit zprávy požadavků a odpovědí odeslané mezi stránkou a serverem. Zobrazení obsahu ve zprávách vám umožní zjistit, jestli se předávají správná data a také velikost zpráv. Pomocník pro vývoj webu poskytuje vynikající funkci protokolovacího nástroje zpráv HTTP, která usnadňuje zobrazení dat jako nezpracovaného textu nebo v čitelnějším formátu.

Chcete-li zobrazit ASP.NET zprávy požadavků a odpovědí AJAX, protokolovací nástroj HTTP musí být povolen výběrem http Povolit protokolování HTTP v nabídce Pomocník pro vývoj webu. Po povolení se všechny zprávy odeslané z aktuální stránky dají zobrazit v prohlížeči protokolů HTTP, ke kterému se dostanete tak, že vyberete Http Show HTTP Logs (Zobrazit protokoly HTTP).

I když zobrazení nezpracovaného textu odeslaného v každé zprávě žádosti a odpovědi je určitě užitečné (a možnost v Pomocníku pro vývoj webu), často je jednodušší zobrazit data zprávy v graficky čitelnějším formátu. Po povolení protokolování HTTP a zaprotokolování zpráv lze data zpráv zobrazit poklikáním na zprávu v prohlížeči protokolů HTTP. To vám umožní zobrazit všechna záhlaví přidružená ke zprávě i skutečný obsah zprávy. Obrázek 7 ukazuje příklad zprávy požadavku a odpovědi zobrazené v okně Prohlížeče protokolů HTTP.

Obrázek 7: Použití Prohlížeče protokolů HTTP k zobrazení dat požadavků a zpráv odpovědí (Kliknutím zobrazíte obrázek v plné velikosti.)

Prohlížeč protokolů HTTP automaticky parsuje objekty JSON a zobrazuje je pomocí stromového zobrazení, což umožňuje rychlé a snadné zobrazení dat vlastností objektu. Když se na stránce ASP.NET AJAX používá prvek UpdatePanel, prohlížeč rozdělí každou část zprávy do jednotlivých částí, jak je znázorněno na obrázku 8. Jedná se o skvělou funkci, která umožňuje mnohem snadněji vidět a pochopit, co zpráva obsahuje, v porovnání se zobrazením nezpracovaných dat zprávy.

Obrázek 8: Zpráva odpovědi UpdatePanel zobrazená pomocí Prohlížeče protokolů HTTP. (Kliknutím zobrazíte obrázek v plné velikosti.)

Kromě pomocníka pro vývoj webu je možné k zobrazení zpráv o žádostech a odpovědích použít i několik dalších nástrojů. Další dobrou volbou je Fiddler, který je k dispozici zdarma na adrese http://www.fiddlertool.com. Ačkoli fiddler zde nebude diskutován, je to také dobrá volba, když potřebujete důkladně zkontrolovat záhlaví a data zpráv.

Ladění pomocí Firefoxu a Firebugu

Zatímco Internet Explorer je stále nejpoužívanější prohlížeč, ostatní prohlížeče, jako je Firefox, se staly poměrně populární a jsou používány stále více a více. V důsledku toho budete chtít zobrazit a ladit své ASP.NET stránky AJAX ve Firefoxu i Internet Exploreru, abyste měli jistotu, že vaše aplikace fungují správně. I když Firefox nemůže za účelem ladění přímo spojit se sadou Visual Studio 2008, má rozšíření s názvem Firebug, které se dá použít k ladění stránek. Firebug si můžete zdarma stáhnout na http://www.getfirebug.com.

Firebug poskytuje plnohodnotné ladicí prostředí, které lze použít k krokování kódu řádek po řádku, přístupu ke všem skriptům používaným na stránce, zobrazení struktur MODELU DOM, zobrazení stylů CSS a dokonce ke sledování událostí, ke kterým na stránce dochází. Po instalaci se Firebug dostanete tak, že v nabídce Firefoxu vyberete Nástroje Firebug Otevřít Firebug. Stejně jako pomocník pro vývoj webu se Firebug používá přímo v prohlížeči, i když se dá použít i jako samostatná aplikace.

Jakmile firebug běží, můžete nastavit zarážky na libovolném řádku javascriptového souboru bez ohledu na to, jestli je skript vložený na stránce nebo ne. Pokud chcete nastavit zarážku, nejprve načtěte příslušnou stránku, kterou chcete ladit ve Firefoxu. Po načtení stránky vyberte skript, který chcete ladit, z rozevíracího seznamu Skripty firebug. Zobrazí se všechny skripty, které stránka používá. Zarážku nastavíte tak, že kliknete do šedé oblasti na hlavním panelu na řádku, kam má zarážka přejít, musí být stejně jako v sadě Visual Studio 2008.

Po nastavení zarážky v Firebug můžete provést akci potřebnou ke spuštění skriptu, který je potřeba ladit, jako je kliknutí na tlačítko nebo aktualizace prohlížeče, aby se aktivovala událost onLoad. Provádění se automaticky zastaví na řádku obsahujícím zarážku. Obrázek 9 ukazuje příklad zarážky, která byla aktivována v Firebug.

Obrázek 9: Zpracování zarážek v Firebug (Kliknutím zobrazíte obrázek v plné velikosti.)

Po dosažení zarážky můžete pomocí tlačítek se šipkami krokovat do kódu, krokovat přes kód nebo z kódu vystupovat. Při procházení kódu se v pravé části ladicího programu zobrazují proměnné skriptu, které vám umožní zobrazit hodnoty a procházet k podrobnostem objektů. Firebug také obsahuje rozevírací seznam Zásobník volání, který zobrazuje kroky spuštění skriptu, které vedly až k aktuálnímu laděném řádku.

Firebug také obsahuje okno konzoly, které lze použít k testování různých příkazů skriptu, vyhodnocení proměnných a zobrazení výstupu trasování. Zobrazí se kliknutím na kartu Konzola v horní části okna Firebug. Laděnou stránku lze také "zkontrolovat", aby se zobrazila struktura a obsah objektu DOM kliknutím na kartu Zkontrolovat. Když najedete myší na různé prvky DOM zobrazené v okně inspektoru, zvýrazní se příslušná část stránky, abyste snadno viděli, kde se prvek na stránce používá. Hodnoty atributů přidružené k danému prvku lze změnit "živě" a experimentovat s použitím různých šířek, stylů atd. do elementu. Jedná se o pěknou funkci, která vám ušetří, abyste nemuseli neustále přepínat mezi editorem zdrojového kódu a prohlížečem Firefox, abyste viděli, jak jednoduché změny ovlivňují stránku.

Obrázek 10 ukazuje příklad použití inspektoru DOM k vyhledání textového pole s názvem txtCountry na stránce. Firebug inspector lze také použít k zobrazení stylů CSS použitých na stránce a událostí, ke kterým dochází, jako je sledování pohybu myši, kliknutí na tlačítko a další.

Obrázek 10: Použití inspektoru DOM firebug (Kliknutím zobrazíte obrázek v plné velikosti.)

Firebug nabízí odlehčený způsob rychlého ladění stránky přímo ve Firefoxu a také vynikající nástroj pro kontrolu různých prvků na stránce.

Podpora ladění v ASP.NET AJAX

Knihovna ASP.NET AJAX obsahuje mnoho různých tříd, které lze použít ke zjednodušení procesu přidávání funkcí AJAX do webové stránky. Tyto třídy můžete použít k vyhledání prvků na stránce a manipulaci s nimi, přidání nových ovládacích prvků, volání webových služeb a dokonce i zpracování událostí. Knihovna ASP.NET AJAX obsahuje také třídy, které lze použít k vylepšení procesu ladění stránek. V této části se seznámíte s třídou Sys.Debug a zjistíte, jak ji lze použít v aplikacích.

Použití třídy Sys.Debug

Třídu Sys.Debug (javascriptovou třídu umístěnou v oboru názvů Sys) lze použít k provádění několika různých funkcí, včetně zápisu výstupu trasování, provádění kontrolních výrazů kódu a vynucení selhání kódu, aby bylo možné ladit. Je široce používán v ladicích souborech knihovny ASP.NET AJAX (ve výchozím nastavení nainstalovaných na adrese C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0) k provádění podmíněných testů (nazývaných kontrolní výrazy), které zajišťují správné předávání parametrů funkcím, objekty obsahují očekávaná data a zapisují příkazy trasování.

Třída Sys.Debug zveřejňuje několik různých funkcí, které lze použít ke zpracování trasování, kontrolních výrazů kódu nebo selhání, jak je znázorněno v tabulce 1.

Tabulka 1. Funkce třídy Sys.Debug

Název funkce	Popis
assert(podmínka, zpráva, displayCaller)	Ověří, že parametr podmínky je true. Pokud testovaná podmínka má hodnotu false, použije se okno se zprávou k zobrazení hodnoty parametru zprávy. Pokud je parametr displayCaller true, metoda zobrazí také informace o volajícím.
clearTrace()	Vymaže výstup příkazů z trasovacích operací.
fail(message)	Způsobí, že program zastaví provádění a prolomí ladicí program. K poskytnutí důvodu selhání lze použít parametr zprávy.
trace(zpráva)	Zapíše parametr zprávy do výstupu trasování.
traceDump(objekt, název)	Výstup dat objektu v čitelnelném formátu. Parametr name lze použít k poskytnutí popisku pro výpis trasování. Všechny dílčí objekty v rámci objektu, který se vypisuje, budou ve výchozím nastavení zapsány.

Trasování na straně klienta se dá použít podobným způsobem jako funkce trasování, které jsou k dispozici v ASP.NET. Umožňuje snadno zobrazit různé zprávy bez přerušení toku aplikace. Výpis 5 ukazuje příklad použití funkce Sys.Debug.trace k zápisu do protokolu trasování. Tato funkce jednoduše převezme zprávu, která by měla být zapsána jako parametr.

Výpis 5. Pomocí funkce Sys.Debug.trace.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Pokud spustíte kód zobrazený ve výpisu 5, nezobrazí se na stránce žádný výstup trasování. Jediný způsob, jak to zjistit, je použít okno konzoly dostupné v sadě Visual Studio .NET, Pomocník pro vývoj webu nebo Firebug. Pokud chcete zobrazit výstup trasování na stránce, budete muset přidat značku TextArea a zadat jí ID TraceConsole, jak je znázorněno dále:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Všechny příkazy Sys.Debug.trace na stránce budou zapsány do TraceConsole TextArea.

V případech, kdy chcete zobrazit data obsažená v objektu JSON, můžete použít funkci traceDump třídy Sys.Debug. Tato funkce přebírá dva parametry, včetně objektu, který by měl být vypsaný do konzoly trasování, a názvu, který lze použít k identifikaci objektu ve výstupu trasování. Výpis 6 ukazuje příklad použití funkce traceDump.

Výpis 6. Pomocí funkce Sys.Debug.traceDump.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Obrázek 11 ukazuje výstup volání funkce Sys.Debug.traceDump. Všimněte si, že kromě zápisu dat objektu Person také zapisuje data dílčího objektu Address.

Kromě trasování lze třídu Sys.Debug použít také k provádění kontrolních výrazů kódu. Kontrolní výrazy slouží k otestování splnění konkrétních podmínek, když je aplikace spuštěná. Ladicí verze skriptů knihovny ASP.NET AJAX obsahují několik příkazů assert pro testování různých podmínek.

Výpis 7 ukazuje příklad použití funkce Sys.Debug.assert k otestování podmínky. Kód před aktualizací objektu Person testuje, zda má objekt Address hodnotu null.

Obrázek 11: Výstup funkce Sys.Debug.traceDump (Kliknutím zobrazíte obrázek v plné velikosti.)

Výpis 7. Pomocí funkce debug.assert

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Předají se tři parametry, včetně podmínky k vyhodnocení, zprávy, která se zobrazí, pokud kontrolní výraz vrátí hodnotu false a zda se mají zobrazit informace o volajícím. V případech, kdy kontrolní výraz selže, se zobrazí zpráva a informace o volajícím, pokud byl třetí parametr pravdivý. Obrázek 12 ukazuje příklad dialogového okna selhání, které se zobrazí, pokud kontrolní výraz zobrazený ve výpisu 7 selže.

Poslední funkcí, která se má pokrýt, je Sys.Debug.fail. Pokud chcete vynutit selhání kódu na určitém řádku ve skriptu, můžete přidat volání Sys.Debug.fail místo příkazu ladicího programu, který se obvykle používá v javascriptových aplikacích. Funkce Sys.Debug.fail přijímá parametr s jedním řetězcem, který představuje důvod selhání, jak je znázorněno dále:

Sys.Debug.fail("My forced failure of script.");

Obrázek 12: Chybová zpráva Sys.Debug.assert (Kliknutím zobrazíte obrázek v plné velikosti.)

Při výskytu příkazu Sys.Debug.fail při spuštění skriptu se v konzole ladicí aplikace, jako je Visual Studio 2008, zobrazí hodnota parametru zprávy a zobrazí se výzva k ladění aplikace. Jeden případ, kdy to může být docela užitečné, je, když nemůžete nastavit zarážku v sadě Visual Studio 2008 na vložený skript, ale chcete, aby se kód zastavil na konkrétním řádku, abyste mohli zkontrolovat hodnotu proměnných.

Vysvětlení vlastnosti ScriptMode ovládacího prvku ScriptManager

Knihovna ASP.NET AJAX obsahuje ladicí a vydané verze skriptů nainstalované ve výchozím nastavení C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0. Ladicí skripty jsou pěkně formátované, snadno čitelné a mají několik volání Sys.Debug.assert rozptýlených po celém svém, zatímco skripty vydané verze mají prázdné znaky odstraněné a používají třídu Sys.Debug střídmě, aby se minimalizovala jejich celková velikost.

Ovládací prvek ScriptManager přidaný na ASP.NET stránky AJAX čte atribut debug prvku kompilace v web.config určit, které verze skriptů knihovny se mají načíst. Můžete ale určit, jestli se načtou ladicí nebo vydané skripty (skripty knihovny nebo vlastní skripty) změnou vlastnosti ScriptMode. ScriptMode přijímá výčtu ScriptMode, jejíž členy patří Auto, Debug, Release a Inherit.

ScriptMode má výchozí hodnotu Auto, což znamená, že ScriptManager zkontroluje atribut ladění v web.config. Je-li ladění false ScriptManager načte verzi vydané ASP.NET skripty knihovny AJAX. Pokud je ladění true, načte se ladicí verze skriptů. Změna vlastnosti ScriptMode na Release nebo Debug vynutí ScriptManager načtení příslušných skriptů bez ohledu na to, jakou hodnotu má atribut debug v web.config. Výpis 8 ukazuje příklad použití ovládacího prvku ScriptManager k načtení ladicích skriptů z knihovny ASP.NET AJAX.

Výpis 8. Načítání ladicích skriptů pomocí scriptmanageru.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

Můžete také načíst různé verze (ladění nebo vydání) vlastních skriptů pomocí vlastnosti ScriptManager ScriptManager a komponenty ScriptReference, jak je znázorněno ve výpisu 9.

Výpis 9. Načítají se vlastní skripty pomocí scriptmanageru.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

Poznámka

Pokud načítáte vlastní skripty pomocí komponenty ScriptReference, musíte na dokončení načítání skriptu upozornit správce skriptů přidáním následujícího kódu do dolní části skriptu:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Kód zobrazený ve výpisu 9 sděluje ScriptManagerovi, aby hledal ladicí verzi skriptu Person, takže bude automaticky hledat Person.debug.js místo Person.js. Pokud se soubor Person.debug.js nenajde, vyvolá se chyba.

V případech, kdy chcete načíst ladicí nebo vydanou verzi vlastního skriptu na základě hodnoty vlastnosti ScriptMode nastavené v ovládacím prvku ScriptManager, můžete vlastnost ScriptMode ovládacího prvku ScriptReference nastavit na Hodnotu Inherit. To způsobí, že se načte správná verze vlastního skriptu na základě vlastnosti ScriptManager ScriptMode, jak je znázorněno v výpisu 10. Protože Vlastnost ScriptMode ovládacího prvku ScriptManager je nastavena na Ladit, bude Person.debug.js skript načten a použit na stránce.

Výpis 10. Dědění ScriptMode ze ScriptManager pro vlastní skripty.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

Pomocí vlastnosti ScriptMode můžete snadněji ladit aplikace a zjednodušit celkový proces. Skripty vydané verze knihovny ASP.NET AJAX jsou poměrně obtížné procházet a číst, protože formátování kódu bylo odebráno, zatímco ladicí skripty jsou formátovány speciálně pro účely ladění.

Závěr

Technologie ASP.NET AJAX společnosti Microsoft poskytuje pevný základ pro vytváření aplikací s podporou jazyka AJAX, které mohou zlepšit celkové prostředí koncového uživatele. Stejně jako u jiných programovacích technologií se však jistě objeví chyby a další problémy s aplikacemi. Znalost různých dostupných možností ladění může ušetřit spoustu času a vést ke stabilnějšímu produktu.

V tomto článku jste se seznámili s několika různými technikami ladění ASP.NET stránek AJAX, včetně Internet Exploreru se sadou Visual Studio 2008, pomocníka pro vývoj webu a nástroje Firebug. Tyto nástroje mohou zjednodušit celkový proces ladění, protože můžete přistupovat k datům proměnných, procházet kód řádek po řádku a zobrazit příkazy trasování. Kromě různých nástrojů ladění popsaných jste také viděli, jak lze třídu Sys.Debug knihovny ASP.NET AJAX použít v aplikaci a jak lze třídu ScriptManager použít k načtení ladicích nebo vydaných verzí skriptů.

Životopis

Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web Services) je instruktorem vývoje .NET a konzultantem architektury na www.interfacett.com Interface Technical Training (Interface Technical Training). Dan založil web XML for ASP.NET Developers (www.XMLforASP.NET), je v kanceláři mluvčího INETA a přednáší na několika konferencích. Dan spoluvytvářel profesionální Windows DNA (Wrox), ASP.NET: Tipy, tutorialy a kód (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks a vytvořený XML for ASP.NET Developers (Sams). Když nepíše kód, články nebo knihy, baví ho psaní a nahrávání hudby a hraní golfu a basketbalu se svou ženou a dětmi.

Scott Cate pracuje s webovými technologiemi microsoftu od roku 1997 a je prezidentem myKB.com (www.myKB.com), kde se specializuje na psaní ASP.NET aplikací zaměřených na softwarová řešení znalostní báze Knowledge Base. Scotta můžete kontaktovat e-mailem na adrese scott.cate@myKB.com nebo na jeho blogu na ScottCate.com

Předchozí