Ladění stylů CSS pomocí průzkumníka modelu DOM

Článek
06/05/2015

Platí pro Windows a Windows Phone

Při ladění aplikací pro Windows Phone Store a aplikací pro Windows Store můžete zobrazit a změnit pravidla šablon stylů CSS pro vybrané elementy modelu DOM a jejich podřízené prvky.

Karty Styly a Vypočítané v průzkumníku modelu DOM zobrazují pravidla šablon stylů CSS, která platí pro vybraný element. Pravidla jsou zobrazena v pořadí jejich specifičnosti podle časové posloupnosti pravidel šablon stylů CSS. Pravidla, která se na kartě v selektoru nebo u stylu zobrazují nahoře (nejspecifičtější pravidla), se na zvolený element aplikují jako poslední a pravidla, která se zobrazují dole, se aplikují jako první. Jakmile jsou pravidla aplikována, přepíšou dříve použitá pravidla.

Karty Styly, Vypočítané a Změny poskytují různá zobrazení informací o stylu.

Kartu Styly použijte pro zobrazení pravidel uspořádaných podle názvu selektoru šablon stylů CSS, například html, body. Tuto kartu lze také použít pro povolení nebo zakázání určitých stylů, manuální nastavení hodnot nebo okamžité zobrazení výsledků těchto změn.
Kartu Vypočítané použijte pro zobrazení vypočtených hodnot stylu. Pokud například nastavíte velikost na 1em, hodnota vypočítaná aplikací Internet Explorer může být 16px. . Styly na této kartě jsou uspořádány podle názvu stylu, například height. Tuto kartu lze také použít pro povolení nebo zakázání určitých stylů, manuální nastavení hodnot nebo okamžité zobrazení výsledků těchto změn.

Poznámka

V jarní aktualizaci sady Visual Studio 2013 byly informace uvedené na kartě Trasování sloučeny s kartou Vypočítané a karta Trasování byla odebrána.
Kartu Změny použijte pro identifikaci a sledování stylů CSS, které byly změněny během relace ladění.

Tip

Změny stylů, které provedete na kartách Styly a Vypočítané, nejsou trvalé.Jsou ztraceny, jakmile zastavíte ladění.Pokud chcete změnit zdrojový kód a znovu načíst stránky bez zastavení a restartování ladicího programu, aktualizujte aplikaci pomocí tlačítka Aktualizovat aplikace systému Windows (Aktualizace aplikace Windows) na panelu nástrojů Ladění.Další informace naleznete v tématu Aktualizace aplikace (JavaScript).

Příklad opravy pravidla šablony stylů CSS

Tento příklad ukazuje, jak zkontrolovat pravidla šablony stylů CSS a jak ladit problémy se stylem. Řekněme například, že chcete změnit barvu písma použitého pro zobrazení názvů skupin v šabloně rozdělené aplikace Windows Store.

Poznámka

V tomto příkladu je použita aplikace pro Windows Phone, všechny zobrazené funkce průzkumníku modelu DOM se ale vztahují i na aplikaci pro Windows Phone Store.

Zobrazení nebo změna pravidel šablon stylů CSS

V aplikaci Visual Studio vytvořte pomocí jazyka JavaScript v šabloně projektu rozdělené aplikace aplikaci Windows Store.
V Průzkumníku řešení otevřete items.css. (Items.css najdete ve složce stránky.)
Nahraďte následující kód šablony stylů CSS:
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }
```
tímto kódem:
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }
```
Přidáte tak styl, který určuje barvu #ff6a00 (oranžová) pro každou položku v seznamu. Selektor šablon stylů CSS .itemspage .itemslist .item označuje sadu názvů tříd pro prvky elementů DIV v items.html, které se v živém modelu DOM jeví jako vnořené elementy. Element DIV item specifikuje položky seznamu.
Vyberte položku Simulátor z rozevíracího seznamu na panelu nástrojů Ladění (výchozí hodnota je Místní počítač).
Stisknutím klávesy F5 spusťte aplikaci v režimu ladění.

Po dokončení načítání aplikace zkontrolujte záhlaví položek seznamu, například Název skupiny: 1. Barva se nezměnila, takže pokus o použití oranžové barvy v názvech selhal. S pomocí karet šablon stylů CSS v průzkumníku modelu DOM zjistíme, co bylo špatně, a chybu napravíme.

Tip

