IE Developer Toolbar

Edel sei das Tool, hilfreich und gut… ❗ Das scheint das Motto der Entwickler der IE Developer Toolbar gewesen zu sein. Lange war ich von keinem Stück Software mehr so begeistert. Thomas hattes es mir für mein aktuelles Problem mit der CSS Layout Übersicht empfohlen. Vielen Dank an dieser Stelle! Und sieht’s dann aus:

iedtb

Die Installation des MSI-Package ist denkbar einfach. Zumindest im IE7 sollte für das microsofteigene Tool allerdings „Enable third-party browser extensions“ an sein. Danach einfach den Button in der Toolbar aktivieren und los gehts! Die Website wird lokal gecached und analysiert. Dann kann man anfangen, die Welten von HTML und CSS zu erkunden.

Hier nur ein paar Features, die mir beim ersten Stöbern aufgefallen sind: Man kann sich verschiedene Grids einblenden lassen, zum Beispiel unsichtbare Tabellen und Divider. Man kann Elemente suchen, indem man auf sie klickt. Danach kann man dessen CSS- und HTML-Elemente live bearbeiten und die Auswirkung seiner Programmierfehler direkt in der Vorschau sehen. Es gibt ein Anzeigefenster für die Cascade, durch die das Element geprägt wurde. Alle Eigenschaften der Bilder können eingeblendet werden, inklusiver einer Darstellung nur mit ALT-Tags. Und wahrscheinlich gibt’s noch Tausend andere, coole Sachen, die ich am ersten Tag gar nicht entdeckt habe.

Und nein, das ganze CSS meines Blogs habe ich auch jetzt noch nicht begriffen. Sind an den dicken Balken die margin eines inneren Divders schuld, oder das padding eines äußeren? Und wie schreibe ich das Element im CSS: mit Punkt, Hash oder ganz anders? Oder ist es ein Subelement einer Region? Dafür habe ich jetzt aber zumindest ein Tool, mit dem ich mich ans Debuggen machen kann.

Im IE8 soll das ganze dann von Hause aus drin sein, aber den mag ich noch nicht testen. Derweil lese ich lieber noch die Artikel in Wikipedia und Code Project. und erfreue mich daran, Trackbacks auf meine eigenen Artikel zu setzen.

7 commenti su “IE Developer Toolbar

  1. faulit sagt:

    Ein hoch auf Selbsttrackbacking.

  2. Thomas sagt:

    Hi Carsten,

    Patrick und ich sind auch ziemlich geflasht von dem Tool.

    Wegen der Fragen im vorletzten Absatz deines Artikels: So aus dem Stegreif kann ich das nicht sagen. Aber ich kann Dir sagen, wie dass herausfinden kannst. Klicke auf Datei -> Speichern unter, so dass der die Seite mitsamt Unterordner speichert. In diesem Unterordner findest Du die CSS-Datei.

    Dort kannst Du die Attribute setzen und damit testen. Entweder es reicht schon, die gespeicherte Seite aufzurufen, oder Du musst am Livesystem testen. Denn im IE kann man angeben, welches CSS er für die Live-Seite verwenden soll: Auf Extras -> Internetoptionen, dort auf der ersten Seite unten rechts auf „Eingabehilfen“. Dort im Abschnitt „Benutzerstylesheets“ kannst Du das modifizierte CSS hochladen.

    Got It? Was willste eigentlich damit erreichen? Vielleicht weiss ich nen Workaround. 🙂

    Liebe Grüße
    Thomas

  3. faulit sagt:

    Wie hast du eigentlich das „Syndication“ hingekriegt?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.