Debuggen von HTML und CSS mit den Entwicklertools (möglicherweise in englischer Sprache)

Internet Explorer 8 stellt verbesserte Entwicklertools bereit, um Ihnen bei der Untersuchung und Lösung von Problemen mit HTML, Cascading Stylesheets (CSS) und Microsoft JScript zu helfen. Dieser Artikel legt den Schwerpunkt auf die HTML- und CSS-Tools unter den Entwicklertools.

• Einführung
• Öffnen und Schließen der Entwicklertools
• Auswählen von Objekten auf einer Webseite
• Überprüfen von HTML-Elementen
  • Verwenden der Tools für Formatvorlagen und Nachverfolgen von Formatvorlagen
  • Verwenden des Layouttools
  • Verwenden des Attribute-Tools
• Überprüfen von CSS-Regeln
• Speichern von Änderungen
• Zusammenfassung
• Verwandte Themen

Einführung

Die Funktion "Entwicklertools" von Internet Explorer 8 ermöglicht Ihnen, die interne Darstellung des Browsers auf einer Webseite zu überprüfen. Sie können die Entwicklertools für eine Vielzahl von Aufgaben verwenden, einschließlich (aber hat nicht beschränkt auf) des Anzeigens einzelner Attribute, des Ermittelns, warum eine bestimmte CSS-Regel auf ein bestimmtes Element angewendet wird, und des Anzeigens unterschiedlicher Dokumentkompatibilitätsmodi in der Vorschau. Da deutlich wird, wie der Browser eine Webseite interpretiert, stellen die Entwicklertools viele Möglichkeiten bereit, Probleme zu untersuchen und zu lösen. Dies erfolgt schneller als in den früheren Versionen von Internet Explorer.

Dieser Artikel legt den Schwerpunkt auf die HTML- und CSS-Entwicklertools. Informationen zum Verwenden der Entwicklertools für das Debuggen in JScript finden Sie in Debuggen von Skripts mithilfe der Entwicklertools (möglicherweise in englischer Sprache).

Öffnen und Schließen der Entwicklertools

Um die Entwicklertools zu öffnen, drücken Sie F12; alternativ klicken Sie im Menü "Extras" der Internet Explorer 8-Symbolleiste auf "Entwicklertools". Das folgende Image zeigt das Fenster "Entwicklertools" an.

Abbildung 1. Befehl "Entwicklertools" und Schaltfläche "Schließen".

Sobald die Entwicklertools gestartet wurden, können Sie in einem eigenen Fenster angezeigt oder zur Instanz des Browsers fixiert werden, in dem sie geöffnet wurde. Jede Internet Explorer-Registerkarte hat eine eigene Instanz der Entwicklertools. Wenn Sie mit mehreren Instanzen der Entwicklertools arbeiten, verwenden Sie die Funktion "Anheften" – diese Schaltfläche wird oben rechts im Fenster "Entwicklertools" angezeigt – um die Entwicklertools zum jeweiligen Fenster zu fixieren. Sobald es fixiert wurde, kann das Fenster "Entwicklertools" in der Größe angepasst werden, um einen größeren Anzeigebereich anzuzeigen.

Sie können die Entwicklertools auf eine von mehreren Arten schließen: Durch Drücken von F12, Klicken auf die Schaltfläche "Entwicklertools" im Menü "Extras", Klicken auf die Schaltfläche "Schließen" in der rechten oberen Ecke des Fensters "Entwicklertools" oder Schließen des Internet Explorer-Fensters oder der Registerkarte, auf der es geöffnet wurde.

Auswählen von Objekten auf einer Webseite

Viele HTML- und CSS-Entwicklertools sind für einzelne Elemente in einer Webseite gültig. Um ein Element auszuwählen, heben Sie es in der HTML-Registerkarte hervor, oder klicken Sie im Suchmenü von "Entwicklertools" auf "Element durch Klicken auswählen". Wenn Sie auf diese Schaltfläche klicken, können Sie die Maus verwenden, um ein Element auf der Webseite auszuwählen. Verschieben Sie den Cursor über ein Element; wenn ein blaues Feld den Rahmen des Elements hervorhebt, klicken Sie, um das Element auszuwählen. Die folgende Abbildung zeigt die Ergebnisse an, wenn ein Element ausgewählt wurde.

