Entwicklertools

Es tut mir wirklich leid, dass momentan nicht so viele Beiträge online kommen wie gewohnt. Ich fliege am Samstag für 3 Wochen in die USA und das bedarf sehr viel Vorbereitung und Planung. Und so kurz vor knapp gibt es dann doch noch mehr zu tun, wie erwartet.

Aber kommen wir zum heutigen Thema.

Immer wieder erhalte ich einen Hilfeschrei, dass ein Objekt auf der Website nicht richtig positioniert ist. Nach wenigen Minuten habe ich das Problem dann gelöst und die Frage, die sich einigen stellt ist folgende: Wie macht die lulu das?

Die Antworte möchte ich heute geben: Ich verwende die Entwicklertools meines Browsers.

Firefox, Google Chrome und ja, sogar der Internet Explorer (bzw. Edge) haben sogenannte "Entwicklerstools". Die Tools vereinfachen es, Webseiten zu erstellen und Elemente richtig zu positionieren.

Da ich am Liebsten den Google Chrome verwende basiert dieses Beispiel auf dem Chrome. In Firefox und IE bzw. Edge ist das aber ganz ähnlich.

Wie kann ich die Entwicklerstools aufrufen?

Öffne deine Homepage in deinem Browser. Bei mir wäre das http://thepinkpearl.de.

Drücke dann F12 auf deiner Tastatur. Alternativ kannst du auch auf die 3 Striche oben recht: Weitere Tools und Entwicklertools klicken.

Was können diese Tools?

Unter "Elements" sehen wir den kompletten HTML Code der Website. Indem wir auf einen Pfeil klicken, öffnet sich das jeweilige Element und die Unterelemente werden sichtbar. Links sehen wir den Style dieses Elements und in welcher Datei (z.B. style.css) er steht.

Wechseln wir von "Elements" auf "Console" sehen wir Ausgaben von unserem Code. Auch Fehler werden hier angezeigt.

Und wie hilft mir das jetzt weiter?

Hast du nun ein Element auf deiner Website, bei dem du nicht weist, wie viele Pixel es nach rechts, links, oben oder unten muss, kannst du folgendes tun:

Ruf deine Website im Browser auf und mache einen Rechtsklick auf das Element, das du positionieren willst. Dort klickst du nun auf "Untersuchen".

Die Entwicklertools haben sich nun geöffnet und sich automatisch auf dem Element positioniert, auf dem du einen Rechtsklick ausgeführt hast. In meinem Fall ist es das Element:  <img src="/Teamicons/4.jpg" border="0" class="newsava">

Rechts sehe ich nun den Style von diesem Bild. Das tolle an den Entwicklertools: ich kann diesen Style jetzt auch bearbeiten.

Mit einem Klick auf z.B. die 100px von Width kann ich hier auch 150px eintagen.

Man kann auch einen kompletten neuen Befehl hinzufügen. Klicke hierzu einfach (in diesem Beispiel) hinter die letzte Zeile (margin-bottom: 10px;) und darunter wird automatisch eine neue Zeile eingefügt.

Anmerkung: Die Änderungen die du hier vornimmst sind nur lokal und nur der jetzigen "Sitzung". Sobald du deine Seite aktualisierst, sind die Änderungen wieder weg. Wenn du sie übernehmen willst, musst du diese manuell in deine .css Datei eintragen und diese hochladen. 

Vorteil davon ist, dass du nicht ständig in einer Datei was anpassen und diese hochladen musst um zu schauen, wie es aussieht. Hiermit kannst du einfach und schnell schauen, wie deine Befehle sich auswirken und sobald du mit deinem Ergebnis zufrieden bist, kannst du die Datei ändern und einmal hochladen. Das spart Zeit und Nerven.

Nicht nur Styles können verändert werden...

... auch der Design Code, den du auf dem Tab "Elements" angezeigt bekommst, kann editiert werden.

Um den Quelltext zu editieren, kannst du entweder ein Doppelklick auf das jeweilige Element machen (Achtung: hier kann immer nur ein Teil der Zeile bearbeitet werden) oder ab Rechtsklick: "Edit as HTML" (hier kann die komplette Zeile bzw. ein komplettes Div oder auch der gesamte Code bearbeitet werden, je nachdem auf welchem Element du stehst).