17 – úvod do ladění

 
 

 

Ladění je proces hledání a odstraňování chyb ve stránkách kódu. Tato kapitola ukazuje některé nástroje a techniky používané pro ladění a analýzu webu.

Co se naučíte:

V této kapitole budou představeny následující funkce technologie ASP.NET a nástroje sady WebMatrix (a další nástroje):

Důležitým aspektem odstraňování chyb a problémů v kódu je snaha jim v první řadě předcházet. Toho je možné docílit vložením částí kódů, které mohou způsobit chybu, do bloků try/catch. Další informace najdete v části věnované zpracování chyb v kapitole 2 – úvod do programování webů ASP.NET s použitím syntaxe Razor. Informace o ladění stránek ASP.NET se syntaxí Razor pomocí integrovaného ladicího programu v sadě Visual Studio získáte v článku Programování webových stránek ASP.NET v sadě Visual Studio.

 

 

Zobrazení informací o serveru s použitím pomocné třídy ServerInfo

Pomocná třída ServerInfo (Informace o serveru) je diagnostický nástroj poskytující přehled informací o prostředí webového serveru, na kterém je stránka hostována. Zobrazuje také informace o požadavku protokolu HTTP, který byl zaslán při vyžádání stránky prohlížečem. Pomocná třída ServerInfo zobrazuje identitu aktuálního uživatele, typ prohlížeče, který požadavek zaslal, a další informace. Takovéto informace pomáhají při řešení běžných problémů.

  1. Vytvořte novou webovou stránku s názvem ServerInfo.cshtml.
  2. Na konec stránky, těsně před koncovou značku </body> přidejte kód @ServerInfo.GetHtml(): 
    <!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
   @ServerInfo.GetHtml() 
    </body> 
</html>

    Kód pomocné třídy ServerInfo můžete vložit na libovolné místo ve stránce. Pokud jej ale přidáte na konec stránky, bude výstup kódu oddělen od ostatního obsahu stránky a tím pádem snáze čitelný.

    Poznámka   Předtím, než stránky přesunete na produkční server, z nich odstraňte veškerý diagnostický kód. To platí pro pomocnou třídu ServerInfo (Informace o serveru) a také pro všechny další diagnostické techniky, které vyžadují přidání kódu do stránky. Není vhodné, aby návštěvníci webu viděli informace, jako jsou název serveru, uživatelská jména, cesty na webu a další podrobné informace, protože informace tohoto typu mohou využít osoby se zlými úmysly.
  3. Stránku uložte a spusťte ji v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.)

    kap.14_ladění-1

    Pomocná třída ServerInfo (Informace o serveru) na stránce zobrazí čtyři tabulky s informacemi:

    úplný popis všech informací o serveru a požadavku sahá nad rámec této kapitoly, ale je zřejmé, že pomocná třída ServerInfo (Informace o serveru) vrací velké množství diagnostických informací. Více informací o hodnotách, které pomocná třída ServerInfo vrací, najdete v článku Rozpoznané proměnné prostředí na webu Microsoft TechNet a Serverové proměnné služby IIS na webu MSDN.

Zobrazení hodnot stránky vložením výrazů pro výstup

