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

Praxis I Browser-EntwicklertoolsDaniel BergerSherlockHomepageWebseiten mit Browser-Toolsanalysieren und bearbeitenEine Webseite ist nie fertig - immer ist etwaszu verbessern. Und manchmal fu nktioniertsie nicht, wie sie soll. Bei der Fehlersuchehelfen dann Entwicklerwerkzeuge:Mit ihnen analysieren und reparieren SieIhre Webseite direkt im Browser.egen des vielen PlastiksW kann man an modernenAutos kaum noch herumschrauben.Webseiten hingegen erlaubenden vollen Zugriff - ihreQuelltexte liegen offen im Web.Und was Hebebühne, Schraubenschlüsselund Schraubendreherdem Automechaniker ermöglichen,leisten beim Webdesigndie Entwicklertools. Mitihnen schauen Sie unter dieHaube einer Webseite und analysieren,optimieren und editierenderen Code. Inzwischenhaben alle relevanten Browsersolche Tools mit an Bord.Die Werkzeuge nützen nichtnur Profis, die jedes bisschen Performanceaus ihrer Seite kitzelnwollen - sie sind auch für Einsteigernützlich. Denn die Tools helfenHTML, CSS oder JavaScript zuverstehen, indem sie das Studiumder Quelltexte erleichtern.Man kann direkt ausprobieren,welche Codezeile welche Funktionhat und was passiert, wennman an den Schräubchen dreht.Die Veränderungen an einzelnenElementen sind sofort imBrowser zu sehen und mit einemReload sind alle Änderungenwieder weg; kaputt machen kannman also nichts.Was Aufbau und Funktionsumfangbetrifft, sind die Tools derverschiedenen Hersteller unter-einander recht ähnlich. Am umfangreichstensind derzeit dieWerkzeuge in Google Chrome.Mit seinen Developer Tools (kurz:DevTools) kann man sogar eineWebseite komplett im Browserentwickeln - ein externer Editorist dann überflüssig. Die DevToolswerden von Google ständig erweitertund verbessert. Jede neueVersion des Browsers bringt kleinereund größere Neuerungenmit, darunter etwa die (55-Autovervollständigungoder die Code­Verschönerung "Pretty Print".Auch Mozilla schraubt fleißig anden Tools von Firefox, und Microsoftspendierte dem Internet Explorer11 komplett überarbeiteteWerkzeuge und schließt damitzur Konkurrenz auf. Dieser Artikelist deshalb eine Momentaufnahme;schon bei der nächsten Versionkönnen einzelne Funktionenumgezogen sein oder sich veränderthaben.Unter der Lupeln allen drei Browsern nehmenSie die Bestandteile einer Webseiteüber das Kontextmenü undeinen Klick auf "Element untersuchen"genauer unter die Lupe. lnChrome erreichen Sie die Werkzeugealternativ über "Tools". InternetExplorers Werkzeuge"F 12" öffnen sich mit einemDruck auf die gleichnamige Taste(sie startet auch in Chrome dieDevTools). ln Firefox finden Sieunter dem Menüpunkt "Web­Entwickler" alles, was Sie zur Untersuchungbrauchen.Die Entwicklertools platzierensich in den Browsern dann in einerLeiste, die sich standardmäßiginnerhalb des Fensters an denunteren Rand anheftet. Dadurchrauben sie der Webseite etwasPlatz. Wenn es dort zu eng wird,spendieren Chrome, Firefox undIE 11 den Tools aber auch ein eigenesFenster, das auf einemzweiten Bildschirm ausgelagertwerden kann. Die Untersuchungeiner Webseite fällt so viel leichter.Manchmal kann HTML -Coderecht hässlich sein - besonders inder platzsparenden minimiertenForm, in der die Zeilenumbrücheund Einrückungen fehlen. Schlauwird man aus diesem kompaktenZeichen-Teppich eher nicht. Vielübersichtlicher ist die Darstellungdes Document Object Model(DOM). Sie finden sie in Chromeunter "Elements", in Firefox unter",nspektor" und beim IE 11 im"DOM-Explorer". Das DOM ist dieinterne Repräsentation der Seite,die durch die Verarbeitung desQuelltextes entsteht. Es enthältauch Elemente, die im HTMLnicht zu sehen sind, weil sie etwadurch JavaScript dynamisch erzeugtwerden. ln diesem Codelassen sich nun die einzelnen Elementenäher betrachten und manipulieren.ln Chrome kann mansie auch per Drag & Drop verschieben,bequem können Sieetwa Bilder oder Links in einemNavigationsmenü umarrangieren.Elemente löschen Sie überdas Kontextmenü mit "Deletenode" (Firefox: "Knoten löschen").Ebenfalls über einen Rechtsklickändern Sie beispielsweiseden Status eines Links auf :hover ­dann stellen Chrome und Firefoxihn dauerhaft so dar, als würdeder Mauszeiger über ihm schweben.So kann man ganz in Ruhemit CSS eine Schaltfläche gestalten,ohne dass der Cursor ständigauf dem Element verweilenmuss. Ansonsten können Sie dasDOM mit Firefox nur teilweiseeditieren: Zwar lassen sich kleineVeränderungen vornehmen undaus einem id schnell eine dass machenoder aus einem div ein span- komplett neue HTML-Eiementehinzufügen können Sie abernur mit Chrome und seinem eingebautenTexteditor. Mit ihmkann man eine Webseite komplettim Browser bauen.Chrome als EditorDie Änderungen, die Sie an fremdenWebseiten vornehmen, pas-206c't 2013, Heft 24