Sdílet prostřednictvím


Použití page inspectoru 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 Page Inspector okamžitě zvýrazní zdroj prvku a šablony stylů CSS. Můžete procházet libovolné 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 pak rychle vyhledat a upravit značky a šablony stylů CSS v rámci webového projektu. Tento kurz používá projekt MVC, ale můžete také použít Page Inspector pro webové formuláře a další ASP.NET aplikace.

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

Požadavky

Poznámka:

Pokud chcete získat nejnovější verzi Page Inspectoru, nainstalujte sadu Windows Azure SDK pro .NET 2.0 pomocí Instalační služby webové platformy.

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

Vytvoření webové aplikace

Nejprve vytvořte webovou aplikaci, se kterou budete používat Page Inspector. V sadě Visual Studio zvolte Soubor>nový projekt. Na levé straně rozbalte Visual C#, vyberte Web a pak vyberte ASP.NET webovou aplikaci MVC4.

Nová aplikace ASP.NET MVC

Klikněte na OK.

V dialogovém okně Nový ASP.NET projektu MVC 4 vyberte internetovou aplikaci. Ponechte Razor jako výchozí modul zobrazení.

Nový projekt ASP.NET MVC – internetová aplikace

Aplikace se otevře v zobrazení Zdroj .

Nová aplikace ASP.NET MVC ve zdrojovém zobrazení

Teď, když máte aplikaci, se kterou chcete pracovat, můžete pomocí Page Inspectoru zkontrolovat a upravit.

Procházení zobrazení pomocí nástroje Page Inspector

V sadě Visual Studio 2012 můžete kliknout pravým tlačítkem na libovolné zobrazení v projektu, vybrat Možnost Zobrazit v nástroji Page Inspector a Kontrola stránek zjistí trasu a zobrazí stránku.

V Průzkumník řešení rozbalte složku Zobrazení a potom domovskou složku. Klikněte pravým tlačítkem na soubor Index.cshtml a zvolte Zobrazit v nástroji Page Inspector.

Zobrazení index.cshtml v nástroji Page Inspector

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

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

ASP.NET aplikace MVC v nástroji Page Inspector

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

Režim EnableInspection

Chcete-li provést kontrolu stránky 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.

Přepnout režim kontroly

Teď přesuňte myš na různé části stránky v rámci Page Inspectoru. Jak to uděláte, ukazatel myši se změní na velké znaménko plus a prvek pod ním je zvýrazněný:

Najetím myší na div.content-wrapper

Když přesunete ukazatel 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.

Na kartě Page Inspector se na kartě HTML zobrazí kód HTML vygenerovaný ze syntaxe Razor. Když přesunete ukazatel myši, zvýrazní se prvky HTML. Karta Styly zobrazuje pravidla CSS pro prvek.

Provedení změn v revizí pomocí nástroje Page Inspector

Page Inspector 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.

Chcete-li to zobrazit, klepněte na tlačítko Zkontrolovat a potom se posuňte do dolní části stránky v okně Kontrola stránky.

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

Zápatí

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

Zvýrazněná čára autorských práv zápatí

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 kliknutím na panel aktualizací zobrazte výsledky v okně prohlížeče Page Inspector.

Moje ASP.NET aplikační kameny!

Možná jste si mysleli, že zápatí definované v souboru Index.cshtml, ale ukázalo se, že je v souboru _Layout.cshtml a Page Inspector ho pro vás našel.

Režim kontroly a okno HTML

V dalším kroku se rychle podíváte na okno HTML a na to, jak mapuje prvky za vás.

Kliknutím na Zkontrolovat umístí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 se při přesunutí ukazatele myši už zobrazení v okně prohlížeče nezmění.

Teď přesuňte ukazatel myši do okna HTML . Když přesunete ukazatel myši, Page Inspector nastíní prvek v okně HTML a zvýrazní odpovídající prvek v okně prohlížeče.

Okno HTML

Stejně jako předtím nástroj Page Inspector otevře soubor _Layout.cshtml za vás 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í> za vás:

Zvýrazněné značky

Náhled změn šablon stylů CSS v okně Styly

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

Kliknutím na Zkontrolovat umístíte kontrolu stránky do režimu kontroly.

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

Najeďte myší na obálku div.content-wrapper.

Jednou klikněte do oddílu div.content-wrapper a přesuňte ukazatel myši do okna Styly . Okno Styly zobrazuje všechna pravidla CSS pro tento prvek. Posuňte se dolů a vyhledejte selektor tříd .featured .content-wrapper. Teď zrušte zaškrtnutí políčka pro vlastnost barvy pozadí.