Další možností, jak zjistit, co se v kódu děje, je vložit do stránky výrazy pro výstup. Jak již víte, hodnotu proměnné můžete přímo poslat na výstup tak, že do stránky přidáte výrazy jako například @myVariable nebo @(subTotal * 12). Tyto výrazy pro výstup můžete pro účely ladění vložit na strategická místa kódu. Díky tomu budete po spuštění stránky moci sledovat hodnoty klíčových proměnných nebo výsledky výpočtů. Až budete s laděním hotovi, můžete výrazy odstranit, nebo je označit jako komentáře. Tento postup ukazuje typický způsob ladění stránky s použitím vložených výrazů.

  1. Vytvořte novou stránku prostředí WebMatrix s názvem OutputExpression.cshtml.
  2. Obsah stránky nahraďte následujícím kódem: 
    <!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body>    
 
    @{ 
        var weekday = DateTime.Now.DayOfWeek; 
        // Přidání jednoho dne k aktuálnímu dnu v týdnu pro účely testování 
        if(weekday.ToString() != "Saturday") { 
            // Pokud den týdne není sobota, jednoduše přidáme jeden den. 
            weekday = weekday + 1;  
        } 
        else { 
            // Pokud den týdne je sobota, resetujeme den na hodnotu 0, neboli neděli. 
            weekday = 0;  
        } 
        // Převod dne týdne na řetězcovou hodnotu pro použití v příkazu switch 
        var weekdayText = weekday.ToString();  
 
        var greeting = ""; 
         
        switch(weekdayText)  
        {  
            case "Monday": 
                greeting = "Ok, it's a marvelous Monday.";  
                break;  
            case "Tuesday": 
                greeting = "It's a tremendous Tuesday."; 
                break;  
            case "Wednesday": 
                greeting = "Wild Wednesday is here!"; 
                break;  
            case "Thursday": 
                greeting = "All right, it's thrifty Thursday."; 
                break; 
            case "Friday": 
                greeting = "It's finally Friday!"; 
                break; 
            case "Saturday": 
                greeting = "Another slow Saturday is here."; 
                break; 
            case "Sunday": 
                greeting = "The best day of all: serene Sunday."; 
                break; 
            default: 
                break;  
        } 
    } 
     
    <h2>@greeting</h2> 
 
    </body> 
</html>

    V tomto příkladu je pomocí příkazu switch kontrolována hodnota proměnné weekday (den v týdnu) a poté je zobrazena různá zpráva podle toho, jaký je právě den v týdnu. V tomto příkladu je v bloku příkazu if v rámci prvního bloku kódu záměrně změněn den v týdnu přidáním jednoho dne k aktuální hodnotě proměnné weekday (den v týdnu). Jedná se o chybu, která byla do kódu vložena pro účely této ukázky.

  3. Stránku uložte a spusťte ji v prohlížeči.

    Stránka zobrazí zprávu pro nesprávný den v týdnu. Bez ohledu na to, jaký je ve skutečnosti den v týdnu, je vždy zobrazena zpráva určená pro následující den. I když v tomto případě víme, proč je zpráva chybná (protože kód úmyslně nastavuje nesprávnou hodnotu dne), v praxi je často obtížné zjistit, na jakém místě v kódu dochází k chybě. Abyste mohli stránku odladit, musíte zjistit, co se děje s hodnotami klíčových objektů a proměnných, jako je například proměnná weekday (den v týdnu).

  4. Přidejte výrazy pro výstup vložením kódu @weekday na dvě místa označená v kódu komentářem. Tyto výrazy pro výstup zobrazí hodnoty, které proměnná bude na tomto místě mít v průběhu vykonávání kódu. 
         var weekday = DateTime.Now.DayOfWeek; 
    // Zobrazení původní hodnoty proměnné weekday  
    @weekday 
     
    // Přidání jednoho dne k aktuálnímu dnu v týdnu pro účely testování 
    if(weekday.ToString() != "Saturday") { 
        // Pokud den týdne není sobota, jednoduše přidáme jeden den. 
        weekday = weekday + 1;  
    } 
    else { 
        // Pokud den týdne je sobota, resetujeme den na hodnotu 0, neboli neděli. 
        weekday = 0;  
    } 
     
    // Zobrazení aktualizované hodnoty proměnné weekday 
    @weekday 
     
    // Převod dne týdne na řetězcovou hodnotu pro použití v příkazu switch 
    var weekdayText = weekday.ToString();
  5. Stránku uložte a spusťte ji v prohlížeči.

    Stránka nejdříve zobrazí skutečný den v týdnu, pak aktualizovaný den v týdnu v důsledku přidání jednoho dne a poté výslednou zprávu z příkazu switch. Výstupy těchto dvou výrazů pracujících s proměnnou (@weekday) nejsou oddělené žádnými mezerami, protože jsme do výstupu nepřidali žádné značky <p> jazyka HTML. Tyto výrazy jsou určeny pouze pro testování.

    kap.14_ladění-2

    Nyní vidíme, kde se chyba nachází. Když v kódu poprvé zobrazíme proměnnou weekday, ukazuje správný den. Když ji zobrazíme podruhé, za blokem if v kódu, je hodnota o jeden den posunutá, a proto víme, že se něco stalo mezi prvním a druhým výskytem proměnné weekday. Pokud by se jednalo o skutečnou chybu, takovýto přístup by pomohl zúžit místo v kódu, na kterém se problém vyskytuje.

  6. Opravte kód ve stránce tak, že odstraníte dva přidané výrazy pro výstup spolu s kódem, který mění den v týdnu. Zbylý kompletní blok kódu by měl vypadat jako v následujícím příkladu:
    @{ 
    var weekday = DateTime.Now.DayOfWeek; 
    var weekdayText = weekday.ToString();  
 
    var greeting = ""; 
         
    switch(weekdayText)  
    {  
        case "Monday": 
            greeting = "Ok, it's a marvelous Monday.";  
            break;  
        case "Tuesday": 
            greeting = "It's a tremendous Tuesday."; 
            break;  
        case "Wednesday": 
            greeting = "Wild Wednesday is here!"; 
            break;  
        case "Thursday": 
            greeting = "All right, it's thrifty Thursday."; 
            break; 
        case "Friday": 
            greeting = "It's finally Friday!"; 
            break; 
        case "Saturday": 
            greeting = "Another slow Saturday is here."; 
            break; 
        case "Sunday": 
            greeting = "The best day of all: serene Sunday."; 
            break; 
        default: 
            break;  
    } 
}
  7. Spusťte stránku v prohlížeči. Tentokrát bude zobrazena správná zpráva odpovídající skutečnému dnu v týdnu.

    kap.14_ladění-3