Abbildung 3. Die Schaltfläche "Element durch Klicken auswählen" und die Ergebnisse einer Elementauswahl.

Wenn Sie ein HTML-Element hervorheben und darauf klicken, zeigt die HTML-Registerkarte die Attribute des ausgewählten Elements an, zusammen mit dessen Position in der internen Darstellung, die von Internet Explorer 8 verwendet wurde, um die Webseite anzuzeigen. Sie können die aktuellen Attributwerte des Elements anzeigen und mithilfe der HTML-Registerkarte mit neuen Werten experimentieren, um sie zu ändern. Um einen Attributwert zu ändern, klicken Sie auf ihn, geben Sie einen neuen Wert ein, und drücken Sie dann EINGABETASTE; Internet Explorer 8 zeigt die Wirkungen der Änderung an. Sie können Teilwerte verwerfen, indem Sie ESC drücken. Aktualisieren Sie die Webseite, um die ursprüngliche Version wiederherzustellen.

Hinweis  Änderungen, die mithilfe der HTML-Registerkarte durchgeführt wurden, beeinflussen die zugrunde liegende Quelle einer Webseite nicht; sie bleiben bis zur Aktualisierung einer Webseite gültig oder bis der Browser zu einer neuen Webseite navigiert oder geschlossen wird. Informationen zum Speichern von Änderungen finden Sie unten im Abschnitt "Speichern von Änderungen".

Überprüfen von HTML-Elementen

Die HTML-Registerkarte hilft Ihnen, die Präsentation von HTML-Elementen auf einer Webseite zu überprüfen. Die HTML-Registerkarte zeigt zwei Anzeigebereiche. Der Bereich links ist der primäre Inhaltsbereich, und der Bereich rechts ist der Eigenschaftenbereich.

• Im primären Inhaltsbereich wird das gesamte Dokumentobjektmodell (DOM) in einer Strukturknotenstruktur dargestellt, die erweitert oder reduziert werden kann. Verwenden Sie diesen Bereich, um die HTML-Quellen zu untersuchen und zu überprüfen. Attribute und Werte von HTML-Elementen sind bearbeitbar, indem sie auf sie klicken. Textknoten sind auch in diesem Modus bearbeitbar. Wenn Sie jedoch die ganze Webseite in einem Editorformat bearbeiten möchten, können Sie auf die Schaltfläche "Bearbeiten" klicken. Im Bearbeitungsmodus ist die Schaltfläche "Zeilenumbruch" aktiviert. Sie werden auch feststellen, dass der Inhalt dieser Seite möglicherweise nicht genau der ursprünglichen Quelle entspricht, da es sich um die interne Darstellung von Internet Explorer für diese Webseite handelt. Wenn Sie JScript-Aufrufe haben, um Inhalt in die Seite zu schreiben, werden diese im Bearbeitungsmodus angezeigt. Wenn Sie die Bearbeitung abgeschlossen haben, klicken Sie erneut auf die Schaltfläche "Bearbeiten". Die Änderungen werden sofort wirksam.
• Der Eigenschaftenbereich verfügt über eine Menüleiste zum Auswählen von Eigenschaftentypen. Die Eigenschaftentypauswahl bietet mehrere Tools an, die Ihnen bei der näheren Überprüfung der Quellen helfen. Während der primäre Inhaltsbereich z. B. im DOM-Modus ist, können Sie klicken, um ein zu überprüfendes HTML-Element auszuwählen. Nach dem Klicken werden die Eigenschaften des Elements im Eigenschaftenbereich angezeigt. Wie und welche Informationen präsentiert werden, hängt vom Eigenschaftentyp ab, den Sie gerade ausgewählt haben. Wenn der aktuelle Typ z. B. Formatvorlage ist, wird Ihnen eine Liste von CSS-Regeln angezeigt, die auf dieses Element angewendet wurden. Die anderen Eigenschaftentypen sind Ablaufverfolgungsformate, Layout und Attribute.

