Použití Page Inspectoru v sadě Visual Studio 2012

Článek
07/16/2024

V tomto praktickém cvičení zjistíte nový nástroj pro vyhledání a opravu problémů s webovými stránkami v sadě Visual Studio – Page Inspector.

Page Inspector je nový nástroj, který do sady Visual Studio přináší diagnostické nástroje prohlížeče a poskytuje integrované prostředí mezi prohlížečem, ASP.NET a zdrojovým kódem. Vykresluje webovou stránku (HTML, webové formuláře, ASP.NET MVC nebo webové stránky) přímo v integrovaném vývojovém prostředí sady Visual Studio a umožňuje prozkoumat zdrojový kód i výsledný výstup. Page Inspector umožňuje snadno rozkládat web, rychle vytvářet stránky od základů a rychle diagnostikovat problémy.

V současné době máme řadu webových architektur, které vytvářejí flexibilní a škálovatelné weby včas, například ASP.NET MVC a WebForms. Na druhou stranu je obtížnější najít problémy na stránkách, protože integrované vývojové prostředí nepodporuje zobrazení návrháře na stránkách založených na šablonách a dynamickém obsahu. Proto musí být tyto weby otevřeny v prohlížeči, aby viděly, jak se zobrazují uživateli.

Weboví vývojáři používají externí nástroje k vyhledání problémů, které se pravidelně spouštějí v prohlížeči. Pak se vrátí do integrovaného vývojového prostředí (IDE) a začnou opravovat. Tato aktivita mezi integrovaným vývojovým prostředím (IDE), prohlížečem a nástroji pro profilaci může být neefektivní a někdy vyžaduje nové nasazení a čištění mezipaměti pokaždé, když chcete reprodukovat problém.

Page Inspector přemostivá mezeru ve vývoji webu mezi klientem (nástroji prohlížeče) a serverem (ASP.NET a zdrojovým kódem), protože spojuje nejlepší z obou světů pomocí kombinované sady funkcí.

Pomocí Page Inspectoru můžete vidět, které prvky ve zdrojových souborech (včetně kódu na straně serveru) vytvořily kód HTML, který se má vykreslit v prohlížeči. Page Inspector také umožňuje upravit vlastnosti CSS a atributy elementu DOM, aby se změny projevily okamžitě v prohlížeči.

Toto praktické cvičení vás provede funkcemi Page Inspectoru a ukáže vám, jak je můžete použít k řešení problémů ve webových aplikacích. Toto cvičení obsahuje dvě cvičení, která používají podobné toky, ale cílí na různé technologie. Pokud jste vývojář ASP.NET MVC, postupujte podle cvičení; Pokud jste vývojář WebForms, postupujte podle cvičení 2..

Toto cvičení vás provede vylepšeními a novými funkcemi, které jsme dříve popsali použitím menších změn ukázkové webové aplikace poskytované ve složce Source.

Cíle

V tomto praktickém cvičení se naučíte:

Dekompisování webu pomocí nástroje Page Inspector
Kontrola a zobrazení náhledu změn stylů CSS pomocí Page Inspectoru
Detekce a oprava problémů na webových stránkách pomocí nástroje Page Inspector

Požadavky

K dokončení tohoto cvičení musíte mít následující položky:

Microsoft Visual Studio Express 2012 pro web nebo superior (pokyny k instalaci najdete v dodatku A ).
Internet Explorer 9 nebo vyšší

Cvičení

Toto praktické cvičení zahrnuje následující cvičení:

Cvičení 1: Použití nástroje Page Inspector v projektech ASP.NET MVC
Cvičení 2: Použití nástroje Page Inspector v projektech WebForms

Poznámka:

Každé cvičení je doprovázeno počátečním řešením umístěným ve složce Začátek cvičení, které umožňuje sledovat každé cvičení nezávisle na ostatních. Ve zdrojovém kódu pro cvičení najdete také koncovou složku obsahující řešení sady Visual Studio s kódem, který je výsledkem dokončení kroků v odpovídajícím cvičení. Tato řešení můžete použít jako doprovodné materiály, pokud potřebujete další pomoc při práci v tomto praktickém cvičení.

