Digital First: Loading

CSS
Live
Testing/Debugging

css-live-testing-debugging
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.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.