Debuggen von Layout mithilfe von DOM Explorer

Artikel
06/05/2015

Gilt für Windows und Windows Phone

Auf der Registerkarte Layout im DOM Explorer wird das CSS-Verschachtelungsmodell für das ausgewählte Element in einer Windows Store-App oder Windows Phone Store-App angezeigt. Sie können die visuelle Darstellung des Verschachtelungsmodells verwenden, um die layoutbezogenen Werte, die die Darstellung der Elemente beeinflussen, zu identifizieren und zu ändern.

Tipp

Änderungen, die Sie auf der Registerkarte Layout vornehmen, werden nicht dauerhaft übernommen.Wenn Sie permanente Änderungen am Quellcode vornehmen möchten, aktualisieren Sie die App mithilfe der Schaltfläche Windows-App aktualisieren auf der Symbolleiste "Debuggen".Dadurch können Sie vermeiden, dass der Debugger neu gestartet wird.

Informationen zum Ändern von Layoutaspekten, die nicht im Feldmodell angezeigt werden, mit dem Dom Explorer finden Sie unter Schnellstart: Debuggen von HTML und CSS und Debuggen von CSS-Stilen mithilfe von DOM Explorer.

Beispiel für das Beheben eines Layoutproblems

In diesem Beispiel wird ein Listenelement in der Hub/Pivot-Vorlage ausgewählt, dann werden die Werte des Verschachtelungsmodells interpretiert, die auf der Registerkarte Layout vorhanden sind, und anschließend wird einer der Eigenschaftswerte geändert, um ein Layoutproblem zu beheben.

So beheben Sie das Layoutproblem

Erstellen Sie in Visual Studio eine neue Store-App auf Grundlage der Projektvorlage "Hub/Pivot".
Öffnen Sie im Ordner "shared pages\hub" hub.css.

Ersetzen Sie den folgenden CSS-Code:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
        }

mit diesem CSS-Code:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
            margin-left: 5em;
        }

Wählen Sie entweder das Projekt "appName.WindowsPhone" oder "appName.Windows" im Projektmappen-Explorer aus, und klicken Sie dann im Kontextmenü für das Projekt auf Als Startprojekt festlegen.
Wählen Sie je nach Startprojekt Emulator 8.1 WVGA 4 inch 512MB oder Simulator in der Dropdownliste auf der Symbolleiste "Debuggen" aus (der Standardwert ist Lokaler Computer).
Drücken Sie F5, um die App im Debugmodus auszuführen.
Öffnen Sie "Section 4" durch Blättern oder Streichen.

Tipp

Positionieren Sie den Phone-Emulator oder den Simulator direkt neben dem Visual Studio-Fenster, sodass Ihnen die Ergebnisse der von Ihnen an den CSS-Stilen vorgenommenen Auswahl und alle Änderungen sofort angezeigt werden.

Wenn "Section 4" geladen wird, können Sie sehen, dass die unteren Bilder nicht richtig aussehen. Jedes Elementbild erscheint in der Hälfte zerteilt (wobei die linke Hälfte fehlt).
Wechseln Sie zu Visual Studio, und klicken Sie im DOM Explorer auf Element auswählen (oder drücken Sie STRG+B). Dadurch wird der Auswahlmodus so geändert, dass Sie ein Element auswählen können, indem Sie darauf klicken, und die App wird in den Vordergrund geholt. Der Modus wird nach einem einzelnen Mausklick wieder gewechselt.

Tipp

Sie können auch die Pfeilschaltflächen oder andere Methoden verwenden, um HTML-Elemente direkt im DOM Explorer auszuwählen.Weitere Informationen zum Auswählen von Elementen finden Sie unter Schnellstart: Debuggen von HTML und CSS.
Wählen Sie im Phone-Emulator oder Simulator die graue rechte Hälfte eines der Bilder aus, das nur halb dargestellt ist. Das ausgewählte Element wird markiert, wie hier im Windows Phone-Emulator dargestellt:

Tipp

Der Simulator unterstützt das Zeigen auf Elemente, um eine rechteckige Hervorhebung um DOM-Elemente anzuzeigen, bevor Sie sie auswählen.Der Windows Phone-Emulator unterstützt dies nicht.

Wenn Sie ein DOM-Element auswählen, wählt der DOM Explorer automatisch das entsprechende IMG-Element in Visual Studio aus. Das Element, das im Dom Explorer ausgewählt wird, sieht wie folgt aus:
```
<img src="ms-appx://guid/images/gray.png> 
</img>
```
Klicken Sie auf die Registerkarte Layout. Diese Registerkarte zeigt das Verschachtelungsmodell des ausgewählten Elements an, wie hier im Windows Phone-Emulator dargestellt.

Diese Ansicht enthält einige nützliche Informationen zum Element:
- Die Farben entsprechen der rechteckigen Hervorhebung, die im Simulator beim Zeigen auf die Elemente angezeigt wird. Die blaue Farbe stellt die <img>-Elementabmessungen dar. Die braune Farbe stellt Randwerte dar.
- Der linke Rand (margin-left) ist festgelegt, was auf die Ursache des Problems hinweist, da er mit dem Symptom (schwarz auf der linken Seite der Bilder) übereinstimmt.
- Die Felder, die Werte von 0 Pixeln zeigen (z. B. Abstand, Rahmen und Rand) weisen darauf hin, dass die entsprechenden CSS-Eigenschaften wahrscheinlich nicht festgelegt wurden.
Um zu sehen, wie die margin-left-Regel angewendet wird, klicken Sie auf die Registerkarte Berechnet, und schauen Sie unter der Regel "margin-left" nach. Sie sehen, dass die margin-left-Regel mit einem Wert von "5em" festgelegt ist, der berechnete Wert aber "66.66px" oder "146.66px" lautet, je nach Zielgerät.

Tipp

Die Registerkarte Berechnet zeigt, dass die margin-left-Regel im CSS-Selektor ..hubpage .hub. section4 .sub-image-row img festgelegt ist, die Sie in "hub.css" finden.Sie müssen das Problem in dieser Demo-App beheben.

Sie können auch die Registerkarte Layout verwenden, um Änderungen an den Layoutwerten zu testen.
Klicken Sie auf der Registerkarte Layout im Feld Rand auf der linken Seite des Felds auf 66.66 oder 146.66.
Geben Sie 0 ein, und drücken Sie die EINGABETASTE. (Sie können ebenso die NACH-OBEN- und NACH-UNTEN-TASTEN verwenden, um den Wert zu ändern.)
Wählen Sie die anderen <img>-Elemente im DOM Explorer aus, und ändern Sie ihre margin-left-Werte in 0.
Wechseln Sie zum Phone-Emulator bzw. zum Simulator. Die aktualisierten Werte des linken Rands wurden auf die Bilder in "Section 4" angewendet. Diese Werte werden auch auf der Registerkarte Berechnet unter der margin-left-Regel aktualisiert.