Debuggen von CSS-Stilen mithilfe von DOM Explorer

Wenn Sie Windows Store- und Windows Phone Store-Apps debuggen, können Sie CSS-Regeln für ausgewählte DOM-Elemente und ihre untergeordneten Elemente anzeigen und ändern.

Im DOM Explorer werden auf den Registerkarten Formatvorlagen und Berechnet die CSS-Regeln aufgeführt, die für ein ausgewähltes Element gelten. Die Regeln werden in der Reihenfolge ihrer Besonderheit entsprechend CSS-Präzedenzregeln angezeigt. Regeln, die sich ganz oben in einer Auswahl oder einem Stil auf einer Registerkarte befinden (die spezifischsten Regeln), werden als letzte auf das ausgewählte Element angewendet, und die Regeln ganz unten in einer Auswahl oder einem Stil werden als erste angewendet. Wenn Regeln angewendet werden, überschreiben diese zuvor angewendete Regeln.

Die Registerkarten Formatvorlagen, Berechnet und Änderungen enthalten unterschiedliche Ansichten von Formatinformationen.

• Verwenden Sie die Registerkarte Formatvorlagen, um die Regeln anzuzeigen, die nach CSS-Auswahlname organisiert sind, z. B. html, body. Sie können diese Registerkarte auch verwenden, um besondere Formatvorlagen zu aktivieren oder zu deaktivieren, Werte manuell zu bearbeiten und die unmittelbaren Ergebnisse dieser Änderungen anzuzeigen.

• Verwenden Sie die Registerkarte Berechnet, um die berechneten Werte einer Formatvorlage anzuzeigen. Wenn Sie eine Größe z. B. auf "1em" festlegen, kann der von Internet Explorer berechnete Wert "16px" sein. Die Formatvorlagen in dieser Registerkarte sind nach Formatnamen organisiert, wie z. B. height. Sie können diese Registerkarte auch verwenden, um besondere Formatvorlagen zu aktivieren oder zu deaktivieren, Werte manuell zu bearbeiten und die unmittelbaren Ergebnisse dieser Änderungen anzuzeigen.

  Hinweis

  In Visual Studio 2013 Update 2 wurden die in der Registerkarte Ablaufverfolgung bereitgestellten Informationen mit der Registerkarte Berechnet zusammengeführt und Ablaufverfolgung entfernt.

• Verwenden Sie die Registerkarte Änderungen, um CSS-Formatvorlagen, die Sie während einer Debugsitzung geändert haben, zu identifizieren und zu verfolgen.

Beispiel für das Beheben einer CSS-Regel

Dieses Beispiel zeigt, wie CSS-Regeln überprüft und ein Formatvorlagenproblem debuggt wird. Nehmen wir in diesem Beispiel an, dass Sie die Farbe einer Schriftart ändern möchten, die für die Anzeige von Gruppentiteln in der Vorlage Windows Store"Split App" verwendet wird.

So zeigen Sie CSS-Regeln an und ändern diese

1. Erstellen Sie in Visual Studio eine Windows Store-App mit JavaScript und HTML in der Projektvorlage "Split App".

2. Öffnen Sie im Projektmappen-Explorer die Formatvorlage "items.css". (Sie finden items.css im Seitenordner.)

3. Ersetzen Sie den folgenden CSS-Code:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
       }
   

   durch diesen:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
           color: #ff6a00;
       }
   

   Hierdurch wird ein Format hinzugefügt, das die Farbe #ff6a00 (orangefarben) für jedes Element in der Liste angibt. Die CSS-Auswahl, .itemspage .itemslist .item, gibt einen Satz von Klassennamen für DIV-Elemente in items.html an, die als geschachtelte Elemente im aktiven DOM angezeigt werden. Das DIV-Element item gibt die Listenelemente an.

4. Wählen Sie in der Dropdownliste auf der Symbolleiste Debuggen die Option Simulator aus (Lokaler Computer ist der Standardwert).

   

5. Drücken Sie F5, um die App im Debugmodus auszuführen.

   Wenn die Anwendung vollständig geladen ist, schauen Sie sich die Überschriften der Listenelemente wie z. B. Gruppentitel: 1 an. Da die Farbe unverändert ist, wurde Orange auf die Namen nicht angewendet. Die Ursache des Fehlers wird ermittelt und im DOM Explorer mithilfe der CSS-Registerkarten behoben.

   Tipp

   Sobald die App im Simulator angezeigt wird, positionieren Sie den Simulator direkt neben dem Visual Studio-Fenster, sodass die Ergebnisse der Auswahl und vorgenommenen Änderungen an den CSS-Stilen 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. Das Beispiel zeigt die Schaltfläche Element auswählen.

   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 und CSS.