Odhadovaná doba dokončení tohoto cvičení: 30 minut.

Cvičení 1: Použití nástroje Page Inspector v projektech ASP.NET MVC

V tomto cvičení se dozvíte, jak pomocí Page Inspectoru zobrazit náhled a ladit řešení ASP.NET MVC 4. Nejprve provedete krátké kolo kolem nástroje, abyste se naučili funkce, které usnadňují proces ladění webu. Pak budete pracovat na webové stránce, která obsahuje problémy se styly. Dozvíte se, jak pomocí Page Inspectoru najít zdrojový kód, který vygeneruje problém, a opravit ho.

Úkol 1 – kontrola stránky

V tomto úkolu se dozvíte, jak používat Page Inspector v kontextu projektu ASP.NET MVC 4, který zobrazuje galerii fotek.

Otevřete řešení Begin umístěné ve složce Source/Ex1-MVC4/Begin/.
1. Než budete pokračovat, budete si muset stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že kliknete na nabídku Projekt a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , aby se stáhly chybějící balíčky.
3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.
  
  Poznámka:
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
V Průzkumník řešení vyhledejte zobrazení Index.cshtml ve složce projektu /Views/Home, klikněte na něj pravým tlačítkem myši a vyberte Zobrazit v nástroji Page Inspector.

Výběr souboru pro náhled v nástroji Page Inspector
V okně Page Inspector se zobrazí adresa URL /Home/Index namapovaná na vybrané zdrojové zobrazení.

První kontakt s nástrojem Page Inspector

Nástroj Page Inspector je integrovaný v prostředí sady Visual Studio. Inspektor obsahuje vložený prohlížeč spolu s výkonným profilerem HTML. Všimněte si, že řešení nemusíte spouštět, abyste viděli, jak stránky vypadají.

Poznámka:

Pokud je šířka prohlížeče Page Inspector menší než šířka otevřené stránky, nezobrazí se stránka správně. V takovém případě upravte šířku nástroje Page Inspector.
Klikněte na kartu Soubory v nástroji Page Inspector.

Zobrazí se všechny zdrojové soubory, které vytváří indexovou stránku. Tato funkce pomáhá identifikovat všechny prvky na první pohled, zejména při práci s částečnými zobrazeními a šablonami. Všimněte si, že pokud kliknete na odkazy, můžete také otevřít všechny soubory.

Karta Soubory
Klikněte na tlačítko Přepnout režim kontroly, které se nachází na levé straně karet.

Tento nástroj vám umožní vybrat libovolný prvek stránky a zobrazit jeho kód HTML a Razor.

Přepnout režim kontroly
V prohlížeči Page Inspector přesuňte ukazatel myši na prvky stránky. Když přesunete ukazatel myši na libovolnou část vykreslené stránky, zobrazí se typ prvku a v editoru sady Visual Studio se zvýrazní odpovídající zdrojový kód nebo kód.

Režim kontroly v akci

Poznámka:

Ne maximalizovat okno Page Inspector nebo neuvidíte kartu náhledu se zdrojovým kódem. Pokud po maximalizaci kliknete na prvek v nástroji Page Inspector, zobrazí se zdrojový kód výběru, ale skryje okno Kontrola stránky.

Pokud věnujte pozornost souboru Index.cshtml , všimnete si, že část zdrojového kódu, která generuje vybraný prvek, je zvýrazněná. Tato funkce usnadňuje úpravy dlouhých zdrojových souborů a poskytuje přímý a rychlý způsob přístupu k kódu.

Kontrola prvků
Kliknutím na tlačítko Přepnout režim kontroly ( ) zakažte kurzor.
Výběrem karty HTML zobrazíte kód HTML vykreslený v prohlížeči Page Inspector.
V kódu HTML vyhledejte položku seznamu s odkazem Koala a vyberte ji.

