Použití nástroje Page Inspector s integrovaným prohlížečem v ASP.NET MVC

Tim Ammann

Page Inspector v sadě Visual Studio 2012 je nástroj pro vývoj webu s integrovaným prohlížečem. Vyberte libovolný prvek v integrovaném prohlížeči a Kontrola stránky okamžitě zvýrazní zdroj elementu a šablony stylů CSS. Můžete procházet jakékoli zobrazení MVC, rychle najít zdroje vykreslených značek a používat nástroje prohlížeče přímo v prostředí sady Visual Studio.

Podívejte se na video

V tomto kurzu se dozvíte, jak povolit režim kontroly a rychle najít a upravit značky a šablony stylů CSS ve webovém projektu. Tento kurz používá projekt MVC, ale můžete také použít nástroj Page Inspector pro Web Forms a další aplikace ASP.NET.

Kurz obsahuje následující části:

• Požadavky
• Vytvoření webové aplikace
• Použití Kontroly stránky k přechodu do zobrazení
• Povolit režim kontroly
• Použití Kontroly stránky k provádění změn revizí
• Režim kontroly a okno HTML
• Náhled změn CSS v okně Styly
• Automatická synchronizace šablon stylů CSS
• Použití nástroje pro výběr barvy šablon stylů CSS
• Mapování prvků dynamické stránky na JavaScript

Požadavky

• Visual Studio 2012 nebo Visual Studio Express 2012 pro web.

Poznámka

Pokud chcete získat nejnovější verzi nástroje Page Inspector, nainstalujte pomocí Instalačního programu webové platformy sadu Windows Azure SDK pro .NET 2.0.

Kontrola stránky je součástí Microsoft Web Developer Tools. Nejnovější verze je 1.3. Pokud chcete zkontrolovat, jakou verzi máte, spusťte sadu Visual Studio a v nabídce Nápověda vyberte O aplikaci Microsoft Visual Studio.

Vytvoření webové aplikace

Nejprve vytvořte webovou aplikaci, se kterou budete funkci Kontrola stránky používat. V sadě Visual Studio zvolte Nový projekt soubor>. Na levé straně rozbalte Visual C#, vyberte Web a pak vyberte ASP.NET webová aplikace MVC4.

Klikněte na OK.

V dialogovém okně Nový projekt ASP.NET MVC 4 vyberte Internetová aplikace. Jako výchozí modul zobrazení ponechte Razor .

Aplikace se otevře v zobrazení Zdroj .

Teď, když máte aplikaci, se kterou můžete pracovat, můžete ji pomocí Funkce Kontrola stránky prozkoumat a upravit.

Použití Kontroly stránky k přechodu do zobrazení

V sadě Visual Studio 2012 můžete kliknout pravým tlačítkem na libovolné zobrazení v projektu, vybrat Zobrazit v Inspektoru stránky a Kontrola stránky zjistí trasu a zobrazí stránku.

V Průzkumník řešení rozbalte složku Zobrazení a potom složku Domů. Klikněte pravým tlačítkem na soubor Index.cshtml a zvolte Zobrazit v Inspektoru stránky.

Ve výchozím nastavení je kontrola stránky ukotvená jako okno na levé straně prostředí sady Visual Studio. Pokud chcete, můžete ho ukotvit jinam nebo okno uvolnit. Viz Postupy: Uspořádání a ukotvení oken.

V horním podokně okna Kontrola stránky se zobrazuje aktuální stránka v okně prohlížeče. V dolním podokně se zobrazuje stránka v kódu HTML spolu s některými kartami, které umožňují prozkoumat různé aspekty stránky. Dolní podokno je podobné vývojářským nástrojům F12 v Internet Exploreru.

V tomto kurzu použijete karty HTML a Styly k rychlé navigaci a provádění změn v aplikaci.

EnableInspection Mode

Pokud chcete funkci Kontrola stránky převést do režimu kontroly, klikněte na tlačítko Zkontrolovat . Když v režimu kontroly podržíte ukazatel myši na libovolnou část vykreslené stránky, zvýrazní se odpovídající zdrojový kód nebo kód.

Teď v inspektoru stránky najeďte myší na různé části stránky. Během toho se ukazatel myši změní na velké znaménko plus a prvek pod ním se zvýrazní:

Při pohybu ukazatele myši visual Studio zvýrazní odpovídající syntaxi Razor ve zdrojovém souboru. Pokud element HTML pochází z jiného zdrojového souboru, Visual Studio soubor automaticky otevře.

V inspektoru stránky se na kartě HTML zobrazuje kód HTML vygenerovaný ze syntaxe Razor. Při pohybu ukazatele myši se zvýrazní prvky HTML. Na kartě Styly se zobrazují pravidla CSS pro element.

Použití Kontroly stránky k provádění změn revizí

