Apples WebKit-Team zeigt neuen Web Inspector in Safari 7
Vor einem Jahr hielt mit Safari 6 auch ein neu-gestalteter Web Inspector («Webinformationen») Einzug in den Apple-Browser. Das Design und das Benutzererlebnis wurden an jenes der Apple-Entwicklungsumgebung Xcode angepasst — dadurch fanden sich Mac- und iOS-Entwickler schnell im Inspector zurecht. Nicht wenige Web-Entwickler jedoch konnten sich zuerst nicht mit dem neugestalteten «Web-Informationen» anfreunden. Während der am Freitag zu Ende gegangenen Apple-Entwicklerkonferenz zeigte das WebKit-Team von Apple nun eine überarbeitete Version des Web-Inspectors. Man habe sich während dem vergangenen Jahr das Feedback der Inspector-Benutzer zu Herzen genommen. In der neuen Entwickler-Vorschau des neuen Safari 7 sind die neuen Webinformationen enthalten. Diejenigen, die die Entwicklungen der WebKit-Engine über die Nightly-Builds verfolgen, sollten einige der Neuerungen bereits seit längerem kennen. Seit vergangener Woche ist nun auch der Quellcode des neuen Web-Inspectors im WebKit-Projekt frei zugänglich.
Layout
Die Webinformationen sind in fünf Hauptbereiche unterteilt: Toolbar, Navigations-Sidebar, Inhalt-Browser, «Quick Console» und die Detail-Sidebar. Der Hauptinhalt ist — abgesehen von der einklappbaren Quick-Console — wie bisher unterteilt in drei Spalten. Von links nach rechts werden die Informationen immer spezifischer. Eine Auswahl in einer der Navigations-Sidebars ganz links definiert den Inhalt im mittleren Inhalts-Browsers. Die Anzeige und die Auswahl im Inhalts-Browser kontrolliert wiederum die Verfügbarkeit und angezeigten Informationen im Detail-Browser ganz rechts. Diese Hierarchie wird ebenfalls im Navigations-Balken des Inhalt-Browsers abgebildet. Über diesen Navigations-Balken lässt sich auch die Art der Anzeige im Inhalt-Browser verändern — z.B. kann hier von einem DOM-Baum auf eine einfache Quellcode-Ansicht geändert werden.
Das Syntax-Highlighting unterstützt auch eine Handvoll zusätzlicher Sprachen — darunter Clojure, CoffeeScript, LESS, LiveScript, SASS und TypeScript.
Activity Viewer
Die einzelnen Funktionen und Ansichten werden mit neuen Icons repräsentiert, auch wurden die Symbole neu angeordnet. In dieser neugestalteten Symbolleiste gibt es auch einen neuen «Activity Viewer». Dieser neuer Viewer befindet sich in der Mitte der Symbolleiste und bietet einen schnellen Überblick über die Webseiten-Ressourcen, die Ladezeit, Log-, Fehler- und Warnmeldungen. Die Anzeige dient auch als Schnellzugang zu den jeweiligen Funktionen — ein einfaches Klicken auf die Anzeige ändert die Anzeige des Inspectors zur entsprechenden Funktion, ein erneutes Klicken wechselt wieder zurück auf die Ausgangsansicht.
Die reorganisierten Icons in der Symbolleiste sind neu so angeordnet, dass sie sich gleich oberhalb der entsprechenden Anzeige befinden. Die Symbole links repräsentieren die verschiedenen Anzeigen des Web-Inspectors, während die Icons rechts die Anzeige der rechten Detail-Sidebar steuern.
Layer Infos
Neu zeigt der Web Inspector auch spezifische Informationen zu von WebKit gezeichneten Elementen an. Wird ein DOM-Element mit einem Layer im Inhalts-Browser ausgewählt, zeigt «Layer Info» neben Informationen wie Breite und Höhe auch die Anzahl Paints und der für dieses Element benötigte Speicher an. Gesondert davon werden diese Angaben auch für direkte Kinds-Elemente ausgegeben — somit kann neu auf Element-Ebene optimiert werden. Mittels der neuen «Compositing Borders»-Funktion können die verschiedenen Ebenen auch in einer räumlichen Visualisierung mit Anzeige der Repaints direkt auf der Webseite angezeigt werden.
Styles
Auch die Detail-Ansicht der Styles wurde überarbeitet. CSS-Regeln können noch einfacher bearbeitet werden und können mit der Tastatur, ähnlich einem Text-Editor, ohne Unterbruch bearbeitet und kopiert werden (bisher war dies nur jeweils mit einzelnen Regeln möglich). Auch werden CSS-Kommentare nun ebenfalls im Detail-Browser angezeigt.
Die in den Webinformationen von Safari 6 vermissten Pseudo-Klassen «Active», «Focus», «Hover» und «Visited» sind ebenfalls wieder mit an Bord.
Neu unterstützt der Web Inspector auch CSS source maps, womit die Informationen der Detail-Ansicht besser mit CSS-Preprocessors wie SASS zurecht kommen.
Konsole
Auch die in den Webinformationen integrierte Konsole erhielt einige grössere Änderungen. Das Syntax-Highlighting und die automatische Kompletisierung wurden zum Beispiel stark verbessert. Auch ist die Interpretation der Enter- bzw. Return-Taste nun intelligenter — neu sollte die Konsole von selbst erkennen ob die Taste eine Zeilenschaltung einfügen oder den Befehl ausführen soll. Die Ausführung kann durch gleichzeitiges drücken der alt-Taste mit Return/Enter sofort initiert werden.
Die Ausgabe der Konsole kann neu auch gefiltert werden und auch das Exportieren der Ausgabe wurde vereinfacht.
Änderungen direkt abspeichern
Wird eine Webseite bearbeitet, können die in den Webinformationen vorgenommenen Änderungen (an CSS, HTML, JS etc.) direkt mit cmd+S in die original-Dateien abgespeichert werden. Ein Wechsel in einen Editor und ein Nachfassen der Änderungen entfällt somit.
Videos
In den beiden WWDC-Sessions «Getting to know Web Inspector» und «Getting the most out of Web Inspector» bot Apple den Entwicklern noch weitere Informationen zu den neuen Webinformationen. Registrierte Entwickler haben auf dem Entwickler-Portal Zugriff auf die Aufzeichnungen der Sessions.
Der Web-Inspector ist ein essentielles Entwickler-Werkzeug, nicht nur für Web-Entwickler und Frontend Engineers. Mithilfe der Webinformationen können einzelne Webseiten auseinander- und unter die Lupe genommen werden, Code-basierte Änderungen live vorgenommen werden und Analysen einzelner Webseiten-Bestandteile vorgenommen werden. Die WebKit-Tools, welche zu den Besten der Branche gehören, erlauben aber auch eine Vielzahl weiterer fortgeschrittener Funktionen.
Safari 7 ist Bestandteil von OS X Mavericks. Das neue Mac-Betriebssystem wurde für den Herbst angekündigt.
Von Stefan Rechsteiner
Veröffentlicht am
Ab CHF 5.– im Monat
👉🏼 Wir benötigen deine Unterstützung! Unterstütze macprime mit einem freiwilligen Gönner-Abo und mache die Zukunft unseres unabhängigen Apple-Mediums aus der Schweiz mit möglich.