Verwenden der F12-Entwicklungstools zum Debuggen von HTML und CSS

Dieser Inhalt bezieht sich auf eine ältere Version der F12-Entwicklungstools. Sehen Sie sich unsere neueste Dokumentation zu den F12-Tools an.

Die F12-Tools sind hilfreich, um Fehler in HTML- und CSS (Cascading Stylesheets)-Code zu finden und zu beheben, die im Quellcode u. U. nur schwer zu finden sind. Da bei der Interpretation des Quellcodes durch Windows Internet Explorer der HTML- und CSS-Code in einer DOM-Struktur (Document Object Model, Dokumentobjektmodell) angezeigt wird, gestaltet sich das Debuggen des Codes einfacher, z. B. bei dynamisch generierten Änderungen.

Das Thema umfasst die folgenden Abschnitte:

Verwenden der Registerkarte "HTML"

Auf der Registerkarte "HTML" wird das dynamische Markup der Webseite in einer Strukturansicht angezeigt, wie von Windows Internet Explorer 9 im Speicher dargestellt. Die Strukturansicht spiegelt das DOM beim Öffnen der F12-Entwicklungstools wider. Wenn Änderungen vorgenommen werden, muss sie aktualisiert werden. Sie können mithilfe der Maus oder Tastatur direkt in der Struktur navigieren und Attribute anzeigen sowie Werte ändern.

Wenn Sie zu einem bestimmten Element auf einer Webseite springen möchten, drücken Sie STRG+B, oder klicken Sie auf die Schaltfläche Element durch Klicken auswählen Schaltflächensymbol "Element durch Klicken auswählen". Auf der Webseite werden Elemente hervorgehoben, wenn Sie mit der Maus darauf zeigen. Wenn Sie auf ein Element klicken, wird in der HTML-Ansicht der betreffende Knoten in der DOM-Struktur markiert.

Auswahl eines Elements auf einer Webseite

Der Code, der durch Klicken auf ein Element auf einer Webseite ausgewählt wurde

Wenn Sie auf der Registerkarte „HTML“ ein Element auswählen, können Sie über das Menü „Ansicht“, „Quelle“, die Ansicht so filtern, dass die ausgewählten Elemente entweder zusammen mit den zugehörigen CSS-Stilen oder allein angezeigt werden.

Wenn Sie auf die Schaltfläche Elementquellcode mit Format Schaltfläche "Elementquellcode mit Format" in den F12-Entwicklungstools klicken, werden nur der HTML-Quellcode und der Inhalt des ausgewählten Elements sowie das jeweils geltende CSS in einem neuen Fenster angezeigt. So können Sie den Fokus nur auf die Quellen des ausgewählten Elements legen. Zuerst muss ein HTML-Element im Body der DOM-Struktur in der -Registerkartenansicht ausgewählt werden, um diesen Befehl ausführen zu können. Klicken Sie zum Auswählen eines Elements auf die Schaltfläche Element durch Klicken auswählen, oder klicken Sie in der DOM-Struktur auf das gewünschte Element. Wenn Sie Element durch Klicken auswählen verwenden, ist es ratsam, zuvor die Ansicht zu aktualisieren.

Klicken Sie zum Erweitern oder Reduzieren der Eigenschaften eines Elements auf das Feld mit dem Plus- (+) bzw. Minuszeichen (-). Alle Elemente in den Ansichten "HTML" und "CSS" können bearbeitet werden, und die Bearbeitungen werden sofort wirksam. Formatregeln und -attribute können durch Klicken auf das Kontrollkästchen neben dem Elementnamen deaktiviert und aktiviert werden.

Anzeigen von Dynamic HTML-Code

Auf den meisten Websites wird dynamischer Code verwendet. Clientseitiges Scripting wird häufig verwendet, um das gerenderte HTML zu generieren, das dem Benutzer angezeigt wird. Statischer HTML-Code ist häufig minimal und wird nur zur Einleitung von Vorgängen auf der Seite verwendet. Da mit den F12-Entwicklungstools HTML- und CSS-Code so angezeigt wird, wie er im Browser gerendert wird, und nicht der reine HTML-Quellcode, sind Fehler leichter zu finden.

Auf der Registerkarte "HTML" wird der aktuelle Zustand des DOM angezeigt, und Änderungen werden nicht automatisch nachverfolgt. Wenn Sie einen Wert oder ein Attribut ändern und die Änderung nicht sofort angezeigt wird, drücken Sie F5 auf der Registerkarte "HTML", um die Ansicht zu aktualisieren.

Ändern von Werten und Hinzufügen von Attributen

Mit den F12-Entwicklungstools können Sie den Wert praktisch jedes Attributs bzw. jeder Eigenschaft ändern. Wählen Sie auf der Registerkarte "HTML" ein Element aus. Dazu können Sie die DOM-Struktur oder die Schaltfläche Element durch Klicken auswählen verwenden. Klicken Sie in der Eigenschaftenansicht (rechter Bereich) auf einen Wert, um diesen zu markieren und zu ändern.