7. Bewegen Sie im linken Bereich der Startseite den Mauszeiger im Simulator über den Titel des ersten Elements in der Liste Gruppentitel: 1. Der Titel wird wie hier gezeigt hervorgehoben:

   

   Hinweis

   Der Windows Phone-Emulator unterstützt das Hervorheben von Elementen durch Zeigen mit dem Mauszeiger nur teilweise.

8. Klicken Sie auf den umrandeten Namen. DOM Explorer wählt automatisch das entsprechende HTML-Element aus, das diesem ähnelt.

   <h4 class="item-title">Group Title: 1</h4>
   

   Bei der Auswahl des H4-Elements im DOM Explorer werden nun auf den Registerkarten des DOM Explorer die Regeln angezeigt, die dem H4-Element zugeordnet sind. In diesem Beispiel ist die Registerkarte Berechnet mit der geöffneten color-Eigenschaft zu sehen:

   

   Diese Ansicht bietet nützliche Informationen zu den Regeln, die der color-Formatvorlage zugeordnet sind, wie im folgenden Beispiel dargestellt.

   • Die CSS-Auswahl, die Sie in items.css, .itemspage .itemslist .item, geändert haben, wird nicht in der letzten Formatberechnung verwendet (erscheint als durchgestrichener Text). Mehrere andere Vorkommen des color-Formatvorlage werden ebenfalls nicht verwendet.

     Tipp

     Bei längeren Auswahlnamen erscheint der volle Name in einer QuickInfo.

   • Der endgültige berechnete CSS-Wert, rgba(255, 255, 255, 0.87), wird speziell für die folgende CSS-Auswahl festgelegt: .itemspage .itemslist .item .item-overlay .item-title, die auch in items.css definiert ist.

     Tipp

     Nachdem Sie nun wissen, wo die Titelfarbe festgelegt wird, wissen Sie auch, wo Sie diese ändern.Allerdings können Sie Änderungen im DOM Explorer auch testen, ohne die Anwendung zu aktualisieren, wie in den verbleibenden Schritten gezeigt.

9. Deaktivieren Sie das Kontrollkästchen für das erste Vorkommen der color-Formatvorlage, das für die Auswahl .itemspage .itemslist .item .item-overlay .item-title gilt. Nun sehen Sie im Simulator, dass die Farbe aller Elementtitel sich in Orange ändert, wie Sie beabsichtigt haben. Und die Auswahl, die Sie in CSS geändert haben, .itemspage .itemslist .item, wird nicht mehr überschrieben (das heißt, sie wird nicht mehr als durchgestrichener Text dargestellt). In diesem Beispiel sehen Sie die Registerkarte Berechnet, nachdem die Kontrollkästchen deaktiviert wurden.

   

10. Wählen Sie die Registerkarte Änderungen aus.

    Verwenden Sie die Registerkarte Änderungen, um Formatvorlagen, die Sie während einer Debugsitzung geändert haben, zu identifizieren und zu verfolgen. Die folgende Abbildung zeigt die jetzt überschriebene .itemspage .itemslist .item .item-overlay .item-title-Auswahl in der Registerkarte Änderungen.

    

11. Sie können die Werte der CSS-Formatvorlage auch manuell bearbeiten und das unmittelbare Ergebnis auf der Registerkarte Formatvorlagen anzeigen.

12. Wählen Sie die Registerkarte Formatvorlagen aus.

13. Öffnen Sie den .itemspage .itemslist .item .item-overlay .item-title-Formatvorlagenselektor.

14. Wählen Sie das zweite Vorkommen der color-Formatvorlage aus, und doppelklicken Sie dann auf den Eigenschaftswert rgb(255, 255, 255, 0.87).

15. Verwenden Sie die Tastatur, um diesen Wert zu ändern. Ändern Sie den Wert in rgb(255, 255, 0, 0.87), und drücken Sie dann die EINGABETASTE. Im Simulator ändert sich die Farbe der Elementnamen in Gelb.

16. Um Änderungen an der CSS-Quelldatei vorzunehmen, klicken Sie auf der Registerkarte Formatvorlagen auf den Link items.css. Hierdurch wird die Datei "items.css" geöffnet, in der Sie den Wert der color-Formatvorlage in Ihrem App-Code ändern können. Um die App zu aktualisieren, ohne den Debugger zu beenden und neu zu starten, klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche (Windows-App aktualisieren).

Siehe auch

Aufgaben

Anzeigen von DOM-Ereignislistenern

Konzepte

Schnellstart: Debuggen von HTML und CSS

Debuggen von Layout mithilfe von DOM Explorer

Weitere Ressourcen

Produktsupport und Barrierefreiheit