Debuggen von Layout mithilfe von DOM Explorer

Auf der Registerkarte Layout im DOM Explorer wird das CSS-Verschachtelungsmodell für das ausgewählte Element in einer Windows 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 Tipp

Änderungen, die Sie auf der Registerkarte Layout vornehmen, werden nicht dauerhaft übernommen. Wenn Sie permanente Änderungen am Quellcode vornehmen, 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 zur Verwendung des DOM Explorer zum Ändern von Layoutaspekten, die nicht im Verschachtelungsmodell angezeigt werden, finden Sie unter Schnellstart: Debuggen von HTML, CSS und JavaScript und Debuggen von CSS-Stilen mithilfe von DOM Explorer.

In diesem Beispiel wird ein Listenelement in der Vorlage für Split Apps 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

  1. Erstellen Sie in Visual Studio eine neue Für Windows unter Verwendung von JavaScript erstellte Windows Store-App auf Grundlage der Projektvorlage "Geteilte App".

  2. Öffnen Sie im Ordner "pages\items" items.css.

  3. Ersetzen Sie den folgenden CSS-Code:

    .itemspage .itemslist .item .item-image {
        -ms-grid-row-span: 2;
    }
    

    mit diesem CSS-Code:

    .itemspage .itemslist .item .item-image {
        -ms-grid-row-span: 2;
        margin-left: 10em;
    }
    
  4. Wählen Sie in der Dropdownliste auf der Symbolleiste "Debuggen" die Option Simulator aus (Lokaler Computer ist der Standardwert).

    Debug-Zielliste auswählen
  5. Drücken Sie F5, um die App im Debugmodus auszuführen.

    Wenn die App geladen wird, können Sie sehen, dass die Bilder nicht richtig aussehen. Jedes Elementbild erscheint in der Hälfte zerteilt (wobei die linke Hälfte fehlt).

    Tipp Tipp

    Positionieren Sie 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.

  6. 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 Tipp

    Sie können HTML-Elemente auch direkt in DOM Explorer auswählen. Weitere Informationen zum Auswählen von Elementen finden Sie unter Schnellstart: Debuggen von HTML, CSS und JavaScript.

  7. Zeigen Sie im Simulator mit der Maus auf die Gruppenbilder auf der Homepage, sodass eine rechteckige Hervorhebung um die Bilder und Elemente angezeigt wird. Zeigen Sie für diese Demo mit dem Mauszeiger auf die erste Gruppe. Das markierte Gruppenbild wird hier angezeigt.

    Auswählen eines DOM-Elements
  8. Klicken Sie auf das markierte Bild, um es auszuwählen. DOM Explorer wählt automatisch das entsprechende IMG-Element in Visual Studio aus. Das Element, das im Dom Explorer ausgewählt wird, sieht wie folgt aus:

    <img class="item-image" alt="Group Title: 3" src="data:image/png;base64, ..."> 
    </img>
    
  9. Klicken Sie auf die Registerkarte Layout. Diese Registerkarte zeigt das Verschachtelungsmodell des ausgewählten Elements an, wie im Folgenden dargestellt.

    Registerkarte "Layout" des DOM Explorer

    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 das <img>-Element 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.

  10. 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 "10em" festgelegt ist, der berechnete Wert aber "146.66px" lautet.

    Tipp Tipp

    Die Registerkarte Berechnet zeigt, dass die margin-left-Regel im CSS-Selektor .itemspage .itemslist .item .item-image festgelegt ist, die Sie in "items.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.

  11. Klicken Sie auf der Registerkarte Layout im Feld Rand auf der linken Seite des Felds auf 146.66.

  12. 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.)

  13. Wechseln Sie zum Simulator. Der aktualisierte Wert des linken Rands wird auf das erste Bild im Simulator angewendet. Er wird außerdem auf der Registerkarte Berechnet unter der margin-left-Regel aktualisiert.

Community-Beiträge

Anzeigen:
© 2014 Microsoft