Öffnen Sie z. B. die CSS-Beispielseite aus Hinzufügen abgerundeter Ecken mit CSS3 in Internet Explorer 9, und drücken Sie F12, um die Tools zu öffnen. Klicken Sie auf die Schaltfläche Element durch Klicken auswählen Schaltflächensymbol "Element durch Klicken auswählen", und klicken Sie auf den dunkelroten Titel Now in stock at Fourth Coffee. Klicken Sie im Eigenschaftenbereich auf das Farbattribut unter dem "h2"-Selektor. Geben Sie einen neuen Farbnamen oder -wert ein, z. B. Blau, und drücken Sie die EINGABETASTE. Die Farbe der Überschrift wird sofort geändert.

Klicken Sie im linken Bereich der Registerkarte "HTML" oder "CSS" mit der rechten Maustaste auf ein Element, und klicken Sie dann im Kontextmenü auf Attribut hinzufügen, um ein Attribut hinzuzufügen. Sie müssen das Format des Attributs, z. B. "background-color:", und die richtigen Werte kennen.

Klicken Sie im rechten Bereich auf das Attribut, und drücken Sie dann die ENTF-TASTE, um ein von Ihnen hinzugefügtes oder ein vorhandenes Attribut zu entfernen. Attribute auf der ursprünglichen Seite können durch Aktualisieren der Webseite wieder angezeigt werden. Von Ihnen hinzugefügte Attribute müssen erneut hinzugefügt werden.

Wenn Sie ein Attribut lediglich während einer Sitzung vorübergehend deaktivieren möchten, deaktivieren Sie das Kontrollkästchen neben dem Attribut im rechten Bereich der Registerkarte "HTML" oder "CSS".

Ansichten und Tools auf der Registerkarte "HTML"

Wenn Sie in der Strukturansicht im linken Bereich ein Element auswählen, können Sie rechts Formate, das Layout des Verschachtelungsmodells sowie Attribute für das ausgewählte Element und für untergeordnete Elemente anzeigen und ändern. Änderungen werden nicht dauerhaft vorgenommen und gehen verloren, wenn Sie die Seite aktualisieren oder eine andere Seite öffnen. Sie können jedoch den HTML-Code speichern, indem Sie auf die Schaltfläche Speichern klicken.

Wenn Sie auf den Registerkarten "Format" und "Formate nachverfolgen" mehrere CSS-Regeln anzeigen, die für ein ausgewähltes Element gelten, werden die Regeln nach ihrer Genauigkeit laut der CSS-Spezifikation angezeigt. Die ganz oben in der Liste angezeigte Regel wird zuerst auf das ausgewählte Element angewendet, während die ganz unten angezeigte Regel die ist, die aktuell die Formateigenschaften eines ausgewählten Elements definiert. Die Werte dieser Regeln können bearbeitet werden: Klicken Sie auf einen Wert, geben Sie einen neuen Wert ein, und drücken Sie die "Eingabetaste". Änderungen werden auf der Webseite sofort sichtbar. Die Informationen in den beiden Eigenschaftentypen sind identisch. Allerdings werden beim Eigenschaftentyp "Formate nachverfolgen" dieselben Informationen nach Eigenschaften gruppiert, unter denen die Regeln angezeigt werden. Die Eigenschaften werden in alphabetischer Reihenfolge aufgelistet, und die Regeln werden nach Genauigkeit sortiert.

Bildschirmfoto der Registerkarte "HTML" in den F12-Entwicklungstools

  • Format zeigt die Regeln und Formate für ein in der Strukturansicht ausgewähltes Element an. Die Anzeige ist nach Regeln sortiert, und sie umfasst vererbte und überschriebene Attribute.

    Bildschirmfoto der Registerkarte "Format" auf der Registerkarte "HTML"

  • Formate nachverfolgen enthält dieselben Informationen wie "Format", jedoch sind diese nicht nach Regeln, sondern nach Eigenschaften gruppiert.

    Bildschirmfoto der Registerkarte "Formate nachverfolgen" auf der Registerkarte "HTML"

  • Layout zeigt das Verschachtelungsmodell für das ausgewählte Element an. Jeder Wert in der Ansicht "Layout" kann geändert werden, indem Sie im Diagramm darauf klicken. Für SVG-Elemente (Scalable Vector Graphics, Skalierbare Vektorgrafiken) ist die Registerkarte Layout aktiviert.

    Ansicht des CSS-Verschachtelungsmodells eines ausgewählten Elements

  • Attribute zeigt die Attribute, z. B. "ID", für das ausgewählte Element an Attribute können hinzugefügt oder entfernt werden.

    Bildschirmfoto der Registerkarte "Attribute" mit einem ausgewählten Element und den zugehörigen Attributen

Kontextmenü auf der Registerkarte "HTML "

Wie bereits erwähnt, können Sie im linken Bereich der Registerkarte "HTML" mit der rechten Maustaste auf ein Element klicken. Im Folgenden sind die auf der Registerkarte "HTML" verfügbaren Optionen aufgeführt.

