c't magazin für computer technik 24/2013 - since

Praxis I Browser-Entwicklertoolsauf "Speichern" (Strg+S) überschrieben.Hier sollten Sie alsoaufpassen, bevor Sie gravierendeÄnderungen vornehmen und vorherlieber eine Sicherheitskopieanlegen. Ein Revisionsmanagementwie in Chrome bietet Firefoxnämlich nicht. Bei dynamischenSeiten, die ein lokaler Webserverliefert, fragt Firefox nach, wo erdie CSS-Datei auf der Festplattespeichern soll. Bei Chrome ist dasmit "Workspace" bequemer gelöst,besonders wenn Sie mehrereDateien einer Website bearbeiten.Bedienen kann man die Toolsin Firefox auch mit Tastatur undKommandozeile, die sich imMenü unter "Web-Entwickler/Entwickler-Symbolleiste"(Umschalt+F2) verbirgt. Der Befehl help listetalle verfügbaren Kommandosauf. Um beispielsweise ein variablesDesign zu testen, geben Sieresize to 320 800 ein, damit das Fensterauf diese Werte schrumpftund die mit Media Queries definiertenCSS-Regeln angewendetwerden. Diese Eingabeleiste istaber nicht zu verwechseln mit dereigentlichen Konsole, die sich imgleichnamigen Reiter verbirgt.Nur dort können Sie JavaScriptausführen oder Fehlermeldungenstudieren. Die Entwickler­Symbolleiste ist dagegen fürTastatur-Cowboys gedacht, dieschneller tippen als klicken.Boxen, Ränder, AbständeAlle Elemente einer Webseitesind gewissermaßen rechteckigeBoxen. Die Abmessungen einersolchen Box ergeben sich nichtnur durch die (55-Eigenschaftenwidth und height, sondern auchdurch die Abstände nach innen(padding) und außen (margin) sowiedurch den Rahmen (border). Sieumschließen den eigentlichenInhalt, also beispielsweise denText einer Überschrift.Chrome illustriert dieses Box­Modell fü r HTML-Eiemente imTab "Elements", in der rechtenSeitenleiste unter "Computed".Alle in CSS definierten Abständewerden hier anschaulich angezeigt.Um die CSS-Attribute besserzu unterscheiden, sind ihnenbestimmte Farben zugeordnet.Die Einzelwerte kann man direktim Box-Modell verändern - siehalten aber nur bis zum nächstenReload. Hilfreich ist das Box­Modell, um schuldige Elementezu identifizieren, deren Breite andereElemente stört: etwa einContainer, der breiter ist, als ersoll, weil man ein padding fa lschbestimmt hat.Im JE 11 verbirgt sich das Box­Modell im "DOM-Explorer" in derrechten Seitenleiste unter "Layout".Auch hier können Sie dieVariablen ändern und auch IEzeigt diese direkt an. Wenn Siedie Seite neu laden, verschwindenalle Änderungen.Zwar bietet Firefox ebenfallseine solche Funktion unter "Box­Modell", allerdings sind dieWerte nicht editierbar. Die Visualisierungist außerdem nichtganz so anschaulich wie in denanderen Browsern. Sozusagenals Ausgleich bietet Firefox eine3D-Darstellung: Nach einemKlick auf den kleinen Würfel("3D-Untersuchung") stellt derBrowser die Seite als plastischesModell dar. Hier sehen Sie ineinandergeschachtelte Elementeals übereinander gestapelte dreidimensionaleBoxen. Diese ansprechendeDarstellung hilft,Fehler in der VerschachteJungaufzuspüren. "And, of course, itIooks awesome", wissen die Entwickler.Fast and FuriousDie Performance einer Webseiteist wichtig, besonders auf Mobilgeräten.Schuld am stockendenSeitenaufbau kann etwa einWerbeelement sein, das IhreSeite ausbremst, weil der Serverdes Anbieters gerade überlastetist. Die Browser-Tools helfenbeim Aufspüren solcher Flaschenhälseund zeigen detailliertdas Ladeverhalten der einzelnenElemente. So können Sie exaktfeststellen, wo es hakt und längerdauert.Die Browser zeichnen auf, inwelcher Reihenfolge die Dateieneiner Webseite angefordert undgeladen wurden und wie langedas alles dauerte. Bei Chromeheißt die Funktion "Network", beiFirefox "Netzwerkanalyse" undbeim JE 11 "Netzwerk". Illustriertwird die Abfolge mit einem"Wasserfall" aus Balken. Die unterschiedlichenLängen demons-Au nbOI·amazon .... IIUIUI -·fotrtbtrlll5-UI11 1111....... 1,.,.,I.,.., ... l"U( um JUli