Zobrazení hodnot objektů s použitím pomocné třídy ObjectInfo

Pomocná třída ObjectInfo (Informace o objektu) zobrazí typ a hodnotu všech objektů, které jí předáte. Umožňuje zobrazit hodnoty proměnných a objektů v kódu (k čemuž jsme v předchozím příkladu použili výrazy pro výstup) a navíc umožňuje zobrazit informace o datovém typu objektů.

  1. Otevřete soubor s názvem OutputExpressions.cshtml vytvořený v předchozí části.
  2. Veškerý kód ve stránce nahraďte následujícím blokem kódu:
    <!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
    @{ 
      var weekday = DateTime.Now.DayOfWeek; 
      @ObjectInfo.Print(weekday) 
      var weekdayText = weekday.ToString();  
   
      var greeting = ""; 
   
      switch(weekdayText)  
      {  
          case "Monday": 
              greeting = "Ok, it's a marvelous Monday.";  
              break;  
          case "Tuesday": 
              greeting = "It's a tremendous Tuesday."; 
              break;  
          case "Wednesday": 
              greeting = "Wild Wednesday is here!"; 
              break;  
          case "Thursday": 
              greeting = "All right, it's thrifty Thursday."; 
              break; 
          case "Friday": 
              greeting = "It's finally Friday!"; 
              break; 
           case "Saturday": 
              greeting = "Another slow Saturday is here."; 
              break; 
           case "Sunday": 
              greeting = "The best day of all: serene Sunday."; 
              break; 
          default: 
              break;  
      } 
    } 
    @ObjectInfo.Print(greeting) 
    <h2>@greeting</h2> 
 
    </body> 
</html>
  3. Stránku uložte a spusťte ji v prohlížeči.

    kap.14_ladění-4

    V tomto příkladu pomocná třída ObjectInfo (Informace o objektu) zobrazí dvě položky:

    Pro složitější objekty pomocná třída ObjectInfo může zobrazit více informací — v zásadě platí, že může zobrazit typy a hodnoty všech vlastností objektu.

Použití ladicích nástrojů

Kromě zobrazení informací na stránce, které napomáhají při jejím ladění, můžete také použít nástroje poskytující informace o průběhu vykonávání stránek. V této části si ukážeme, jak používat nejoblíbenější diagnostické nástroje pro webové stránky a jak používat některé nástroje prostředí WebMatrix, které také pomáhají při ladění webů.

