Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 27

Es gibt eine Reihe weiterer div -Identifikatoren, die das Aussehen einer Webanwendung
beeinflussen, auch wenn sie bislang noch nicht genannt wurden. Einige davon werden
Sie im weiteren Verlauf dieses Buchs kennenlernen, da wir iWebKit für die meisten
Beispiele verwenden. Auf einige weitere Elemente des Frameworks möchten wir aller-
dings noch in dem nächsten Beispiel eingehen.
Safari Web Inspector, Google Chrome Developer Tools und Firebug
Ohne eines dieser Tools für den Desktop-Browser kommt kaum ein Webentwickler
aus. Alle drei sind relativ ähnlich und werden schnell unabdingbar, wenn Sie sie einmal
benutzt haben.
Safari Web Inspector
Als wir ganz am Anfang des Buchs über die verschiedenen Webbrowser sprachen, wurde
schon erwähnt, dass das Entwickler -Menü in Safari nicht nur die Möglichkeit anbietet,
den User-Agent eines iPhones zu simulieren, sondern auch noch weitere nützliche
Funktionen enthält. Eine besonders hilfreiche Funktion ist der Web Inspector - im
deutschen Safari zu finden unter Entwickler/Webinformationen einblenden .
Um den Web Inspector nutzen zu können, müssen Sie das Entwickler -Menü in den
Safari-Einstellungen aktiviert haben. Wie das genau funktioniert, können Sie in der
Einführung oben im Abschnitt über Safari unter »Welcher Browser?« nachlesen.
Bild 1.14: Den Web
Inspector kann man über
Inspect Element aus dem
Kontextmenü oder über
Show Web Inspector aus
dem Menü Develop aufrufen.
In der deutschen Safari-
Version wählen Sie
Entwickler/Web-
informationen einblenden .
Sobald Sie in Safari das Develop -Menü aktiviert haben, rufen Sie einfach eine unserer
Beispielseiten auf, klicken mit der rechten Maustaste auf ein Element auf der Seite und
wählen Inspect Element aus.