Jakmile se aplikace objeví v simulátoru, umístěte simulátor vpravo vedle okna aplikace Visual Studio, okamžitě tak uvidíte výsledky výběru a provedené změny stylů CSS.
Přepněte do aplikace Visual Studio a klikněte na položku Vybrat element v průzkumníku modelu DOM (nebo stiskněte kombinaci kláves Ctrl+B). Změní se režim výběru, takže budete moci kliknutím vybrat položku a aplikace se zobrazí v popředí. Po kliknutí se režim přepne zpět. Tlačítko Vybrat element se nachází zde.

Tip

Můžete také vybrat elementy HTML přímo v průzkumníku modelu DOM.Další informace o výběru elementů naleznete v tématu Quickstart: Ladění kódu HTML, CSS a JavaScript.
V simulátoru umístěte kurzor na název první položky v seznamu, Název skupiny: 1, která se nachází na levém panelu domovské stránky. Název je zvýrazněn, jak je znázorněno zde:
Klikněte na vyznačený název. Průzkumník modelu DOM automaticky vybere odpovídající element HTML, který vypadá podobně jako tento.
```
<h4 class="item-title">Group Title: 1</h4>
```
Vyberete-li v průzkumníku modelu DOM element H4, karty průzkumníku modelu DOM zobrazí pravidla přidružená k elementu H4. Karta Vypočítané s otevřenou vlastností color je zobrazena zde:

Toto zobrazení obsahuje užitečné informace o pravidlech, která jsou přidružena ke stylu color, jako například:
- Selektor šablon stylů CSS, který je upraven v items.css, .itemspage .itemslist .item, se při konečném výpočtu stylu nepoužívá (zobrazí se jako přeškrtnutý text). Nepoužívá se ani několik dalších výskytů stylu color.
  
  Tip
  
  U delších názvů selektoru se plný název zobrazí v popisu tlačítka.
- Konečná vypočítaná hodnota šablon stylů CSS, rgba(255, 255, 255, 0.87), je nastavena speciálně pro následující selektor šablon stylů CSS: .itemspage .itemslist .item .item-overlay .item-title, který je definován také v items.css.
  
  Tip
  
  Teď, když víme, kde nastavit barvu názvu, víme také, kde ji můžeme změnit.Změny v průzkumníku modelu DOM však můžeme otestovat také bez obnovení aplikace, jak je popsáno ve zbývajících krocích.
Zrušte zaškrtnutí políčka pro první výskyt stylu color, který je určený pro selektor .itemspage .itemslist .item .item-overlay .item-title. Jak nyní v simulátoru vidíte, barva všech názvů položek se změnila na oranžovou, jak jsme chtěli, a selektor, který jsme modifikovali v šablonách stylů CSS, tedy .itemspage .itemslist .item, již není přepsán (to znamená, že už nemá přeškrtnutý text). Takto vypadá karta Vypočítané po zrušení označení zaškrtávacího políčka.
Vyberte kartu Změny.

Kartu Změny použijte pro identifikaci a sledování změn stylů, které jste provedli během relace ladění. Následující ilustrace ukazuje už přepsaný selektor .itemspage .itemslist .item .item-overlay .item-title na kartě Změny.
Hodnoty stylů pro šablony stylů CSS lze upravit i manuálně a výsledky lze okamžitě zobrazit na kartě Styly.
Vyberte kartu Styly.
Otevřete selektor stylu .itemspage .itemslist .item .item-overlay .item-title.
Vyberte první výskyt stylu color a následně dvakrát klikněte na hodnotu vlastnosti rgb(255, 255, 255, 0.87).
Tuto hodnotu můžete změnit pomocí klávesnice. Změňte ji na rgb(255, 255, 0, 0.87) a stiskněte klávesu Enter. Barvy všech názvů položek v simulátoru se změní na žlutou.
Chcete-li provést změny ve zdrojovém souboru šablon stylů CSS, klikněte na odkaz items.css na kartě Styly. Otevře se items.css, kde můžete změnit hodnotu stylu color v kódu aplikace. Pro obnovení aplikace bez zastavení a restartování ladicího programu klikněte na tlačítko (Aktualizace aplikace Windows) na panelu nástrojů Ladění.

Viz také

Sdílet prostřednictvím

Ladění stylů CSS pomocí průzkumníka modelu DOM

Příklad opravy pravidla šablony stylů CSS

Zobrazení nebo změna pravidel šablon stylů CSS

Viz také

Úkoly

Koncepty

Další zdroje

Další materiály