Teil 2 - Internet Explorer 9 - Entwickler-Tools unter der Lupe
Dieses Tool vollständig zu beschreiben wäre wohl ein wenig übertrieben. Darum beschränke ich mich hier auf die nützlichsten Features und erläutere diese so detailliert wie möglich.
Datei
Hier besteht die Möglichkeit einen externen Editor wie Phase 5, PsPAD oder Notepad++ zu nutzen, oder die interne Standardansicht des IE9 zu verwenden.
Suchen
Ist diese Funktion aktiviert lassen sich mit der Maus einzelne Elemente mittels Überfahren anwählen. Ein Klick auf das angwählte Element öffnet direkt den entsprechenden Quellcode zzgl. aller zugehörigen Stylesheetanweisungen. Dabei spielt es keine Rolle ob die CSS-Anweisungen aus einer oder mehrerer Dateien stammen. Der IE9 zeigt uns brav an aus welcher Datei die entsprechende Formatierung stammt. Zeilennummern werden zwar keine angezeigt, dafür lässt sich aber mit einem Klick auf die entsprechende ID / Klasse und anschließendem Klick auf die Datei direkt zur richtigen Stelle in den Quellcode des Stylesheets springen.
Deaktivieren
Hier lassen sich global das gesamte CSS, Javascript oder der Popupblocker abschalten.
Ansicht
Das Ansichtsmenü soll seine Stärke beim komplexen Layouten mit vielen Grafiken oder kombinierten CSS-Klassen ausspielen. Leider gelingt dies jedoch nur ansatzweise, wie die nebenstehende Grafik verdeutlicht. Schaltet man die Klassen- und Kennungsinformationen ein werden diese als rosa eingefärbte Box über der Seite angezeigt. Leider überschneiden sich die Boxen jedoch teilweise, wodurch die entsprechende Klasse / ID dann unleserlich wird.
Ähnliches gilt für das Anzeigen der Linkpfade. Da Hyperlinks durchaus sehr lang werden können, passen diese teilweise nicht mehr in die angesprochenen rosa Boxen hinein. Scheinbar ist die Breite der Box abhängig von der Breite des eigentlichen Elements. Ein Hyperlink der auf "meine-seite.de/news/artikel/lesen/beitrag1.html" verweist, jedoch nur mit "Beitrag1" als sichtbares Element auf der Seite dargestellt wird, kann somit nicht mehr gelesen werden.
Der Linkbericht erstellt einen übersichtlichen Bericht in einem neuen Browser-Tab mit allen enthaltenen Hyperlinks der aktuellen Seite ink. eingebettetem Javascript wie OnFocus(this.blur) oder window.open() etc... Die Links innerhalb des Berichts sind natürlich anklickbar, so dass man schnell alle Verweise auf Funktionalität prüfen kann.
Die Ansicht "Elemtentquellcode mit Format" zeigt uns nach der Auswahl eines entsprechenden Elements (z.B. ein einzelner Absatz) nur den HTML-Code dieses Absatzes mit dem benötigten CSS an. Leider greift hier nicht die Einstellung des benutzerdefinierten Editors. Stattdessen wird der interne Quellcodebetrachter des IE verwendet.
Bilder
Für das Menü "Bilder" gilt kurz gesagt das gleiche wie das Menü "Ansicht". Hier lassen sich Bildabmessungen, Bilddateigrößen, Pfade und Alternativtext jeweils in Boxen als Overlay einblenden. Doch leider tritt wieder das Problem der Größe mit dem eigentlichen Element auf. Bildpfade sind, wie bereits oben bei den Hyperlinks angesprochen, öfters sehr lange und von der Verzeichnistiefe abhängig. Diese werden logischweise bei einem 20x20 Pixel kleinen Bild vollkommen abgeschnitten.
Einzig der Bildbericht liefert ein wirklich gutes Ergebnis und zeigt nützliche Details der auf der Seite verwendeten Grafiken an.
Extras
Über den Menüpunkt "Größe ändern" lässt sich das Browserfenster schnell auf eine andere Bildschirmauflösung schalten. Dies ist besonders hilfreich wenn man gerade mit dem grundsätzlichen layout einer Website beschäftigt ist und hilft allen, die Websites für verschiedene Auflösungen bzw. Endgeräte wie Smartphones gestalten müssen. Desweiteren findet sich im Menü Extras auch das Lineal zum Abmessen von Abständen zwischen einzelnen Elementen, sowie das Farbauswahl-Tool. Mit letzterem lässt sich der entprechende Hexadezimalwert einer Farbe aus einem Element der Website auslesen. Über den Befehl "Kontur für Elemente" lassen sich Elemente global mit einem Rahmen versehen, welchen man in seiner Farbe anpassen kann.
Überprüfen
Wie der Name schon sagt können wir hier den Quellcode auf Fehler prüfen lassen. Neu ist jedoch die Möglichkeit, den Sourcecode auf Accessibility zu checken. Dazu wird die Seite an microsoft.com geschickt, welche diese wiederum an contentquality.com weiterleitet. Dort findet dann die eigentliche Prüfung in Echtzeit statt und liefert das Ergebnis.
Zuletzt bleiben noch das Menü "Browsermodus", welches uns per Muasklick in eine frühere Version des Internet Explorer versetzt, sowie das Menü "Dokumentmodus", welches je nach gewähltem Browserstandard, die aktuelle Seite entweder mit einem strict- oder unbekannten Doctype rendert.
Die Karteireiter "HTML", "CSS", "Konsole", "Script", "Profiler" und "Netzwerk" bieten jeweils unterschiedliche Tools zur Fehlersuche oder Testkorrektur. Desweiteren bringt jeder Karteireiter wiederum ein eigenes Untermenü mit sich und bietet entsprechende Features an. So lassen sich unter html beispielsweise Codezeilen editieren oder einzelne CSS-Anweisung für einzelne Tags abwählen. Im Untermenu von html lassen sich dann wiederum Formate nachverfolgen, Attribute einblenden oder die margin- und padding-Eigenschaften des gewählten Elements grafisch darstellen. Die sehr nützliche Funktion den gerade geänderten Code lokal zu speichern macht gerade bei der Erstellung von Template-basierenden Seiten bzw. Content-Management-Systemen Sinn, da man so recht schnell verschiedene Versionen eines Templates mit Echtzeitvorschau erstellen und kann. Gerade bei aufwendigen Formularen kommt dies dem Webdesigner sehr entgegen.
Fazit:
Microsoft hat uns mit dem Internet Explorer 9 und den darin enthaltenen Entwickler Tools ein gutes Werkzeug zur Webentwicklung mit einigen innovativen und neuen Features bereitgestellt. Trotzdem sind die Entwickler-Tools des Internet Explorer teilweise noch verbesserungswürdig.
Pfadangaben oder Hyperlinks welche sich unleserlich überschneiden sind in so einem Werkzeug absolutes no-go. Trotzdem ist diese Ansammlung von Werkzeugen ein sehr nützliches Hilfsmittel zur Fehlersuche und sowohl für Anfänger als auch für professionelle Webdesigner und Entwickler geeignet.
In der offiziellen Beschreibung ist desweiteren die Rede von einem "Outline-Menü", welches jedoch scheinbar nicht rechtzeitig für die erste offizielle Version des IE9 fertiggestellt werden konnte. In der Übersichtsgrafik der offiziellen Hilfeseite ist das Menü jedoch sichtbar integriert und dient wohl dazu, zuvor definierte Elemente mit einer farblichen Box zu umranden, um diese in ihrer Größe und Position einfacher zu formatieren.
Einen Kommentar schreiben