Vymazat barvu pozadí

Všimněte si, jak se náhledy změn okamžitě zobrazují 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. Tato změna se zobrazí okamžitě:

Červená barva pozadí

Okno Styly usnadňuje testování a náhled změn šablon stylů CSS před potvrzením změn do samotné šablony 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 Page Inspector.

Kliknutím na Zkontrolovat umístíte kontrolu stránky do režimu kontroly.

V prohlížeči Page Inspector přesuňte ukazatel myši na oddíl "Domovská stránka", dokud se nezobrazí popisek div.content-wrapper . Kliknutím jednou vyberete tento prvek.

Okno Styly zobrazuje všechna pravidla CSS pro tento prvek. Posuňte se dolů a vyhledejte selektor tříd .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.

Snímek obrazovky se souborem CSS, který zvýrazní styl

Teď změňte hodnotu na background-color červenou. Změna se zobrazí okamžitě v prohlížeči Page Inspector.

Snímek obrazovky s prohlížečem Page Inspector, kde se změna zobrazuje

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

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

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 zadejte # nebo rgb(.

Panel pro výběr barvy šablon stylů CSS

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

Náhled hodnoty vlastnosti barvy pozadí

Pokud panel barev nemá přesnou barvu, kterou chcete, můžete použít rozevírací okno 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 na klávesnici stisknete šipku dolů.

Výběr barvy šablon stylů CSS – místní nabídka

Klikněte na barvu z svislého pruhu vpravo. Zobrazí se přechod pro tuto barvu v hlavním okně. Vyberte 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 uvnitř uživatelského rozhraní sady Visual Studio), můžete její hodnotu zachytit pomocí nástroje kapátko vpravo dole.

Neprůhlednost barvy můžete také změnit přesunutí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.

Jakmile vyberete barvu, stiskněte Klávesu Enter a zadáním středníku dokončete položku barvy pozadí v souboru Site.css .

Panel aktualizací page inspectoru

Page Inspector okamžitě zjistí změnu souboru Site.css a zobrazí upozornění na aktualizačním panelu.

Aktualizační panel

Pokud chcete uložit všechny soubory a aktualizovat prohlížeč Page Inspectoru, stiskněte ctrl+Alt+Enter nebo klikněte na aktualizační panel. Změna barvy zvýraznění se zobrazí v prohlížeči.

Mapování dynamických prvků 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.

S verzí 1.3 teď 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 a webových nástrojů 2012.2 .

V sadě Visual Studio zvolte Soubor>nový projekt. Na levé straně rozbalte Visual C#, vyberte Web a pak vyberte ASP.NET webovou aplikaci MVC4. Klikněte na OK.

V dialogovém okně Nový ASP.NET projektu MVC 4 vyberte jednostrákovou aplikaci.

V Průzkumník řešení rozbalte složku Zobrazení a potom domovskou složku. Klikněte pravým tlačítkem na soubor Index.cshtml a zvolte Zobrazit v nástroji Page Inspector.

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. Po registraci se aplikace přihlásí a vytvoří seznam úkolů s některými ukázkovými položkami.

Kliknutím na Zkontrolovat umístíte kontrolu stránky do režimu kontroly. V prohlížeči Page Inspector klikněte na jednu z položek úkolů. Všimněte si, že místo toho, aby byl zvýrazněn modře, je prvek zvýrazněn oranžově a vedle názvu prvku je "JS". To znamená, že element byl vytvořen dynamicky prostřednictvím skriptu.

Snímek obrazovky s prohlížečem Page Inspector to Do List zobrazte, že se element vytvořil dynamicky prostřednictvím skriptu.

Na kartě Zásobník volání se navíc zobrazí oranžové podtržení. To znamená, že podokno Zásobník volání obsahuje další informace o prvku.

Klikněte na kartu Zásobník volání. Podokno Zásobník volání zobrazuje zásobník volání pro volání JavaScriptu, které vytvořil element. Volání externích knihoven, jako je jQuery, jsou sbalená, takže můžete snadno zobrazit volání skriptu aplikace.

Snímek obrazovky s kartou Zásobník volání, která vám umožní snadno zobrazit volání skriptu vaší aplikace

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

Snímek obrazovky s externími knihovnami na kartě Zásobník volání zobrazte celý zásobník včetně volání externích knihoven.

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.

Snímek obrazovky se souborem kódu, který Visual Studio otevře, a zvýrazní odpovídající skript, pokud kliknete na položku v zásobníku volání.

Viz také

Úvod do ASP.NET MVC 4 pomocí sady Visual Studio (ASP.net web)

Představení nástroje Page Inspector (video channel 9)

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