Ladění rozložení pomocí průzkumníka modelu DOM
Rozložení kartě DOM Explorer zobrazuje CSS pole modelu pro vybraný prvek. Tato vizuální reprezentace modelu pole lze rychle určit hodnoty vlastností. Můžete také změnit libovolné hodnoty na rozložení kartu. Provedené změny nejsou trvalé. Nacházejí ztraceny při zastavení ladění.
Tip
Pokud nechcete zastavit debugger, můžete provést změny zdrojového kódu a potom aktualizovat své aplikace pomocí aplikace Windows aktualizovat tlačítka na panelu nástrojů Debug.
Úprava rozložení aspekty, které nejsou zobrazeny v poli model pomocí Průzkumníka modelu DOM, viz Quickstart: Ladění kódu HTML, CSS a JavaScript a Ladění stylů CSS pomocí průzkumníka modelu DOM.
Zobrazení a úpravy rozvržení
V tomto příkladu jsme vyberte prvek seznamu v šabloně aplikace rozdělit, interpretovat model hodnoty pole, které jsou na rozložení kartu a potom změňte hodnoty vlastností.
Zobrazit a upravit rozložení
V aplikaci Visual Studio, vytvořit nový Aplikace pro web Windows Store vytvořená pro systém Windows s použitím jazyka JavaScript , která používá šablonu projektu rozdělení aplikace.
Vyberte simulátoru v rozevíracím seznamu, který je Spustit ladění tlačítka na panelu nástrojů Debug.
.png "Simulátor běží.")
Stisknutím klávesy F5 vaší aplikace spouštět v režimu ladění.
Tip
Jakmile aplikace se objeví v simulátoru, umístěte simulátoru-souběžně vedle Visual Studio. Umožňuje okamžitě uvidíte výsledky provedených výběrů a provedené změny stylů CSS.
Přepněte do aplikace Visual Studio a na Vyberte Element v aplikaci Explorer DOM (nebo stiskněte klávesy Ctrl + B). Změní režim výběru tak, že vyberete položku klepnutím a přináší aplikace do popředí. Režim vrátí zpět po jediným klepnutím.
Tip
Můžete také vybrat prvky HTML přímo v aplikaci Explorer DOM. Další informace o výběru prvků naleznete v Quickstart: Ladění kódu HTML, CSS a JavaScript.
V simulátoru ukazatel skupin v domovské stránky tak, aby obrázek skupiny a název skupiny jsou uvedeny v barvě. Tato ukázka ukazatel myši nad třetí skupina. Obrázek skupiny přehledu a hlavy jsou uvedeny zde.
.png "Výběr elementu DOM.")
Klepněte na vybranou skupinu a obraz vyberte. DOM Explorer automaticky vybere odpovídající prvek IMG. V aplikaci Explorer DOM vybraného prvku vypadá takto:
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" src="data:image/png;base64, ..." data-win-bind="src: backgroundImage; alt: title"></img>Klepněte rozložení kartu. Tato karta zobrazuje rozměry vybraný prvek zde uvedené.
.png "Karta rozložení DOM Explorer")
Toto zobrazení poskytuje některé užitečné informace o prvku:
Rozměry prvku v nejvnitřnější pole obvykle odpovídající vlastnosti CSS výška a šířka.
Odsazení obsahu, ohraničení, a okraje políček zobrazit hodnoty 0 obrazových bodů, které navrhne odpovídající vlastnosti CSS jsou pravděpodobně nejsou nastaveny. Například levý okraj, horní okraj, pravý okraj a dolní okraj vlastnosti CSS jsou pravděpodobně není nastaven.
Tip
Použití vlastností zobrazíte klepnutím styly kartu a ve skupinovém rámečku <div> inlined pravidlo pod zděděné styly. Můžete zobrazit výšku a šířku vlastnosti jsou nastaveny zde.
V rozložení karta, poklepejte na 0px v horní části okraje pole.
Pomocí klávesy šipka nahoru zvyšte hodnotu horního okraje 10px a stiskněte klávesu Enter. Aktualizované rozpětí se zobrazí v simulátoru a také v styly kartu podle pravidla inlined. Můžete také zadat nové hodnoty místo nahoru nebo šipka dolů.
Viz také
Úkoly
Zobrazení naslouchacích procesů událostí DOM