So kannst du die Elemente und Stile auf (d)einer Website untersuchen und bearbeiten

In diesem Artikel beschäftigen wir uns mit Funktionen der Google Chrome DevTools. Hier findest du eine Anleitung, wie du diese öffnen kannst.

Die meisten von uns kennen das: Wir gestalten gerade eine Website, sei es manuell oder mithilfe eines der zahlreichen Content-Management-Systeme (CMS) – mit oder ohne Pagebuilder. Wir betrachten das Ergebnis und fragen uns: «Hmm, was ist das für ein Abstand?» Wir passen das Design an, überprüfen erneut, doch der Abstand ist immer noch zu groß. Oder handelt es sich um den Innenabstand?

Und genau für solche Probleme gibt es die DevTools im Browser.

Elemente

Um zur Elemente-Ansicht zu gelangen, öffnet man in Google Chrome die DevTools und wählt dann den ersten Menüpunkt oben links mit der Beschriftung «Elemente» aus.

Links sieht man die gesamte HTML-Struktur der Website, wobei sich die einzelnen Elemente aufklappen lassen. Wenn ich mit der Maus über ein Element fahre, das gleichzeitig im Blickfeld ist, wird dieses automatisch eingefärbt, damit ich sehen kann, um welches Element es sich auf meiner Webseite handelt. Dieses Fenster ist unter anderem nützlich, wenn ich beispielsweise:

• …überprüfen möchte, ob ein bestimmtes Element überhaupt vorhanden ist (und vielleicht nur mit CSS ausgeblendet wurde).
• …die Klassen, IDs, Attribute usw. von Elementen untersuchen möchte.
• …mich vergewissern möchte, dass ein bestimmtes Skript oder Stylesheet im Header bzw. am unteren Ende des Body eingefügt ist.
• …ein Bild-Element untersuchen möchte, um herauszufinden, was dessen intrinsische Größe ist (dazu einfach mit der Maus über den «src»-Teil des Elements fahren).

Und vieles mehr. Am besten, du probierst es selbst aus.

Pro Tip no. 1:

In der Menüleiste im linken Rand kannst du das Auswahlwerkzeug aktivieren.

Damit kannst du direkt mit der Maus auf deiner Webseite Elemente auswählen, anstatt sie mühsam in der HTML-Struktur suchen zu müssen. Sobald du einmal darauf geklickt hast, sind sie ausgewählt.

Stile

Wie du sicher bereits bemerkt hast, befindet sich auf der rechten Seite (oder unten, abhängig von der Bildschirmbreite) ein weiteres Fenster mit einem Untermenü. Wenn du dort auf «Stile» klickst, erhältst du eine Auflistung aller Stilregeln, die mithilfe von CSS erstellt wurden. Die Ansicht rechts korrespondiert immer mit der Auswahl links, was bedeutet, dass immer die Stilregeln angezeigt werden, die auf das ausgewählte Element links angewendet sind. Die Liste ist nach CSS-Spezifität geordnet. Das heißt, die Regeln mit der höchsten Spezifität – quasi die Prioritäten, die CSS zuweist – erscheinen zuerst. Wenn du etwas nach unten scrollst, wirst du wahrscheinlich feststellen, dass bestimmte Stile durchgestrichen sind.

Diese durchgestrichenen Stile werden auf dieser Seite nicht angewendet, da sie von einer Stilregel mit höherer Spezifität aufgehoben werden.

Wenn du mit der Maus über die einzelnen Stilregeln fährst, erscheinen Auswahlkästchen.

Mit diesen kannst du bestimmte Stilregeln auf der Seite deaktivieren. Das kann sehr hilfreich sein, wenn du beispielsweise herausfinden möchtest, ob die von dir geschriebene CSS-Regel überhaupt Auswirkungen hat.

Pro-Tip no. 2:

Über den zweiten Menüpunkt «Berechnet» gelangst du zu einer Übersicht aller Werte, welche durch die Anwendung der CSS-Regeln entstehen. Das kann hilfreich sein, wenn du beispielsweise die genauen Pixel-Grössen der Elemente wissen möchtest oder nicht die ganzen Stile nach der Font-Size durchstöbern möchtest. Hier hast du zudem das Box-Modell des ausgewählten Elements grafisch dargestellt. Du kannst also auf einen Blick alle Angaben zur Elementgrösse, Innenabstand, Rahmen und Aussenabstand sehen. Und wenn du mit der Maus darüber fährst, wird das Ganze wiederum auf der Seite eingefärbt.

Website direkt in den DevTools bearbeiten

Sowohl die Elemente als auch die Stile können direkt in den DevTools bearbeitet werden. Du kannst beispielsweise die Klasse eines Elements entfernen oder anpassen, indem du sie doppelklickst und dann bearbeitest.

Auch die CSS-Stilregeln können bearbeitet oder neue hinzugefügt werden. So kannst du beispielsweise ausprobieren, ob «pink» vielleicht doch die bessere Wahl für die Hintergrundfarbe wäre…

Wichtig hierbei: Wenn du in den DevTools Anpassungen an den Elementen oder Stilregeln vornimmst, veränderst du nicht die Website! Du gibst deinem Browser lediglich Anweisungen, wie er die Seite (anders) darstellen soll. Sobald du die Seite aktualisierst, sind die Änderungen wieder weg. Also keine Angst, niemand kann auf diese Weise deine Website verändern, Dinge löschen oder einfügen, etc.

Ein weiterer Grund, dich einmal richtig auszutoben und herumzuprobieren. Schau dir auch die restlichen Punkte im Untermenü der Elemente an. Wir haben meiner Ansicht nach die wichtigsten und hilfreichsten zwei behandelt. Vielleicht findest oder kennst du aber weitere hilfreiche Anwendungen, die du als Pro Tip mit uns in den Kommentaren teilen kannst.

Was denkst du dazu?

yeah!

4

wooow

0

what?

0

meh.

0

hahaha

0