Nástroje pro vývojáře v aplikaci Internet Explorer

Nástroje pro vývojáře v aplikaci Internet Explorer představují sadu webových nástrojů integrovaných v aplikaci Internet Explorer 8. (Do předchozích verzí aplikace Internet Explorer si tyto nástroje může nainstalovat ze stránky Internet Explorer Developer Toolbar (Panel nástrojů pro vývojáře v aplikaci Internet Explorer) na webu služby Stažení softwaru.) Tento nástroj neumožňuje ladit konkrétně kód ASP.NET, ale může být velmi užitečný při ladění kódu HTML, CSS nebo skriptů, včetně kódu značkovacího jazyka a skriptů dynamicky generovaného kódem ASP.NET.

Tento postup poskytuje představu o tom, jak s Nástroji pro vývojáře aplikace Internet Explorer pracovat. Výchozím předpokladem je, že budete pracovat s aplikací Internet Explorer 8.

  1. V aplikaci Internet Explorer přejděte na veřejně přístupnou webovou stránku, například www.microsoft.com.
  2. V nabídce Nástroje klikněte na položku Developer Tools (Nástroje pro vývojáře).
  3. Klikněte na kartu HTML, otevřete element <html> a poté otevřete element <body>. V okně budou zobrazeny všechny značky obsažené v elementu <body>.
  4. Když v pravém podokně kliknete na kartu Attributes (Atributy), budete si moci prohlédnout atributy značky <body>:

    kap.14_ladění-6

  5. Když v pravém podokně kliknete na kartu Style (Styl), uvidíte, jaké styly CSS jsou použity v těle této stránky.

    Více informací o Nástrojích pro vývojáře v aplikaci Internet Explorer vám poskytne článek Seznámení s Nástroji pro vývojáře v aplikaci Internet Explorer na webu MSDN.

Firebug

Firebug je doplněk pro aplikaci Mozilla Firefox, pomocí něhož je možné kontrolovat kód značkovacího jazyka HTML a šablon stylů CSS, ladit klientské skripty nebo prohlížet informace uložené v souborech cookie a další informace o stránce. Doplněk Firebug si můžete nainstalovat z webu Firebug (http://getfirebug.com/). Stejně jako Nástroje pro vývojáře v aplikaci Internet Explorer ani tento nástroj neumožňuje ladit konkrétně kód ASP.NET, ale může být velmi užitečný při zkoumání kódu značkovacího jazyka HTML a dalších elementů ve stránce, včetně těch, které kód ASP.NET generuje dynamicky.

Tento postup ukazuje jen část z toho, k čemu je možné doplněk Firebug po instalaci používat.

  1. V aplikaci Firefox přejděte na web www.microsoft.com.
  2. V nabídce Nástroje klikněte na položku Firebug a poté klikněte na příkaz Open Firebug in New Window (Otevřít doplněk Firebug v novém okně).
  3. V hlavním okně doplňku Firebug klikněte na kartu HTML a poté v levém podokně rozbalte uzel <html>.
  4. Vyberte značku <body> a poté klikněte na kartu Style (Styl) v pravém podokně. Firebug zobrazí informace o stylech na webu společnosti Microsoft.

    kap.14_ladění–5

    Firebug nabízí mnoho možností pro úpravy a ověřování kódu HTML a šablon stylů CSS a také pro ladění a vylepšování skriptů. Na kartě Net (Síť) můžete analyzovat síťovou komunikaci mezi serverem a webovou stránkou. Můžete například profilovat stránku a ověřit si, jak dlouho trvá stažení veškerého jejího obsahu do prohlížeče. Více informací o doplňku Firebug najdete na hlavním webu doplňku Firebug a na wikiwebu s dokumentací pro doplněk Firebug.

Další materiály

Online dokumentace na webu MSDN

Serverové proměnné služby IIS

Ladění pomocí sady Visual Studio

Programování webových stránek ASP.NET v sadě Visual Studio

Online dokumentace na webu Technet

Rozpoznané proměnné prostředí

Nástroje pro vývojáře v aplikaci Internet Explorer

Doplněk Firebug pro webové vývojáře