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

Praxis I Browser-Entwicklertoolstrieren Warte- und Ladezeit sowiedie Reihenfolge, in der dieElemente übertragen wurden. lnChrome markiert eine senkrechteblaue Linie außerdem den Zeitpunkt,an dem das Grundgerüstder Seite im Browser angekommenist ("DOMContentLoaded").Eine rote Ziellinie verrät, dass indiesem Moment alle Inhalte denBrowser erreicht haben. "Latency"gibt in der Übersicht an, wielange der Browser auf den Serverwarten musste, bis der die angeforderteDatei lieferte. Wenn manin Chrome die Messergebnissenach der Latenz sortiert, siehtman auf einen Blick, welche Dateiam meisten Wartezeit in Anspruchnahm.Weitere Details zu jedem derElemente liefern alle Tools übersAnklicken: Der Reiter "Headers"(bei Firefox "Kopfzeilen", im IE 11"Anforderungsheader") gibt Auskunftdarüber, ob beispielsweiseein Element frisch oder aus demCache oder gar nicht geladenwurde. Schnell können Sie Dateileichenaufspüren, die eventuellirgendwo im Code eingebundensind, aber gar nicht mehr existieren."Timing" (Firefox: "Zeit",IE 11: "Zeiten") verrät, wie langeder Browser auf ein angefordertesElement warten musste undwie lange anschließend dieÜbertragung dauerte.Am unteren Rand sehen Sie inallen Browser-Tools eine Zusammenfassung.Sie gibt Auskunftüber die Anzahl der HITP-Anfragensowie über die gesamte Datenmenge,die über die Leitungin den Browser geflossen ist. WenigerAnfragen beschleunigenden Ladevorgang, weshalb Siemehrere JavaScript-Dateien ineiner großen Datei zusammenfassensollten; das spart Anfragen.Dies ist nur eine von vielenOptimierungsmöglichkeiten;weitere finden Sie in [1]. ln Firefoxund Chrome können Sie überdie untere Leiste auch nach Dateitypenfiltern und sich etwanur das Ladeverhalten von Bildern,Skripten oder Fonts anzeigenlassen.Fehlerteufel vertreibenln der Konsole der Entwicklerwerkzeugekann man nicht nurJavaScript-Code ausführen. DieKonsole protokolliert auch Warnungenund Fehler und informiertüber fehlende Dateien undProbleme beim Verarbeiten desCSS. Die Fehlerquelle ist direktZum Testen der Smartphone-Tauglichkeit einer Webseitesimuliert Firefox kleine Auflösungen.verlinkt; mit einem Klick öffnetsich etwa eine js-Datei, in dervielleicht ein Buchtsabendreherfür Probleme sorgt.Zur genaueren Fehleranalyseund -Iösung verfügen dieBrowser über JavaScript-Debugger,die sich unter dem gleichnamigenReiter verbergen. InChromes DevTools versteckt ersich unter "Sources". Bei derSkriptanalyse können Sie Breakpointsfestlegen, an denen dasSkript anhält. ln Chrome öffnenSie dazu eine js-Datei im Texteditor,wo Sie das Skript debuggen,bearbeiten und mit Breakpointsversehen. Hilfreich ist daseingebaute "Pretty Print": Miteinem Klick auf die geschweiftenKlammern am unteren Randwird der Quelltext neu formatiert.Aus einem komprimiertenJavaScript ohne Leerzeichenund Absätze wird so lesbarerCode, den Sie besser untersuchenkönnen. Firefox und IE 11lassen eine solche Funktion bishervermissen.Breakpoints bestimmen Sie inallen drei Browsern über den linkenSteg: Dort klicken Sie auf dieZeilennummer, um an dieserStelle einen Haltepunkt festzulegen.Diesen können Sie dannauch mit einer Bedingung versehen- dann stoppt das Skriptnur, wenn diese erfüllt ist. ln derSeitenleiste Iisten die Browser jeweilsalle Breakpoints auf. Miteinem Rechtsklick bestimmenSie Bedingungen, außerdemkönnen Sie einzelne Haltepunktedeaktivieren oder komplett entfernen.Mit den Bedienelementenkönnen Sie außerdem dasSkript manuell anhalten oderden Code in Einzelschritten ablaufenlassen.Schrumpfende SeitenUm das Webdesign für Mobilgerätezu unterstützen, simulierendie Browsertools Mini-Bildschirme;dann sehen Sie, wie IhreSeite in klein aussieht. ln Chromemüssen Sie dazu die Angabenüber das Zahnrädchen unter"Overrides" verändern, wasetwas umständlich ist. VergessenSie nicht, das Häkchen bei "Enable"zu setzen - sonst passiertnämlich gar nichts.Mozilla hat dies in Firefox bessergelöst: Über das lcon "Bildschirmgrößentesten" in derBedienleiste des Inspektorsschrumpft die Webseite. Diversefestgelegte Auflösungen stehenzur Verfügung; man kann sieaber auch beliebig einstellen.Per Klick auf "Drehen" wechseltder simulierte Bildschirm zwischenHoch- und Querformat. lnChrome sorgt dafür der Button"Swap dimensions". Im IE 11können Sie die Auflösung künstlichunter "Emulation" beschränkensowie die Ausrichtung bestimmen.Bei der beschnittenenAuflösung werden sofort die mitMedia Queries bestimmten CSS­Regeln angewendet.Fern-InspektionFirefox und Chrome erlaubenmit "Remote Debugging" zusätzlichdie Analyse und Optimierungvon Webseiten direktauf einem Android-Smartphoneoder -Tablet. Das Mobilgerätzeigt die Webseite an, währendSie die Entwicklerwerkzeugeüber den Desktop-Rechner bedienen.Setzen Sie in den Entwicklertoolsvon Firefox ein Häkchenbei "Externes Debuggingaktivieren". ln Chrome müssenSie die Erweiterung "ADB" installieren,die einen kleinen Android-Roboterneben die Adressleisteeinfügt.ln Android 4.0 aktivieren Siedann das USB-Debugging unter"Einstellungen/Entwickleroptionen";ab Android 4.2 ist dieseOption erst einmal versteckt.Über ein siebenmaliges Tippenauf die Build-Nummer im Menü"Über das Telefon/Tablet" wirddiese sichtbar - und Android informiert:"Sie sind jetzt ein Entwickler!"Installieren Sie auf dem Android-Gerätdann die Mobilversiondes gewünschten Browsers.Ab Firefox 25 (Beta) aktivierenSie das "externe Debugging"direkt in den Einstellungen unter"Entwicklerwerkzeuge". ln derVorversion des Browsers setzenSie den Eintrag devtools-debugger.remote-enabled in der about:configauf true. ln der Android-Versionvon Chrome schalten Sie das"USB-Debugging" unter "Entwickler-Tools"ein.Verbunden werden PC undMobilgerät mit einem USB­Kabel, weshalb Sie unter Windowseinen speziellen USB-Treibereinrichten müssen. Für einNexus-Gerät etwa benötigen Sieden "Google-USB-Treiber". Auchfür andere Hersteller hat Googledie richtigen Treiber parat, dieListe zusammen mit ausführlicherInstallationsanleitung findenSie über den c't-Link amEnde des Artikels.Firefox erfordert darüber hinausnoch die Installation desAndroid-SDK, das auch gleichdie USB-Treiber enthält. Mozilladokumentiert die genaue Konfigurationdes Android-SDK aufder Entwickler-Webseite. lnChrome hingegen brauchen Siedas SDK nicht, die Browser­Erweiterung "ADB" reicht aus.Mit ihr starten Sie die "AndroidDebug Bridge" und damit dieKommunikation zwischen Mobilgerätund Desktop-PC. Firefoxnimmt über das Menü "Web-Entwickler"Verbindung mit Androidauf. "F12" bietet keine Möglichkeit,eine USB-Verbindung zwischeneinem Windows Phoneund IE 11 herzustellen.Port-WeiterleitungSeit Chrome 29 können auchWebseiten, die auf einem lokalenWebserver laufen, mit "Port Forwarding"via USB-Kabel an das210c't 2013, Heft 24