Verwenden der Tools für Formatvorlagen und Nachverfolgen von Formatvorlagen

Wenn die Tools "Format" und "Formate nachverfolgen" auf mehrere CSS-Regeln treffen, die für das ausgewählte Element gelten, werden die Regeln auf der Grundlage ihrer Spezifizität anhand der CSS-Spezifikation angezeigt. Die Regel oben auf der Liste ist die erste, die auf das ausgewählte Element angewendet wird, während die letzte Regel auf der Liste diejenige ist, die zurzeit die Formateigenschaften eines ausgewählten Elements definiert. Die Werte dieser Regeln sind bearbeitbar: Klicken Sie auf einen Wert, geben Sie in einen neuen Wert ein, und drücken Sie die EINGABETASTE; eine Änderung wird sofort auf der Webseite angezeigt. Die Informationen in beiden Eigenschaftentypen sind die gleichen. Im Eigenschaftentyp "Formate nachverfolgen" werden die gleichen Informationen jedoch mit den unter ihnen angezeigten Regeln nach Eigenschaften gruppiert. Die Eigenschaften werden in alphabetischer Reihenfolge aufgeführt, und die Regeln werden auch hier anhand der Spezifizität angeordnet.

Verwenden des Layouttools

Das Layouttool bietet die Feldmodellinformationen für die relative Positionierung eines Elements auf einer Webseite an. Die verfügbaren Informationen sind:

• Offset: Diese Werte beschreiben die Entfernung zwischen dem ausgewählten Objekt und dessen übergeordneten Element, dargestellt durch die Eigenschaften offsetLeft und offsetTop.
• Rand, Rahmen und Padding: Diese drei Werte zeigen die in der Quelle einer Webseite angegebenen Werte an. Wenn keine Werte angegeben werden, zeigt das Tool die von Internet Explorer verwendeten Standardwerte an.
• Breite und Höhe: Die innersten Werte sind die Breite und Höhe des Elements, definiert durch die Eigenschaften offsetHeight und offsetWidth.

Für jedes Feldmodellattribut werden der Wert und die Maßeinheiten angezeigt. Klicken Sie auf einen Wert, um ihn zu bearbeiten, drücken Sie dann die EINGABETASTE, um den neuen Wert zu übergeben, oder ESC, um ihn zu verwerfen. Sobald Sie die EINGABETASTE drücken, wird der neue Wert unmittelbar wirksam. Standardmäßig (wenn die Maßeinheit nicht angezeigt wird), behandelt das Layouttool Feldmodellwerte als Pixel.

Verwenden des Attribute-Tools

Das Tool "Attribute" enthält die Attribute eines HTML-Elements als eine Liste von Name-Wert-Paaren. Sie können die Informationen und den Namen eines Attributs und eines Wert überprüfen, indem Sie darauf doppelklicken. Der Name und die Wertinformation des Attributs können auch im primären Inhaltsbereich bearbeitet werden, indem Sie darauf klicken. Der Wert eines Attributs ist möglicherweise leer oder null, der Name eines Attributs darf jedoch nicht leer sein. Änderungen an diesen Informationen werden sofort auf der Webseite angezeigt. Das Tool "Attribute" stellt außerdem eine Option für das Hinzufügen zusätzlicher Attribute zum Element oder für das Entfernen von Attributen aus dem Element bereit, indem Sie auf die entsprechende Schaltfläche oben auf der Seite klicken.

Überprüfen von CSS-Regeln

Die CSS-Registerkarte ermöglicht Ihnen, das Zusammenspiel der Stylesheets zu verstehen. Es ist sehr nützlich für Sites, die mehrere Stylesheets verwenden. Um zwischen Stylesheets umzuschalten, verwenden Sie die Stylesheetauswahl. Wenn Sie ein Stylesheet auswählen, werden die Regeln und ihre zugeordneten Formateigenschaften im primären Inhaltsbereich angezeigt. Diese Informationen werden nach Formatierungsregeln gruppiert. Standardmäßig zeigt diese Schaltfläche das erste, auf der Webseite verwiesene Stylesheet an. Wie in Abbildung 4 gezeigt, werden die Regeln der Stylesheets unterhalb der Schaltfläche "Stylesheetauswahl" angezeigt.

