Zur Übersicht

CSS Live Testing/Debugging

Alexander Schranz
Alexander Schranz Aktualisiert am 17. Aug. 2020
css-live-testing-debugging

Heutzutage werden kaum mehr statische Webseiten programmiert. Die Inhalte der meisten Webseiten kommen aus einer Datenbank die mittels eines CMS oder Ähnlichem gepflegt werden.

So kann es aber bei der Entwicklung von Templates für ein CMS immer wieder mal zu Überraschungen kommen, da die Inhalte auf dem System das man entwickelt hat, sich meistens von den Inhalten der Webseiten (Online) unterscheidet. Diese sind schnell mit Fülltext und Beispielbildern gefüllt worden.

Entwicklertools für verschiedenste Browser helfen weiter
Die meisten modernen Browser bieten aber sogenannte Entwicklertools an. Diese lassen sich auf unterschiedlichste Art und Weise, je nach Browser, aktivieren.

Beim Internet Explorer zum Beispiel lässt sich mittels F12 Taste auf das Entwicklertool zugreifen. Eines der wichtigsten Features dieses Entwicklertools ist es, dass es möglich ist, die Seite auf einer älteren Version des Internet Explorers zu betrachten, um mögliche Fehler bei älteren Versionen zu verbessern.

Bei Mozilla Firefox lässt sich, wie bei den meisten Browsern, über Rechtsklick à Element untersuchen oder Strg+Umschalt+I auf das Entwicklertool zugreifen. Hier bedienen sich aber die meisten Entwickler des Plugins Firebug. Dieses Plugin gibt es auch als Lite Version und ist für jeden Browser verfügbar.

Dieselben Funktionen gibt es auch für Chrome und Opera.

Bei Apples hauseigenem Browser Safari müssen die Entwicklertools zuerst in den Einstellungen aktiviert werden.

Funktionsumfang von Entwicklertools
Im Aufbau unterscheiden sich die Entwicklertools kaum voneinander – jedoch im Funktionsumfang.

Die wichtigste Funktion der Entwicklertools ist das Bearbeiten von Style Elementen. Hier ist es möglich ein Element zu markieren und dessen Style (Position, Schriftart, Farben etc.) zu ändern. Das einzige Problem dabei ist, dass diese Änderungen meistens beim Laden einer neuen Seite gänzlich verloren gehen.

Custom- oder User-CSS
Hier können im Browsern wie Opera, Chrome usw. die sogenannte Custom- oder User-CSS im Browser eingefügt werden. Diese neuen Dateien müssen entweder ausgewählt werden oder in einem bestimmten Ordner abgelegt werden. Die Custom- oder User-CSS erlauben es, ein Stylesheet, das lokal auf dem Computer liegt, auf einer Online Webseite zu testen. So ist es möglich Änderungen an Stylesheets direkt mit den Online Inhalten zu testen. Dies ist ebenfalls mit JavaScript Dateien möglich.

Ein anderer Anwendungsbereich der Custom- oder User-CSS/JavaScript ist es, Webseiten mit Funktionen zu erweitern. Diese werden meist als sogenannte Extensions für den jeweiligen Browser angeboten.

Wenn sie das nächste Mal nicht sicher sind, wie sich Änderungen in der Programmierung direkt auf ihre Webseite auswirken, benutzen sie die Custom- oder User-CSS Einstellung ihres Browsers um diese Änderungen vorab zu testen. Um jedoch wirklich sicher zu sein, dass die Änderungen keine ungewollten Auswirkungen haben, müssen die Inhalte auch Online getestet werden.

Alexander Schranz
Alexander Schranz
Junior Web Developer