Všimněte si, že když vyberete kód, odpovídající výstup se automaticky zvýrazní v prohlížeči. Tato funkce je užitečná k tomu, abyste viděli, jak se na stránce vykresluje blok HTML.

Výběr elementu HTML na stránce
Kliknutím na tlačítko Přepnout režim kontroly povolíte režim kontroly a kliknete na navigační panel. Na pravé straně kódu HTML se v podokně Styly zobrazí seznam se styly CSS použitými u vybraného prvku.

Poznámka:

Vzhledem k tomu, že záhlaví je součástí rozložení webu, nástroj Page Inspector také otevře soubor _Layout.cshtml a zvýrazní segment ovlivněného kódu.

Zjišťování stylů a zdrojových souborů vybraného prvku
Pokud je zapnutý přepínač kontrolního ukazatele, přesuňte ukazatel myši pod modrý doporučený panel a klikněte na poloviční kruh.

Výběr elementu
V podokně Styly vyhledejte položku obrázku pozadí ve skupině .main-content . Zrušte zaškrtnutí obrázku na pozadí a podívejte se, co se stane. Všimněte si, že prohlížeč okamžitě projeví změny a kruh je skrytý.

Poznámka:

Změny, které použijete na kartě Styly kontroly stránky, nemají vliv na původní šablonu stylů. Styly můžete zrušit nebo změnit jejich hodnoty tolikrát, kolikrát chcete, ale po aktualizaci stránky se obnoví.

Povolení a zakázání stylů CSS
Teď klikněte na text "sem logo" v záhlaví pomocí režimu kontroly.
Na kartě Styly vyhledejte atribut CSS velikosti písma ve skupině .site-title. Poklikejte na hodnotu atributu a nahraďte hodnotu 2,3 em em 3 a stiskněte ENTER. Všimněte si, že nadpis vypadá větší.

Změna hodnot CSS v nástroji Page Inspector
Klikněte na kartu Styly trasování, která se nachází v pravém podokně nástroje Page Inspector. Toto je alternativní způsob, jak zobrazit všechny styly použité u výběru seřazené podle názvu atributu.

Trasování stylů CSS vybraného prvku
Další funkcí Page Inspectoru je podokno Rozložení. V režimu kontroly vyberte navigační panel a v pravém podokně klikněte na kartu Rozložení . Zobrazí se přesná velikost vybraného prvku a také její posun, okraj, odsazení a velikost ohraničení. Všimněte si, že můžete také upravit hodnoty z tohoto zobrazení.

Rozložení elementů v nástroji Page Inspector

Úkol 2 – Hledání a oprava problémů se stylem v galerii fotografií

Jak byste diagnostikovali problémy s webovými stránkami v předchozích verzích sady Visual Studio? Pravděpodobně znáte nástroje pro ladění webu, které běží mimo integrované vývojové prostředí sady Visual Studio, jako jsou Nástroje pro vývojáře Internet Exploreru nebo Firebug. Prohlížeče chápou pouze HTML, skriptování a styly, zatímco podkladová architektura generuje kód HTML, který se bude vykreslovat. Z tohoto důvodu často potřebujete nasadit celý web, abyste viděli, jak vypadají webové stránky.

Pravděpodobně jste postupovali podle těchto kroků, když jste chtěli zjistit a opravit problém na webu:

Spusťte řešení ze sady Visual Studio nebo nasaďte stránku na webový server.
V prohlížeči otevřete vývojářské nástroje, které používáte, nebo jednoduše otevřete zdrojový kód a styly a pokuste se problém vyřešit. K vyhledání zahrnutých souborů byste použili funkce "Hledat" nebo "Hledat v souborech" s názvem tříd stylů.
Po zjištění chyby zastavte webový prohlížeč a server.
Vymažte mezipaměť prohlížeče.
Vraťte se do sady Visual Studio a použijte opravu. Opakujte všechny kroky k otestování.