Kontrola stránky umožňuje najít značky, jejichž umístění nemusí být zřejmé. Pak můžete revize upravit a zobrazit výsledné změny.

Zobrazí se to tak, že kliknete na Zkontrolovat a pak se v okně Kontrola stránky posunete do dolní části stránky.

Když přesunete ukazatel myši do oblasti zápatí, nástroj Kontrola stránky otevře soubor _Layout.cshtml a zvýrazní vybraný oddíl stránky rozložení. Jak vidíte, oblast zápatí je definována v souboru rozložení, a ne v samotném zobrazení.

Teď přesuňte ukazatel myši na čáru s oznámením o autorských právech . Na stránce _Layout.cshtml je zvýrazněn odpovídající řádek.

Na konec řádku v souboru _Layout.cshtml přidejte nějaký text.

<p>© @DateTime.Now.Year - My ASP.NET MVC Application Rocks!</P>

Teď stiskněte kombinaci kláves Ctrl+Alt+Enter nebo klikněte na aktualizační panel a zobrazte výsledky v okně prohlížeče Kontrola stránky.

Možná jste si mysleli, že je zápatí definované v souboru Index.cshtml, ale ukázalo se, že je v _Layout.cshtml a Kontrola stránky ho našla za vás.

Režim kontroly a okno HTML

Dále se rychle podíváte na okno HTML a na to, jak pro vás mapuje prvky.

Kliknutím na Zkontrolovat přepněte Kontrolu stránky do režimu kontroly.

Klikněte na horní část stránky s textem Vaše logo. Zkoumáte konkrétní prvek podrobněji, takže zobrazení v okně prohlížeče se už při pohybu ukazatele myši nezmění.

Teď přesuňte ukazatel myši do okna HTML . Při pohybu ukazatele myši funkce Kontrola stránky vytyčuje prvek v okně HTML a zvýrazní odpovídající prvek v okně prohlížeče.

Stejně jako předtím nástroj Kontrola stránky otevře soubor _Layout.cshtml na dočasné kartě. Klikněte na dočasnou kartu _Layout.cshtml a odpovídající kód se zvýrazní v oddílu <záhlaví> :

Náhled změn CSS v okně Styly

V dalším kroku použijete okno Styly inspektoru stránky k náhledu změn šablon stylů CSS.

Kliknutím na Zkontrolovat přepněte Kontrolu stránky do režimu kontroly.

V okně prohlížeče Kontrola stránky přesuňte ukazatel myši na oddíl Domovská stránka, dokud se nezobrazí popisek div.content-wrapper .

Klikněte jednou do oddílu div.content-wrapper a přesuňte ukazatel myši do okna Styly . V okně Styly se zobrazí všechna pravidla CSS pro tento prvek. Posuňte se dolů a vyhledejte selektor třídy .featured .content-wrapper. Teď zrušte zaškrtnutí políčka u vlastnosti barva pozadí.

Všimněte si, že náhledy změn se okamžitě zobrazí v okně prohlížeče Page Inspector.

Znovu zaškrtněte políčko a potom poklikejte na hodnotu vlastnosti a změňte ji na červenou. Změna se okamžitě zobrazí:

Okno Styly usnadňuje testování a náhled změn šablon stylů CSS před potvrzením změn v samotné šabloně stylů.

Automatická synchronizace šablon stylů CSS

Poznámka

Tato funkce vyžaduje verzi 1.3 nástroje Page Inspector.

Funkce automatické synchronizace šablon stylů CSS umožňuje přímo upravit soubor CSS a okamžitě zobrazit změny v prohlížeči Inspektor stránky.

Kliknutím na Zkontrolovat přepněte Kontrolu stránky do režimu kontroly.

V prohlížeči Inspektoru stránky přesuňte ukazatel myši na oddíl Domovská stránka, dokud se nezobrazí popisek div.content-wrapper . Jedním kliknutím vyberte tento prvek.

V okně Styly se zobrazí všechna pravidla CSS pro tento prvek. Posuňte se dolů a vyhledejte selektor třídy .featured .content-wrapper. Klikněte na .featured .content-wrapper. Page Inspector otevře soubor CSS, který definuje tento styl (Site.css) a zvýrazní odpovídající styl CSS.

Teď změňte hodnotu pro background-color na "červená". Změna se zobrazí okamžitě v prohlížeči Kontroly stránky.

Použití nástroje pro výběr barvy šablon stylů CSS

Editor CSS v sadě Visual Studio 2012 má nástroj pro výběr barev, který usnadňuje výběr a vkládání barev. Nástroj pro výběr barvy obsahuje standardní paletu barev, podporuje standardní názvy barev, hashové kódy, barvy RGB, RGBA, HSL a HSLA a udržuje seznam barev, které jste v dokumentu použili naposledy.

