HTML- und CSS-Code direkt im Browser testen

Wenn man Websites entwickelt, dann muss man häufig die Auswirkung von CSS-Stilen testen. Bei der Umstellung einer Website auf responsive Webdesign kommt den CSS-Stilen eine besondere Bedeutung zu, da man viele CSS-Stile zuweisen muss, weil sie abhängig von der Displaygröße sein müssen. Dementsprechend muss man hierbei sehr viel testen, um die Auswirkung der Stile festzustellen. Um möglichst effektiv und zeitsparend testen zu können, gibt es verschiedene Möglichkeiten. Dazu zählen:

• HTML- und CSS-Dateien direkt auf dem Server bearbeiten
• HTML- und CSS-Code direkt im Browser testen

HTML- und CSS-Dateien direkt auf dem Server bearbeiten

Bei dieser Methode wählt man sich über FTP auf dem Server ein. Die Dateien können dann direkt vom Server geöffnet und bearbeitet werden. Beim Speichern werden die Dateien automatisch wieder auf den Server übertragen und man kann die Webseite z.B. mit der Taste F5 aktualisieren und die Auswirkung der Änderungen testen. Diese Methode hat jedoch einen gravierenden Nachteil. Denn, man muss jedes Mal warten, bis die Datei wieder auf dem Server gespeichert wurde, um die Änderungen testen zu können. Es wird also nicht direkt getestet, sondern immer nach dem Upload der Dateien.

HTML- und CSS-Code direkt im Browser testen

Die wesentliche schnellere Variante ist, den Code direkt im Browser einzugeben und zu testen. Die Änderungen betreffen dabei nicht die Seiten auf dem Server, sondern nur lokal während der Betrachtung. Sie sind sozusagen temporär. Lädt man die Seite neu, sind die Änderungen verworfen. Außerdem sind die Änderungen direkt im Browser sichtbar. Ändert man z.B. die Schriftgröße für die Absätze, wird sofort die Schriftgröße geändert. Gefällt die Schriftgröße nicht, kann man schnell einen anderen Wert eingeben und das Aussehen betrachten. So kann man sehr schnell viele CSS-Stile testen. Man muss also nicht jedes Mal die Dateien auf den Server laden, um die Auswirkungen betrachten zu können.

Ansicht Elemente untersuchen einschalten

Damit man die Änderungen am Code direkt testen kann, schaltet man die Ansicht "Element untersuchen" ein. Das geschieht über das Kontextmenü innerhalb des Browserfensters, das sich öffnet, wenn man mit der rechten Maustaste auf ein beliebiges Element einer Webseite klickt. Daraufhin wird (meistens auf der rechten Seite) ein Bereich eingeblendet, in dem man den Code bzw. die CSS-Stile beliebig ändern kann und die Auswirkungen sofort sichtbar sind.

Im Internet Explorer 11 kann man über das Register DOM-Explorer das Element auswählen und danach über Formatvorlagen neue CSS-Stile zuweisen, bestehende ändern oder löschen.

in Firefox 38.0.1 geschieht die Änderung der CSS-Stile im Register "Inspektor". Wählt man das Register aus, kann man im Bereich "Regeln" die CSS-Stile ändern, löschen und bearbeiten.

In Chrome 42.0 und Opera 29.0 ist die Ansicht fast identisch. Ist das Register "Elements" ausgewählt, kann man ein Element auswählen und im unteren Bereich über Styles die CSS-Einstellungen bearbeiten.