Vzhledem k tomu, že v ASP.NET MVC 4 neexistuje žádná skutečná skupina WYSIWYG, zjistí se většina problémů se stylem v pozdější fázi po spuštění nebo nasazení webové aplikace. Pomocí Nástroje Page Inspector je teď možné zobrazit náhled libovolné stránky bez spuštění řešení.

V této úloze použijete nástroj Page inspector a opravíte některé problémy s aplikací Galerie fotografií.

Pomocí Page Inspectoru vyhledejte odkazy Register a Log in (Přihlásit se) na levé straně záhlaví.

Všimněte si, že odkazy se nezobrazují na očekávaném místě napravo a zobrazují se jako seznam s odrážkami. Teď zarovnáte odkazy doprava a odpovídajícím způsobem je změníte.

Vyhledání odkazů Pro registraci a přihlášení
Pokud je vybrán režim přepnout kontrolu, klikněte na tlačítko zavřít, ale ne zapnuto, odkaz Pro registraci otevřete svůj kód.

Všimněte si, že zdrojový kód odkazů se nachází v souboru _LoginPartial.cshtml , nikoli v souboru Index.cshtml ani _Layout.cshtml, což jsou místa, kde se můžete podívat na prvním místě. Umístili jste se přímo do správného zdrojového souboru.
Na kartě Styly vyhledejte a klikněte na <oddíl> #login položku, což je kontejner HTML pro tyto odkazy.

Všimněte si, že styl #login se po kliknutí automaticky nachází v Site.css . Kromě toho je teď kód zvýrazněný.

Výběr stylů CSS
Odkomentujte atribut zarovnání textu ve zvýrazněném kódu odebráním počátečních a zavíracích znaků a uložením souboru Site.css .

Page Inspector ví o všech různých souborech, které tvoří aktuální stránku, a dokáže zjistit, kdy se některý z těchto souborů změní. Upozorní vás vždy, když se aktuální stránka v prohlížeči nesynchronizuje se zdrojovými soubory.
V prohlížeči Page Inspector klikněte na panel umístěný pod panelem Adresa a znovu načtěte stránku.

Opětovné načtení stránky

Odkazy jsou teď na pravé straně, ale pořád vypadají jako seznam s odrážkami. Teď odeberete odrážky a zarovnáte je vodorovně.

Aktualizovaná stránka
Pomocí režimu kontroly vyberte některou z <položek li> , které obsahují odkazy "Zaregistrovat" a "Přihlásit se". Potom klikněte na <oddíl> #login položku pro přístup k Styles.css kódu.

Vyhledání stylu
V Style.css odkomentujte kód pro #login li items. Styl, který přidáváte, skryje odrážku a zobrazí položky vodorovně.

Restyling the login links
Uložte Style.css soubor a kliknutím jednou na panel pod adresou stránku znovu načtěte. Všimněte si, že odkazy se zobrazují správně.

Propojení zarovnaná na pravou stranu
Nakonec změníte název záhlaví. Pomocí režimu kontroly klikněte sem na logo a přejděte ke zdrojovému kódu, který ho vygeneruje.
Teď jste v souboru _Layout.cshtml, nahraďte text "sem logo" textem "Fotogalerie". Uložte a aktualizujte prohlížeč Page Inspector.

Přiřazení nového názvu

Stránka Galerie fotografií byla aktualizována.
Nakonec vyberte projekt Fotogalerie a stisknutím klávesy F5 spusťte aplikaci. Podívejte se na všechny změny, které fungují podle očekávání.

Cvičení 2: Použití nástroje Page Inspector v projektech WebForms

V tomto cvičení se dozvíte, jak zobrazit náhled a ladit řešení WebForms pomocí Page Inspectoru. Nejprve se seznámíte s funkcemi Page Inspectoru, které usnadňují proces ladění webu. Pak budete pracovat na webové stránce, která obsahuje problémy se styly. Dozvíte se, jak pomocí Page Inspectoru najít zdrojový kód, který vygeneruje problém, a opravit ho.