Abbildung 4. Das CSS-Tool zeigt die in allen von einer Webseite verwendeten Stylesheets definierten Regeln an.

Um die Eigenschaften einer Regel zu erweitern oder zu reduzieren, klicken Sie auf das Feld, das mit dem Zeichen + oder - markiert ist. Alle Elemente in dieser Stylesheetansicht sind bearbeitbar, und die Bearbeitungen werden sofort wirksam. Eine Formatregel kann aktiviert oder deaktiviert werden, indem Sie auf das Kontrollkästchen neben dem Formatnamen klicken. Alternativ können Sie eine einzelne Eigenschaft oder mehrere Eigenschaften aktivieren oder deaktivieren, um die Auswirkungen auf die Regel anzuzeigen.

Speichern von Änderungen

Nachdem Sie Änderungen an der HTML-Seite und den CSS-Dateien vorgenommen haben, klicken Sie auf die Schaltfläche "Speichern", um die Änderungen zu speichern. Das Dialogfeld "Speichern unter" fordert Sie auf, die Datei als .txt zu speichern und nicht als .html oder .css. Dies verhindert, dass Sie die Hauptquelldateien unbeabsichtigt überschreiben. Außerdem betreffen alle in den Entwicklertools vorgenommenen Änderungen die interne Darstellung der Webseite durch Internet Explorer der Webseite und nicht die ursprüngliche Quelle. Daher wird der ursprüngliche Inhalt der Webseite durch das Aktualisieren der aktuellen Webseite, das Navigieren weg von ihr oder das Ausführen von "Alles rückgängig" wieder angezeigt.

Hinweis  Wenn Sie in den Entwicklertools arbeiten, denken Sie daran, dass sich nicht nur die geänderten Bereiche einer Webseite von den Quellen unterscheiden, sondern möglicherweise auch andere Teile, da die Entwicklertools die Webseite anzeigen, wie sie in Internet Explorer vorhanden ist und nicht in den Quellen. Damit das ungewollte Überschreiben der Quellen verhindert wird, speichern die Entwicklertools die Ausgabe als Text und fügen einen weiterführenden Kommentar zur gespeicherten Datei hinzu.

Zusammenfassung

Die Internet Explorer 8-Entwicklertools helfen Ihnen, Probleme mit Webseiten zu beheben und aufzulösen. Die HTML-Tools ermöglichen Ihnen, sich auf bestimmte Attributen und Eigenschaften einzelner HTML-Elemente auf einer Webseite zu konzentrieren. Die CSS-Tools stellen eine größere Übersicht bereit und zeigen an, wie verschiedene Regeln und Eigenschaften in den Stylesheets von Internet Explorer 8 interpretiert werden. Da sich die Änderungen, die Sie in den Entwicklertools an den Quellen vornehmen, nur auf die interne Darstellung von Internet Explorer der Website auswirken, und nicht direkt auf die ursprüngliche Quelle, wird die Schaltfläche "Speichern" bereitgestellt. Diese ermöglicht Ihnen das Speichern von Änderungen und die Aktualisierung der Quellen. Dies spart Zeit und verbessert die Effizienz bei der Pflege und Wartung von Webseiten.

Verwandte Themen

• Debuggen von Skripts mithilfe der Entwicklertools (möglicherweise in englischer Sprache)
• Profilerstellungsskript mit den Entwicklertools (möglicherweise in englischer Sprache) 
• Referenz zur Benutzeroberfläche der Entwicklertools (möglicherweise in englischer Sprache)
• Referenz zu Tastenkombinationen für Entwicklertools (möglicherweise in englischer Sprache)
• Definieren der Dokumentkompatibilität (möglicherweise in englischer Sprache)
• Process Debug Manager (möglicherweise in englischer Sprache)
• Windows-Skriptschnittstellen (möglicherweise in englischer Sprache)