5.1 Browser als Entwicklungstool

Jeder Browser ist mittlerweile auch ein sehr mächtiges Entwicklungstool für Webseiten. Wir empfehlen die Browser Chrome und Firefox, die auf allen Plattformen verfügbar sind.

5.1.1 Quelltext anzeigen

Zunächst mal ein interesantes Faktum: Eine Webseite kann seinen HTML-Code nicht vor Ihnen verstecken! Warum nicht? Weil der Browser sonst nichts anzeigen könnte. Also sind alle Daten, die der Browser verwendet - HTML, CSS, JavaScript - komplett für Sie einsehbar. Ein riesiger Schatz an Beispielen und Code-Schnipseln, von denen Sie lernen können.

Der HTML-Text einer Webseite wird auch Quelltext genannt und ist in Chrome über das Hauptmenü Anzeigen > Entwickler > Quelltext anzeigen erreichbar.

Tipp: Schauen Sie im Menü nach, welches der Tastaturkürzel für diese Ansicht ist.

Hier sehen Sie den Quelltext meiner Homepage michaelkipp.de:

Quelltext der Seite michaelkipp.de

Darüber hinaus können Sie im Quelltext auf die verlinkten CSS-Stylesheets klicken, um diese anzuschauen. Das gleiche gilt für andere verlinkte Dateien wie JavaScript-Code.

Wir klicken auf das Stylesheet und sehen (Ausschnitt):

Stylesheet der Seite michaelkipp.de

Machen Sie reichlich Gebrauch von dieser Möglichkeit, um von den vielen Webseiten im Internet zu lernen. Seien Sie nicht überrascht, wenn der Code auf einigen Seiten unübersichtlich ist. Oft werden Code-Teile automatisch generiert und sind nicht auf Lesbarkeit hin optimiert. Manchmal ist Code auch minifiziert, d.h. alle Leerzeichen und Umbrüche sind entfernt, um noch ein paar Byte Speicher zu sparen. Es gibt aber auch genügend Webseiten, die ganz "normal" ansehbar sind.

5.1.2 Entwickleransicht

Wenn Sie auf einer Webseite sind, kommen Sie in den Entwicklungsmodus, indem Sie z.B. ein beliebiges Element auf der Seite untersuchen. Hier haben wir einen Rechtsclick auf dem Logo ausgeführt:

Rechtsklicks aufs Logo, dann untersuchen

Der Browser wechselt anschließend in die Entwickleransicht, wo in der rechten Hälfte viele technische Infos sichtbar werden:

Entwicklungsansicht

Sie können jetzt im rechten oberen Teilfenster die HTML-Elemente betrachten. Diese sind als Baum - ähnlich einer Verzeichnisstruktur - dargestellt. Sie können Teile auf- und zuklappen. Wenn Sie ein Element anklicken, wird in der normalen Ansicht das entsprechende Element gehighlightet, so dass Sie auch Margin und Padding prüfen können.

Im rechten unteren Teilfenster sehen Sie die CSS-Regeln, die für das aktuell ausgewählte HTML-Element aktiv sind. Die Regelen sind gestaffelt aufgelistet. Ganz oben stehen die spezifischsten Regeln mit höchster Priorität, weiter unten die weniger spezifischen und vererbten Regeln. Regeln, die nicht angewendet werden, weil sie von spezifischeren Regeln überschrieben wurden, sind durchgestrichen dargestellt.

Sie können die CSS-Regeln auch "live" verändern. Ganz oben steht eine leere Regel "element.style", die nur das aktuell markierte HTML-Element betrifft. Dort (aber auch bei allen anderen Regeln) können Sie CSS-Eigenschaften hinzufügen, z.B. background-color:yellow. Probieren Sie es aus. In der Hauptansicht passt sich direkt die Ansicht an. Ihre CSS-Datei ändert sich dabei natürlich nicht (Sie können das ja bei jeder Webseite im Internet tun - dort ändern Sie auch keine CSS-Dateien). Der Mechanismus dient also dem Experimentieren und Korrigieren. Sie müssen anschließend alle Änderungen in Ihr CSS übertragen.

Diese Live-Bearbeitung ist sehr nützlich, um Farben, Schriftgrößen und vor allem Abstände anzupassen. Auch zur Fehlersuche eignet sich das Feature. Ihr CSS funktioniert nicht so, wie Sie wollen? Schauen Sie im Entwicklungsmodus nach, ob Ihre Regel überhaupt auftaucht (vielleicht haben Sie ein Semikolon oder eine Klammer vergessen) und ob die Regel nicht von einer anderen Regel überschrieben wird.