Úkol 1 – kontrola stránky

V tomto úkolu se dozvíte, jak používat funkce Page Inspector v kontextu projektu WebForms, který zobrazuje galerii fotek.

Otevřete řešení Begin umístěné ve složce Source/Ex2-WebForms/Begin/.
1. Než budete pokračovat, budete si muset stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že kliknete na nabídku Projekt a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , aby se stáhly chybějící balíčky.
3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.
  
  Poznámka:
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
V Průzkumník řešení vyhledejte Default.aspx stránku, klikněte na ni pravým tlačítkem myši a vyberte Zobrazit v nástroji Page Inspector.

Otevření Default.aspx pomocí nástroje Page Inspector
V okně Page Inspector se zobrazí Default.aspx.

Zobrazení Default.aspx v nástroji Page Inspector

Nástroj Page Inspector je integrovaný v prostředí sady Visual Studio. Inspektor obsahuje vložený prohlížeč spolu s výkonným profilerem HTML, který zobrazí vybraný kód. Všimněte si, že řešení nemusíte spouštět, abyste viděli, jak stránky vypadají.

Poznámka:

Pokud je šířka prohlížeče Page Inspector menší než šířka otevřené stránky, nezobrazí se stránka správně. V takovém případě upravte šířku nástroje Page Inspector.
Klikněte na kartu Soubory v nástroji Page Inspector.

Zobrazí se všechny zdrojové soubory, které vytváří vykreslenou výchozí stránku. Tato funkce je užitečná k identifikaci všech prvků na první pohled, zejména při práci s uživatelskými ovládacími prvky a stránkami předlohy. Všimněte si, že můžete také přejít na každý ze souborů.

Karta Soubory
Klikněte na tlačítko Přepnout režim kontroly, které se nachází na levé straně karet.

Tento nástroj vám umožní vybrat libovolný prvek stránky a zobrazit jeho kód HTML a .aspx zdroj.

Přepnout režim kontroly
V prohlížeči Page Inspector přesuňte myš na prvky stránky. Když přesunete ukazatel myši na libovolnou část vykreslené stránky, zobrazí se typ prvku a v editoru sady Visual Studio se zvýrazní odpovídající zdrojový kód nebo kód.

Režim kontroly v akci

Poznámka:

Ne maximalizovat okno Page Inspector nebo neuvidíte kartu náhledu se zdrojovým kódem. Pokud po maximalizaci kliknete na prvek v nástroji Page Inspector, zobrazí se zdrojový kód výběru, ale skryje okno Kontrola stránky.

Pokud věnujete pozornost Default.aspx souboru, všimnete si, že část zdrojového kódu, která vygeneruje vybraný prvek, je zvýrazněná. Tato funkce usnadňuje edici dlouhých zdrojových souborů a poskytuje přímý a rychlý způsob přístupu k kódu.

Kontrola prvků
Chcete-li zakázat kurzor, klikněte na tlačítko Přepnout režim kontroly ( ), které se nachází na kartách Kontrola stránky.
Výběrem karty HTML zobrazíte kód HTML vykreslený v prohlížeči Page Inspector.
V kódu HTML vyhledejte položku seznamu s odkazem Koala a vyberte ji.

Všimněte si, že když vyberete kód, odpovídající výstup se automaticky zvýrazní v prohlížeči. Tato funkce je užitečná k tomu, abyste viděli, jak se na stránce vykresluje blok HTML.

Výběr elementu HTML na stránce
Kliknutím na tlačítko Přepnout režim kontroly povolíte režim kontroly a kliknete na navigační panel. Na pravé straně kódu HTML se v podokně Styly zobrazí seznam se styly CSS použitými u vybraného prvku.

Poznámka:

protože záhlaví je součástí rozložení webu, Page Inspector také otevře soubor Site.Master a zvýrazní segment ovlivněného kódu.