MenüelementFunktion
Attribut hinzufügenFügt einem Tag oder Element ein neues Attribut hinzu.
KopierenKopiert das Tag und die Attribute in die Zwischenablage.
InnerHTML kopierenKopiert den InnerHTML-Inhalt (untergeordnete Texte, Elemente und Attribute) eines Elements in die Zwischenablage.
OuterHTML kopierenKopiert den OuterHTML-Inhalt (untergeordnete Texte, Elemente und Attribute) eines Elements in die Zwischenablage.

 

Wenn Sie auf der Registerkarte "HTML" auf einen untergeordneten Knoten eines Elements klicken, z. B. auf das Textelement eines "h2"-Tags, werden möglicherweise nicht alle Optionen angezeigt. Wenn die gewünschte Option nicht angezeigt wird, wechseln Sie zum übergeordneten Element, und versuchen Sie es erneut.

Untersuchen von CSS-Regeln

Auf der Registerkarte "CSS" erhalten Sie einen Einblick in das Zusammenspiel der Stylesheets. Besonders nützlich ist diese Registerkarte für Websites, die mehrere Stylesheets verwenden. Verwenden Sie die Stylesheetauswahl, um zwischen Stylesheets umzuschalten. Wenn Sie ein Stylesheet auswählen, werden die Regeln und die jeweils zugeordneten Formateigenschaften im linken Bereich angezeigt. Standardmäßig wird über diese Schaltfläche das erste Stylesheet angezeigt, auf das auf der Webseite verwiesen wird. Wenn auf der Webseite mehrere Stylesheets verwendet werden, klicken Sie auf die Dropdownliste, um ein anderes Stylesheet auszuwählen.

Bildschirmfoto der Dropdownliste mit Stylesheets in der Stylesheetauswahl

Optionen im Kontextmenü auf der Registerkarte CSS

Wenn Sie mit der rechten Maustaste auf die Registerkarte "CSS" klicken, werden im Kontextmenü mehr Optionen angezeigt als auf der Registerkarte "HTML". Die aktivierten Optionen sind kontextbezogen und von der Position abhängig, auf die Sie auf der Registerkarte "CSS" klicken.

MenüelementFunktionRechtsklick
Attribut hinzufügenFügt einem Tag oder Element ein neues Attribut hinzu.Auf eine Regel oder ein Attribut (beliebiges Element).
Regel hinzufügenFügt einen Selektor, eine Deklaration oder ein Format hinzu.In den weißen Bereich, nicht auf ein vorhandenes Element.
Regel danach hinzufügenFügt nach der aktuellen Regel einen Selektor oder eine Regel hinzu.Auf ein beliebiges Element.
Regel davor hinzufügenFügt vor der aktuellen Regel einen Selektor oder eine Regel hinzu.Auf ein beliebiges Element.
Attribut löschenLöscht das ausgewählte Attribut. Auf ein beliebiges Element.
Regel löschenLöscht die ausgewählte Regel und alle zugehörigen Attribute.Auf eine beliebige Regel oder einen beliebigen Selektor.

 

Ändern numerischer CSS-Werte auf der Registerkarte "CSS"

Werte für CSS-Eigenschaften können wie beinahe jede andere Eigenschaft in den F12-Entwicklungstools geändert werden. Sie können zum Ändern von CSS-Eigenschaften auf den Wert der betreffenden Eigenschaft klicken und einen neuen Wert eingeben. Auf der Registerkarte "CSS" können Sie auch die NACH-OBEN- und die NACH-UNTEN-TASTE verwenden, um numerische Werte zu erhöhen bzw. zu verringern.

Suchen und Speichern von Änderungen

Wie auf den übrigen Registerkarten in den F12-Tools können Sie auch auf den Registerkarten "HTML" und "CSS" mit dem Feld Suchen nach bestimmten Tags, Eigenschaften, Attributen oder Werten suchen. Wenn Sie auf die Schaltfläche Suchen klicken, werden alle Instanzen des Schlüsselworts markiert, und in dem Bereich wird ein Bildlauf zum ersten Treffer durchgeführt.

Suchfeld der F12-Entwicklungstools

Wenn mehrere Treffer vorhanden sind, können Sie mithilfe der Schaltflächen Weiter und Zurück einen Bildlauf vorwärts und rückwärts durchführen.

Schaltflächen "Weiter" und "Zurück" für die Suche in den F12-Entwicklungstools

Änderungen wie die Anpassung eines Verschachtelungsmodells oder das Hinzufügen eines Attributs werden nicht gespeichert. Wenn Sie die Seite im Browser erneut laden oder zu einer anderen Webseite navigieren, gehen alle vorgenommenen Änderungen verloren. Klicken Sie im linken Bereich auf die Schaltfläche Speichern, um Ihre Änderungen in einer lokalen Kopie der HTML-/CSS-Datei zu speichern.

Verwandte Themen

Verwenden der F12-Entwicklungstools zum Debuggen von Webseiten

 

 

Anzeigen: