Remote Debugging in iOS 6 mit Safari Web Inspector

© Internet Magazin

Nach dem Freischalten der Entwicklungswerkzeuge in Safari können Sie Ihre Projekte auf einem iOS-Gerät von Ihrem Mac heraus testen. Das Ganze funktioniert ähnlich wie Adobes Edge Inspector. Apples Lösung ist zwar kostenlos, setzt aber Safari auf dem Mac unter OS X 10.8 voraus.Nach dem Aktualisieren von OS X auf die Version 10.8 sollten Sie alle verfügbaren Betriebssystem-Updates einschließlich iTunes-Aktualisierungen einspielen. Dadurch erhalten Sie auch die benötigte Version des Apple Browsers Safari (Version 6.x oder höher). Unter Windows klappt der vorgestellte Tipp nicht, weil Safari für Windows zurzeit nur in der Version 5.x existiert. Der Remote-Web-Inspektor ist vergleichsweise tief in den Systemeinstellungen versteckt.

Schritt 1: Auf Ihrem iOS-Gerät (iPhone, iPad oder iPod) starten Sie die App-Einstellungen, navigieren zu "Safari >Erweitert" und aktivieren die Option "Webinformationen".

Schritt 2: Verbinden Sie das mobile iOS-Gerät direkt mit Ihrem Mac, auf dem Sie Ihre Webprojekte testen und debuggen möchten. Sie müssen hierzu das von Apple vorgesehene Kabel verwenden, denn eine drahtlose Verbindung genügt leider nicht.

Schritt 3: Öffnen Sie die Voreinstellungen von Safari auf dem Mac, wechseln Sie in den Abschnitt "Erweitert" und aktivieren Sie das Optionskästchen "Menü >>Entwickler<< in der Menüleiste anzeigen".

Schritt 4: Ohne die Verbindung mit dem Mac zu trennen, starten Sie Safari auf Ihrem mobilen iOS-Gerät und navigieren Sie zu der URL-Adresse der Website, die Sie testen möchten. Diese kann sich entweder im Internet oder in Ihrem lokalen Netzwerk befinden. Solange sie für das iOS-Gerät über eine drahtlose Wi-Fi- oder Mobilfunkverbindung erreichbar ist, funktioniert beides.

Schritt 5: Wenn Sie jetzt das Menü "Entwickler" in Safari auf Ihrem Mac aufklappen, finden Sie hier einen Menüeintrag für jedes direkt angeschlossene iOS-Gerät. Die Untermenüs repräsentieren die einzelnen Web-Projekte, welche in Safari auf dem betreffenden iOS-Gerät gerade geöffnet sind.

Schritt 6: Wenn Sie einen dieser Einträge in Safari auf dem Mac aufrufen, erhalten Sie unmittelbar Zugriff auf den zugehörigen Quelltext direkt innerhalb der Entwicklungswerkzeuge in Safari auf dem Mac.

Falls Sie kein iOS-Gerät besitzen, können Sie stattdessen auch den iOS-Simulator aus Apples Xcode verwenden. Starten Sie dazu zunächst den Simulator und dann den mobilen Safari-Browser im Simulator.

Javascript-Performance auf mobilen Geräten optimieren

Bei Mobilgeräten müssen Sie damit rechnen, dass die Ausführung von Javascript-Code pro KByte mindestens eine Millisekunde dauert. Je geringer die Dateigröße des auszuführenden Codes, umso höher die Leistung und umso höher die Antwortbereitschaft des Geräts.

Wer einen hohen Wert auf die Qualität seines Javascript-Codes legt, der kann durch kleine, stellenweise Verbesserungen ebenfalls eine ganze Menge Leistung gewinnen. Zur Code-Auswertung dient in Javascript die Funktion eval(). Diese Funktion nimmt Code als eine ganz gewöhnliche Zeichenkette entgegen. Es gibt mehrere Möglichkeiten, diese Funktion einzusetzen.

Ein Code-Schnipsel, der an eine Zeichenkette einen Buchstaben anhängt und eine Schleife von i = 0 bis i = 999 mit einem Intervall von 1 durchläuft, könnte zum Beispiel wie folgt aussehen:

var str = "",
i = 0;
for (; i<1000; i += 1) {
str += "a";
}

Da sich eine Textzeichenkette in Javascript nicht modifizieren lässt, wird diese bei jeder Iteration vollständig ersetzt. Um diesen an sich unspektakulären Beispielcode an die eval()-Funktion zu übergeben, kommt die folgende Zeile zum Tragen:

var zeichenkette = ,var str="",i=0;for(;i<1000;i+=1)
{str+="a";}';

Der Aufruf von eval(zeichenkette) gibt in diesem Beispiel in Google Chrome den enttäuschenden Wert von nur 97 Operationen pro Sekunde zurück. Wenn Sie aber den Code modifizieren, indem Sie eine neue Funktion erzeugen:

var strCode = ,var str="",i=0;for(;i<1000;i+=1)
{str+="a";}';
(new Function(strCode))();
eval(strCode);