Zjišťování stylů a zdrojových souborů vybraného prvku
Pokud je zapnutý přepínač kontrolního ukazatele, přesuňte ukazatel myši pod řádek nabídek a klikněte na prázdný půlkruh.

Výběr elementu
V podokně Styly vyhledejte položku obrázku pozadí ve skupině .main-content . Zrušte zaškrtnutí obrázku na pozadí a podívejte se, co se stane. Všimněte si, že prohlížeč okamžitě projeví změny a kruh je skrytý.

Poznámka:

Změny, které použijete na kartě Styly kontroly stránky, nemají vliv na původní šablonu stylů. Styly můžete zrušit nebo změnit jejich hodnoty tolikrát, kolikrát chcete, ale po aktualizaci stránky se obnoví.

Povolení a zakázání stylů CSS
Teď klikněte na text "sem logo" v záhlaví pomocí režimu kontroly.
Na kartě Styly vyhledejte atribut CSS velikosti písma ve skupině .site-title. Poklikejte na atribut jednou a upravte jeho hodnotu. Nahraďte hodnotu 2,3em hodnotou 3em a stiskněte enter. Všimněte si, že nadpis vypadá větší.

Změna hodnot CSS v nástroji Page Inspector
Klikněte na kartu Styly trasování, která se nachází v pravém podokně nástroje Page Inspector. Toto je alternativní způsob, jak zobrazit všechny styly použité u výběru seřazené podle názvu atributu.

Trasování stylů CSS vybraného prvku
Další funkcí Page Inspectoru je podokno Rozložení. V režimu kontroly vyberte navigační panel a v pravém podokně klikněte na kartu Rozložení . Zobrazí se přesná velikost vybraného prvku a také její posun, okraj, odsazení a velikost ohraničení. Všimněte si, že můžete také upravit hodnoty z tohoto zobrazení.

Rozložení elementů v nástroji Page Inspector

Úkol 2 – Hledání a oprava problémů se stylem v galerii fotografií

Pravděpodobně jste postupovali podle těchto kroků, když jste chtěli zjistit a opravit problém na webu:

Spusťte řešení ze sady Visual Studio nebo nasaďte stránku na webový server.
V prohlížeči otevřete vývojářské nástroje, které používáte, nebo jednoduše otevřete zdrojový kód a styly a pokuste se problém vyřešit. K vyhledání zahrnutých souborů byste použili funkce Hledat nebo Hledat v souborech s názvem tříd stylů.
Po zjištění chyby zastavte webový prohlížeč a server.
Vymažte mezipaměť prohlížeče.
Vraťte se do sady Visual Studio a použijte opravu. Opakujte všechny kroky k otestování.

Vzhledem k tomu, že ve webových formulářích ASP.NET neexistuje žádná skutečná skupina WYSIWYG, zjistí se některé problémy se stylem v pozdější fázi po spuštění nebo nasazení. Pomocí Nástroje Page Inspector je teď možné zobrazit náhled libovolné stránky bez spuštění řešení.

V této úloze použijete kontrolu stránky k opravě některých problémů aplikace Galerie fotografií. V následujících krocích zjistíte a rychle opravíte nějaký jednoduchý problém se stylingem v záhlaví.

Pomocí kontroly stránky vyhledejte odkazy Register a Log In (Přihlásit se) na levé straně záhlaví.

Všimněte si, že se odkaz nezobrazuje na očekávaném místě vpravo. Teď zarovnáte odkaz doprava a odpovídajícím způsobem ho změníte.

Odkaz Přihlásit se umístěný na levé straně
Pokud je vybraný přepnout režim kontroly, výběrem odkazu Přihlásit se otevřete jeho kód.

Všimněte si, že zdrojový kód odkazu se nachází v souboru Site.Master , ne na stránce Default.aspx, která je místem, kde se můžete podívat na první místo. Byli jste umístěni přímo ve správném zdrojovém souboru.
Na kartě Styly vyhledejte a klikněte na <oddíl> #login položku, což je kontejner HTML pro tyto odkazy.