V předchozí části jste změnili hodnotu background-color vlastnosti. Pokud chcete vyvolat výběr barvy, umístěte kurzor za název vlastnosti a typ # nebo rgb(.

Klikněte na barvu, abyste ji vybrali, nebo stiskněte klávesu se šipkou dolů a pak pomocí kláves se šipkou vlevo a vpravo procházejte barvy. Když navštívíte barvu, zobrazí se náhled odpovídající šestnáctkové hodnoty:

Pokud panel barev nemá přesně požadovanou barvu, můžete použít rozevírací nabídku pro výběr barvy. Otevřete ho tak, že kliknete na dvojitou dvojitou šipku na pravém konci panelu barev nebo jednou nebo dvakrát stisknete šipku dolů na klávesnici.

Klikněte na barvu ze svislého pruhu vpravo. Zobrazí se přechod pro tuto barvu v hlavním okně. Zvolte barvu přímo ze svislého pruhu stisknutím klávesy Enter nebo kliknutím na libovolný bod v hlavním okně zvolte s větší přesností.

Pokud je na obrazovce počítače barva, kterou chcete použít (nemusí být v uživatelském rozhraní sady Visual Studio), můžete její hodnotu zachytit pomocí nástroje Kapátko v pravém dolním rohu.

Neprůhlednost barvy můžete změnit také posunutím posuvníku v dolní části výběru barvy. Tím se změní hodnoty barev na hodnoty RGBA, protože formát RGBA může představovat neprůhlednost.

Po výběru barvy stiskněte klávesu Enter a pak zadejte středník, aby se v souboru Site.css dokončila položka barvy pozadí.

Panel aktualizace kontroly stránky

Page Inspector okamžitě rozpozná změnu souboru Site.css a zobrazí upozornění na panelu aktualizací.

Pokud chcete uložit všechny soubory a aktualizovat prohlížeč Kontroly stránek, stiskněte kombinaci kláves Ctrl+Alt+Enter nebo klikněte na aktualizační panel. Změna barvy zvýraznění se zobrazí v prohlížeči.

Mapování prvků dynamické stránky na JavaScript

V moderních webových aplikacích se prvky na stránce často generují dynamicky pomocí JavaScriptu. To znamená, že neexistuje žádný statický kód (HTML nebo Razor), který odpovídá těmto prvkům stránky.

Ve verzi 1.3 teď nástroj Page Inspector může mapovat položky, které byly dynamicky přidány na stránku, zpět do odpovídajícího kódu JavaScriptu. K předvedení této funkce použijeme šablonu Jednostránková aplikace (SPA).

Poznámka

Šablona SPA vyžaduje aktualizaci ASP.NET and Web Tools 2012.2.

V sadě Visual Studio zvolte Nový projekt soubor>. Na levé straně rozbalte Visual C#, vyberte Web a pak vyberte ASP.NET webová aplikace MVC4. Klikněte na OK.

V dialogovém okně Nový projekt ASP.NET MVC 4 vyberte Jednostránková aplikace.

V Průzkumník řešení rozbalte složku Zobrazení a potom složku Domů. Klikněte pravým tlačítkem na soubor Index.cshtml a zvolte Zobrazit v Inspektoru stránky.

První věc, která se zobrazí v prohlížeči Page Inspector, je přihlašovací stránka. Klikněte na Zaregistrovat se a vytvořte uživatelské jméno a heslo. Jakmile se zaregistrujete, aplikace vás přihlásí a vytvoří seznam úkolů s ukázkovými položkami.

Kliknutím na Zkontrolovat přepněte Kontrolu stránky do režimu kontroly. V prohlížeči Kontrola stránky klikněte na jednu z položek úkolů. Všimněte si, že místo modrého zvýraznění elementu je zvýrazněn oranžově a vedle názvu elementu je "JS". To znamená, že element byl vytvořen dynamicky prostřednictvím skriptu.

Kromě toho se na kartě Zásobník volání zobrazí oranžové podtržení. To znamená, že podokno Zásobník volání obsahuje další informace o elementu.

Klikněte na kartu Zásobník volání . V podokně Zásobník volání se zobrazí zásobník volání pro volání JavaScriptu, které vytvořilo element. Volání externích knihoven, jako je jQuery, jsou sbalená, abyste snadno viděli volání skriptu aplikace.

Pokud chcete zobrazit úplný zásobník, včetně volání externích knihoven, můžete rozbalit uzly označené jako Externí knihovny:

Pokud kliknete na položku v zásobníku volání, Visual Studio otevře soubor kódu a zvýrazní odpovídající skript.

Viz také

Úvod do ASP.NET MVC 4 se sadou Visual Studio (ASP.net web)

Představujeme inspektor stránky (video Channel 9)

Chybové zprávy kontroly stránky (MSDN)