und diese benchmarken, erhalten Sie den respektablen Wert von 5.256 Operationen pro Sekunde und somit einen über 54-fachen Leistungssprung gegenüber dem ersten Ansatz, weil Googles V8-Engine plötzlich auf "allen Zylindern" läuft.

CSS: Responsives Video auf die leichte Art

Damit sich ein Videoclip der Viewportgröße elastisch anpassen kann, bedarf es nicht einmal Javascript. Alles, was Sie benötigen, sind ein paar Zeilen CSS:

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

DOM, CSS: Bessere Leistung auf Mobilgeräten dank geschickt gewählter Selektoren

Die Popularität mobiler Geräte führt dazu, dass Webdesigner wieder vor der Herausforderung stehen, mit jedem Quäntchen Leistung und jedem Kilobyte Bandbreite sparsam umzugehen. Wer dem Thema seine Aufmerksamkeit schenkt, findet oft beachtliches Optimierungspotenzial an ganz unerwarteten Stellen.

Wer hätte schon gedacht, dass sich die Abarbeitung langer CSS-Stylesheets bloß durch eine geschicktere Auswahl von Selektoren deutlich beschleunigen lässt. Ein gutes Beispiel sind mehrstufig verschachtelte Navigationsmenüs mit ganz vielen Einträgen. Auf der einen Seite bietet es sich deswegen an, einen Selektor wie diesen zu benutzen:

div#nav ul.menu > li.menuitem

Auf der anderen Seite muss der Browser viele Schleifen durch das DOM durchlaufen, um auch wirklich nur die betreffenden Elemente zu selektieren. Im ersten Schritt prüft der Browser alle Menüeinträge auf ihre Zugehörigkeit zur Klasse .menuitem. Die so erstellte Auswahl muss der Browser dann auf Elemente vom Typ <li> beschränken.

Als Nächstes gilt es, alle Elemente auszuschließen, deren übergeordnetes Element der Klasse .menu nicht angehört. Doch damit nicht genug: Vaterelemente, welche zwar der gewünschten Klasse angehören aber nicht vom Typ <ul> sind, muss der Browser ebenfalls herausfiltern.

Die übrig gebliebenen Elemente prüft der Browser dann noch auf die Erfüllung zwei weiterer Bedingungen: Sie müssen einem Element mit der ID #nav untergeordnet sein, bei dem es sich um einen <div>-Kasten handelt. Dabei ließe sich dasselbe Ziel mittels des Klassenselektors:

.menuitem

viel einfacher und schneller erreichen. Wenn Sie die Klasse im Markup konsequent nur auf das eine Navigationsmenü beschränken, werden zusätzliche Bedingungen in CSS-Stylesheets völlig überflüssig und Ihre Websites gewinnen an Schwung auf Mobilgeräten.

Javascript: Zusammenfügen von Zeichenketten

Beim Zusammenfügen von Zeichenketten ziehen viele Webentwickler die optische Eleganz des Codes der Geschwindigkeit vor. Diese beiden Methoden:

foo = foo + bar;
foo += bar;

dienen dazu, einer Zeichenkette eine andere Zeichenkette anzuhängen, und liefern eine durchaus vergleichbare Performance. Manchmal kommen auch [].join()-Operationen zum Einsatz, zum Beispiel:

Ext.create(,MeinView', {
tpl: [
,<div class="ueberschrift">',
,<div class="vorname">', ,{vorname}', ,</div>',
,<div class="nachname">', ,{nachname}', ,</div>',
,</div>'
].join()
});

Anstatt ein Feld zu erstellen, mit Zeichenketten zu befüllen und dann zu kombinieren, können Sie alternativ eine leere Textzeichenkette ins Leben rufen und mittels String.prototype.concat die zu kombinierenden Textzeichenketten als Argumente daran anhängen.

Ext.create(,MeinView', {
tpl: ,'.concat(
,<div class="ueberschrift">', ,<div class="vorname">',
,{vorname}', ,</div>',
,<div class="nachname">', ,{nachname}', ,</div>', ,</div>'
)
});

Die Abarbeitungszeit verkürzt sich dadurch dramatisch, aber nur bei einer geringen Anzahl von Elementen. Je höher die Anzahl der Elemente, umso besser kommen Sie mit [].join()-Operationen weg, da sich die Leistung der Browser dramatisch verbessert.

Javascript: Schleifen und Iterationen auf der Überholspur

Bei einfachen Iterationen können Sie anstelle einer for-Schleife

for (var i = 0; i<1000; i++) {
// der zu verarbeitende Code
}

eine while-Anweisung nutzen.

var i = 1000;
while (i--) {
// der zu verarbeitende Code
}

Im Internet Explorer bis einschließlich der Version 9 ist die while-Anweisung etwas schneller. In neueren Browsern aus den Familien Webkit und Gecko tritt genau das Gegenteil ein: Die for-Schleife schlägt die while-Anweisung um Längen.