Všimněte si, že styl #login se po kliknutí automaticky nachází v Site.css . Kromě toho je teď kód zvýrazněný.

Výběr stylů CSS
Odkomentujte atribut zarovnání textu ve zvýrazněném kódu odebráním počátečních a zavíracích znaků a uložením souboru Site.css .

Page Inspector ví o všech různých souborech, které tvoří aktuální stránku, a dokáže zjistit, kdy se některý z těchto souborů změní. Upozorní vás vždy, když se aktuální stránka v prohlížeči nesynchronizuje se zdrojovými soubory.
V prohlížeči Page Inspector klikněte na panel, který se nachází pod adresními řádky, a uložte změny a znovu načtěte stránku.

Opětovné načtení stránky

Odkazy jsou teď na pravé straně, ale pořád vypadají jako seznam s odrážkami. Teď odeberete odrážky a zarovnáte je vodorovně.

Aktualizovaná stránka
Pomocí režimu kontroly vyberte některou z <položek li> , které obsahují odkazy "Zaregistrovat" a "Přihlásit se". Potom klikněte na <oddíl> #login položku pro přístup k Styles.css kódu.

Vyhledání stylu
V Style.css odkomentujte kód pro #login li items. Styl, který přidáváte, skryje odrážku a zobrazí položky vodorovně.

Restyling the login links
Uložte Style.css soubor a kliknutím jednou na panel pod adresou stránku znovu načtěte. Všimněte si, že odkazy se zobrazují správně.

Propojení zarovnaná na pravou stranu
Nakonec změníte název záhlaví. Místo hledání textu "sem logo" ve všech souborech použijte režim kontroly, abyste klikli na text a dostali se ke zdrojovému kódu, který ho vygeneruje.

Vyhledání názvu webu
Teď jste na webu Site.Master, nahraďte text "sem logo" textem "Fotogalerie". Uložte a aktualizujte prohlížeč Page Inspector.

Stránka Galerie fotografií byla aktualizována.
Nakonec stisknutím klávesy F5 spusťte aplikaci a zkontrolujte, že všechny změny fungují podle očekávání.

Shrnutí

Dokončením tohoto praktického cvičení jste se naučili používat Nástroj Page Inspector k zobrazení náhledu webové aplikace, aniž byste museli web znovu sestavit a spustit v prohlížeči. Kromě toho jste se dozvěděli, jak rychle najít a opravit chyby tak, že přistupujete přímo z vykresleného výstupu ke zdrojovému kódu.

Příloha A: Instalace sady Visual Studio Express 2012 pro web

Microsoft Visual Studio Express 2012 pro web nebo jinou verzi Expressu můžete nainstalovat pomocí instalačního programu Webová platforma Microsoft. Následující pokyny vás provedou postupem potřebným k instalaci sady Visual Studio Express 2012 pro web pomocí instalačního programu Webová platforma Microsoft.

Přejděte na [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Pokud už máte nainstalovaný instalační program webové platformy, můžete ho také otevřít a vyhledat produkt Visual Studio Express 2012 pro web se sadou Windows Azure SDK.
Klikněte na Nainstalovat. Pokud nemáte instalační program webové platformy, budete přesměrováni na jeho první stažení a instalaci.
Po otevření instalačního programu webové platformy spusťte instalaci kliknutím na nainstalovat .

Instalace sady Visual Studio Express
Přečtěte si všechny licence a podmínky produktů a pokračujte kliknutím na Přijmout .

Přijetí licenčních podmínek
Počkejte, až se proces stahování a instalace dokončí.

Průběh instalace
Po dokončení instalace klepněte na tlačítko Dokončit.

Instalace byla dokončena.
Kliknutím na tlačítko Ukončit zavřete instalační program webové platformy.
Pokud chcete otevřít Visual Studio Express pro web, přejděte na úvodní obrazovku a začněte psát "VS Express" a potom klikněte na dlaždici VS Express pro web.

Dlaždice VS Express pro web