Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Dienstag, 17. Mai 2016

Entwicklertools

lulu
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).


8 Kommentare:

  1. Ich wusste gar nicht, dass man mit den Entwicklertools auch arbeiten kann. Um ehrlich zu sein "untersuche" ich eine Webseite so auch nicht und stolpere nur ab und an in die style.css von anderen Pages. Daher vielen Dank für das kleine Tutorial und dir einen schönen Flug in die USA. ^-^ Machst du da Urlaub (hoffe ich doch xD)?

    AntwortenLöschen
    Antworten
    1. Inzwischen ist so viel möglich, das ist schon fast unheimlich :) Hab ich doch gern gemacht ^_^
      Daaanke, den hatte ich :) Jap ich hab da 3 Wochen Urlaub gemacht ^__^

      Löschen
  2. Ja das erleichtert wirklich das Leben und finde es schön, dass du das thematisierst. Einige wissen das vielleicht nicht *grins*
    Wirklich hilfreich ist es, wenn man was neues im CSS nachstellen möchtest. Das kann man Lokal dafür verwenden! Finde ich sehr schön *smile*

    AntwortenLöschen
    Antworten
    1. Ich glaube sogar, die meisten kannten das nicht bzw. wissen nicht wie man sie verwendet und was man damit alles machen kann ^_^

      Löschen
  3. Sehr nettes Tutorial. Selbst verwende ich die Entwicklertools nicht zum Arbeiten, aber ich nutze sie sehr gern, um einmal zu schauen, wie etwas aufgebaut ist.
    Das Ganze gibt es übrigens auch für den Browser Opera (den ich selbst lieber als Chrome benutze)

    AntwortenLöschen
    Antworten
    1. Aaaah, stimmt Opera habe ich total vergessen. Habe ihn vor Jahren einmal ne Zeit lang verwendet (das ist bestimmt schon fast 10 Jahre her ö.ö) aber ihn irgendwie aus den Augen verloren :( Vielen Dank für die Info!!! :D

      Löschen
  4. Wahnsinn, HTML supereinfach erklärt o_o Dass man das so lokal testen kann, wusste ich gar nicht. Ist eine echt tolle Sache! :) Die erleichtert einem vermutlich wirklich so einiges...

    Ich wollte mich nachträglich auch nochmal für deinen superlieben Kommentar bedanken! Ich habe mich sehr darüber gefreut, bin aber irgendwie übers Beantworten drüber weggekommen... /D Ich kann bei der doofen Sairen-Prüfung jetzt auch mitreden, aber an den End-Boss habe ich mich leider noch nicht gewagt... Ich bin erst mal Final Fantasy 12 und Pokémon wieder einmal erlegen *drop*

    Ich hoffe, dir geht es soweit gut und du gehst im Vorbereitungs-Stress nicht allzu sehr unter :) 3 Wochen USA klingt echt spannend! Wo genau gehts denn hin oder wird es eine Rundreise? Ich wünsche dir eine echt tolle Zeit! <3 Und komm heil hin und zurück ;)

    Bis bald und alles Liebe,
    Lizzy <3

    AntwortenLöschen
    Antworten
    1. Aaaaw danke ^///^ ich freue mich total, wenn man das was ich schreibe auch versteht. Ich hab immer Angst das alle denken: "was will die eigentlich von uns?" xD

      Uii das hab ich doch gern gemacht ^////^ Ich kenne das mit dem später Beantworten nur zu gut ^^" (siehe dieser Kommi hier... wir haben schon Juli!!!)
      Ich zocke zur Zeit Fire Emblem Fates xD Das macht auch süchtig ^^"

      Mir geht es suuuper :) Die 3 Wochen USA waren wirklich unglaublich! Wir haben eine Kalifornien Rundreise gemacht ^___^

      Löschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates