Teil 2: Check: Internet Explorer 8 Developer Tools: Nützlich für SEO und gegen Spam

1. Check: Internet Explorer 8 Developer Tools: Nützlich für SEO und gegen Spam
2. Teil 2: Check: Internet Explorer 8 Developer Tools: Nützlich für SEO und gegen Spam
3. Teil 3: Check: Internet Explorer 8 Developer Tools: Nützlich für SEO und gegen Spam

Im Inhaltsbereich erscheint daraufhin der entsprechende Abschnitt des Quellcodes. Die DT zeigen das interne HTML an, das vom Quellcode auf der Festplatte abweicht, wenn es beispielsweise dynamisch per Javascript geändert wurde. Attribute einzelner HTML-Tags können Sie bearbeiten, indem Sie sie anklicken. Über einen rechten Mausklick lassen sich auch neue Attribute anlegen. Wenn Sie ganz neue Tags einfügen oder die Tag-Reihenfolge im Code verändern möchten bietet sich der integrierte Editor an, den Sie über den Knopf in der Werkzeugleiste oder mit der Tastenkombination ALT + E öffnen.

CSS debuggen

Während der Inhaltsbereich das HTML zeigt, enthält der Eigenschaftenbereich das zugehörige CSS. Auf dem Reiter Format erscheinen die Selektoren in der Reihenfolge, die sich aus der CSS-Kaskade und der daraus abgeleiteten Spezifität ergibt. Dabei steht das Element mit der höchsten Spezifität (das deshalb zuerst angewandt wird) ganz oben.

Format nachverfolgen zeigt dieselben Informationen an, gruppiert Sie aber nach CSS-Eigenschaft und sortiert sie erst dann nach Spezifität. Das erleichtert die Fehlersuche maßgeblich, denn so können Sie beispielsweise direkt unter background nachsehen, aus welchem Stylesheet welcher Wert stammt, wenn der Hintergrund nicht so aussieht, wie Sie es erwartet haben.

Änderungen per Diff verfolgen

Indem Sie Häkchen vor den einzelnen CSS-Einträgen entfernen, können Sie diese temporär deaktivieren. Wie auch die Änderungen am HTML rendert der Internet Explorer diese Eingriffe sofort. So kann man direkt im Browser entwickeln - ohne ständiges Editieren, Speichern, Reload. Nur gelegentlich scheint der CSS-Editor eine Änderung nicht zu übernehmen. Dann hilft es, wenn Sie die jeweilige Einheit (wie px, em) hinzufügen. Natürlich vergisst der Browser Ihre Änderungen, sobald Sie die Seite verlassen oder neu laden. Um die Originaldateien vor versehentlichem Überschreiben zu schützen, legt die Speichern-Funktion ausschließlich .txt-Dateien auf der Festplatte ab und garniert diese noch dazu mit Kommentaren.

Nun kann man kleinere Änderungen noch über die Zwischenablage in das eigene Projekt übernehmen. Für größere benötigt man ein Diff-Programm, mit dem Sie die ursprüngliche und die mit den DT gespeicherte Version automatisiert miteinander vergleichen können. Weil der Internet Explorer den Code neu formatiert, kann das einfache Windiff die Änderungen nicht genau genug erkennen. Eine brauchbare Lösung haben wir im 35 US-Dollar teuren Exam Diff Pro von presto soft.com gefunden.

Präzises Positionieren

Viele Webdesigns sehen nur dann perfekt aus, wenn die verschiedenen Seitenelemente pixelgenau positioniert werden. Und bei dieser Arbeit greifen Ihnen die DT mit gleich drei Funktionen unter die Arme.

© Archiv

Da sind zunächst die Bildschirmlineale, mit denen Sie Größen und Abstände innerhalb des Browsers vermessen. Um diese zu nutzen, aktivieren Sie das Lineal-Popup im Extras-Menü unter Lineal. Dann wählen Sie eine Farbe aus und zeichnen das Lineal bei gedrückter linker Maustaste in die Website ein. Wenn Sie anschließend mit dem Mauszeiger über das Lineal fahren, erscheinen die X- und Y-Koordinaten, der Endpunkt sowie die Gesamtlänge in der Mitte des Lineals. Außerdem können Sie es jetzt verschieben.

Zum präzisen Werkzeug wird das Lineal im Zusammenspiel mit der Bildschirmlupe, die Sie (bei aktivierter Lineal-Funktion) mit STRG + M aktivieren. Und außerdem können Sie im Eigenschaftenbereich die Option Layout aufrufen. Dann erscheint eine genaue Wiedergabe des Box-Models für das ausgewählte HTML-Element auf dem Monitor, dem Sie Margin, Padding und andere Werte entnehmen.

Auf IE8 umstellen

In der Vergangenheit hat man über den Doctype vorgegeben, ob ein Dokument im Quirks- oder im Standard-Mode gerendert werden sollte. Mit IE 8 wird das komplizierter. Neuerdings lässt sich der Browser in den Kompatibilitätsmodus schalten (durch den Benutzer und über eine per Online-Update aktualisierte URL-Liste), in dem er die Seite so anzeigt, als wäre er IE 7.

Im Hauptmenü der DT finden Sie zwei Knöpfe, die Ihnen einschlägige Tests Ihrer Websites erleichtern. Über Browsermodus schalten Sie den Internet Explorer in die Modi Internet Explorer 7 beziehungsweise 8 oder 8 Kompatibilitätsansicht. Das wirkt sich zunächst nur auf den vom Browser übermittelten User Agent aus, der auch die Versions-Nummer und - bei aktivierter Kompatibilitätsansicht - ein Token enthält, an dem der Server den Kompatibilitätsmodus erkennen kann. Allerdings schalten die DT beim Wechsel des Browser-Modus auch den jeweils als Standard definierten Dokumentenmodus ein.

Mit den DT können Sie vorhandene Websites also so anzeigen, wie Sie bei Nutzern von Internet Explorer 7 und 8 erscheinen und dann per Live-Editor den HTML- und CSS-Code von Fehlern befreien. Für den neuen Browser freigegebene Seiten kennzeichnen Sie anschließend mit dem Meta-Tag

<meta http-equiv="X-UA-Compatible" content="IE=8">

zm_timkaufmann